Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    May 2010
    Thanked 0 Times in 0 Posts

    Question Help with A Basic CSS Menu

    I'm new on these forums and I don't know very much of either HTML or CSS. I know enough HTML/XML to find my way around a blogger template, which brings me to my problem. I have a basic CSS menu up in the top corner of my website at www.intothebook.net.

    When you mouse over it, the pseudo-selector a.tabmenu:hover kicks in its styling and adds a background and border, so that it looks like the tab is coming out of the header (which has the same background and header). But the tab won't overlap the header. For some reason, the header jumps down automatically.

    So right now I have the a.tabmenu:hover styling set to add a bottom pixel padding that should overlap the header. Instead the header bounces down to make room for the extra padding. I found out that the header-wrapper element is set to position:relative, but I can't change that to absolute without messing up my template.

    Anyways, it's hard to explain, but this is what I want:

    This is what it shows up now:

    So basically, if I add extra padding to the bottom of the a.tabmenu:hover, the header bounces down to make room for that padding, instead of the padding overlapping the header to make it look like the link connects to the header.

    Help? If you didn't understand that, I'll try to give a better description, but hopefully it makes at least a little bit of sense! :P

    The Newb

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Clapham Junction - London SW
    Thanked 204 Times in 203 Posts
    The W3 html validator gave this report on the code.

    The css validator gave this result.
    Last edited by effpeetee; 05-08-2010 at 05:07 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts