WordPress.org

1. DW83
   Member
   Posted 9 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.

2. peredur
   Member
   Posted 9 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

3. DW83
   Member
   Posted 9 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.

4. peredur
   Member
   Posted 9 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

5. DW83
   Member
   Posted 9 months ago #

   Thanks very much - that worked!

Reply

You must log in to post.