SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Centering navigation that uses background images for links

    I am trying to center a navigation list to the rest of the page that uses background images for the links. I have tried the
    HTML Code:
    display:table;
    method, but that seems to mean that I need to change my list items that are being displayed using
    HTML Code:
    float:left
    to
    HTML Code:
    display:inline
    , which makes the background images break. Is there a way to do this?

    Here is the website. It is the main navigation bar under the logo that is of concern.
    James Web Development | New York, NY
    Design, Develop, Deliver

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Use inline-block instead of floats and then you can center them with text-align:center on the parent.

    Code:
    #nav{float:none}
    #nav ul{text-align:center}
    #nav li{
    display:inline-block;
    float:none;
    }
    * html #nav ul li{display:inline}/* ie6 fix */
    *+html #nav ul li{display:inline}/* ie7 fix */

    The IE6/7 fixes must follow after the original rule or they won't work properly.

  3. #3
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul! That did the trick! I appreciate your help, once again!
    James Web Development | New York, NY
    Design, Develop, Deliver


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
  •