SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,269
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)

    Problem with TwentyTen WordPress template

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:

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

  3. #3
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,269
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by molona View Post
    I can't understand why it worked with you but didn't work with me.
    I've got the knack

    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. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,269
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    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.


Bookmarks

Posting Permissions

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