Centering menu and header

  • Resolved DW83

    (@dw83)


    14 years, 8 months ago

    Hi,

    I’m having trouble with the header and menu bar on my blog. Basically, I want to ensure that both the header image and the text on the menu bar are exactly centered on the page. I can’t seem to make this work by altering margins and padding, so I suspect I may have got something wrong in my css.

    The blog is here . You’ll see that the elements are very nearly centered, but not quite.

    The code for my header and menu is at http://pastebin.com/MyvPrRBC

    Many thanks for your help. It looks like an insignificant problem, I know, but I’m just wondering whether my inability to center these things indicates a problem in the css.

Viewing 4 replies - 1 through 4 (of 4 total)
  • peredur

    (@peredur)

    14 years, 8 months ago

    You can center your image by adding this style rule to your child theme’s style sheet (you are using a child theme, aren’t you?):

    #branding img {
    margin: 0 25px;
}

    This is because your image is being scaled to 950px (by the theme, I guess) from 1000px. So you need left and right margins of 25px each.

    I’ll take a look at the menu next.

    Cheers

    PAE

    Thread Starter DW83

    (@dw83)

    14 years, 8 months ago

    Thanks! Yes, I’m using a child theme. OK, that worked for the header. I suspect the menu might be a little more tricky.

    peredur

    (@peredur)

    14 years, 8 months ago

    OK, menu.

    The problem is that the ul is occupying the full width of its container and that the li elements are floated right within it, so unless the ul has a width exactly equal to the width of the menu items (less the padding that seems to be being applied) the menu items are never going to be in the centre. In fact specifying margin: 0 auto is meaningless unless the block has a width.

    Unfortunately, there’s no way to calculate the correct width. It’s a matter of trial and error. This looked about right to me:

    #access ul {
    width: 590px;
}

    Of course, this will only work until you add or remove an item from the menu, at which point it will have to be done again, I think.

    Exhortations once again to be doing this in a child theme.

    Cheers

    PAE

    Thread Starter DW83

    (@dw83)

    14 years, 8 months ago

    Thanks very much – that worked!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Centering menu and header’ is closed to new replies.