Problem with TwentyTen WordPress template

HTML & CSS
1

I actually have a little problem that it puzzles me and it is a bit embarrassing but… well, I guess I’ll be not the only one so… I based a design on WordPress default template TwentyTen.

I changed a few bits and pieces and publish it (although the site itself is not finished and it doesn’t work as it should but they insisted so I complied)

TwentyTen’s default appearance shows the name of the blog on the top left area of the design. I changed the text for a logo image, and removed the huge, central image from the header. The navigation menu was besides the logo.

Now, my customer wants to have the logo centered and bigger and the navigation menu under the logo.

I can’t get the logo to center for some reasons. I looked everywhere… expect in the place which I’m sure that Paul and Alex will look and tell me how I could have missed it!.

I can provide pictures and links, if necessary :smiley:

2

Hi Nuria,

The main problem was that you floated the element and margin:auto doesn’t apply to floats in the same way it does to static elements.

You can fix it like this:


#site-title{width:100%}
#site-title img{float:none;display:block;margin:auto}
3

I can’t understand why it worked with you but didn’t work with me. I did remove the float (I didn’t set it to none, simply removed it) and set up a width of 100%. And I used text-align: center to the container.

I think I’ll review the whole CSS to understand this thing.

4

I’ve got the knack :slight_smile:

You must have missed something in the mix there. If the parent is floated (and not full 100% width) or if the image is floated then the centring won’t happen. If you removed the float was the element still display:block as I can’t remember now.

The basics are simple but you may have had conflicts that were throwing things out.

5

Well, the theme is build with quite a few divs and all that. I used it as the site had to be up in the shortest time possible and this was the quickest solution. Obviously, with so many divs for a theme that has to adapt to everything and so generic, it is easy to overlook something and I guess that’s what I did.