Grow your CSS skills. Land your dream job.

Menu Positioning

  • # March 3, 2009 at 8:37 am

    Hi All,

    How is everyone? Thanks for your help with my personal site, I am now implementing some of the changes and will get a new version online soon.

    I have another little problem, I am working on the structure of a site which has the menu to be situated at the base of the header on the right hand side, however I can’t get it to sit where it’s supposed too. The only browser it works in is Opera. In FF and Safari, the menu drops too low and doesn’t sit on the base of the header.

    Would anyone know what I’m doing wrong? :? Many thanks for your assistance yet again.

    Best wishes,

    Darrell.

    A link to the structure is: http://www.kscope.co.uk/upload/files/index.html

    This is the HTML

    This is the CSS

    Code:
    #menu {
    float: right;
    padding-top: 126px;
    width: 487px;
    }

    #menu ul {
    margin: 0px;
    list-style: none;
    padding: 0px;
    }

    #menu li {
    display: inline;
    }

    #menu a {
    float: left;
    padding: 5px 15px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    display: block;
    color: #FFFFFF;
    }

    #menu a:hover, .active a {
    color: #000000;
    background: #FFCC00;
    }

    # March 3, 2009 at 1:16 pm

    Well, if you give 125px top-padding to div menu, you should expect if to fall down :)

    # March 4, 2009 at 7:23 am

    I take it this isn’t the correct way to position my menu then? How confusing!! :oops:

    # March 4, 2009 at 11:07 am

    attached is an image of how it appears on my screen in IE7 and in FF2, if this not how it should appear,
    then how should it show up?

    [attachment=0]menu.JPG[/attachment]

    # March 4, 2009 at 12:14 pm

    Ah yes, it looks OK in that state, but when you hover the mouse, the boxes drop below the yellow line which isn’t how I intended. I would like them to sit just neatly on the yellow line. I’m sure this is probably quite straight forwards, however I don’t seem to be able to get this right! Oh dear.

    # March 4, 2009 at 12:22 pm

    Hover working fine for me in FF3 and IE7. Where are you seeing the problem?

    # March 4, 2009 at 2:51 pm

    Er, how embarrassing. :oops: I have double checked the file in FF3 (which yesterday i wasn’t working) and Safari (again, it wasn’t working) and it now appears to be working as I intended!

    That I certainly don’t understand – I’m going to need to take this away and look closer to see what was happening. :?: Thank you all so much for your assistance. :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".