Grow your CSS skills. Land your dream job.

Center a DIV inside a DIV?

  • # May 20, 2008 at 5:50 pm

    Maybe I’m going about this all wrong, so correct me at any time.

    I’m trying to center a DIV inside of another DIV tag and having issues.

    Here’s what I tried…

    HTML

    CSS

    Code:
    #menu {
    height: 50px ;
    background: url(../_images/header_menu.gif) repeat-x ;
    }
    #menu-items {
    width: 880px ;
    margin: 0 auto ;
    }
    ul#top-nav {
    }
    ul#top-nav li {
    display: inline ;
    }
    ul#top-nav li a {
    display: block ;
    height: 50px ;
    text-indent: -9999px ;
    float:left ;
    }
    ul#top-nav li.about a {
    width: 188px ;
    background: url(../_images/menu_about.gif) bottom center no-repeat ;
    }
    ul#top-nav li.work a {
    width: 167px ;
    background: url(../_images/menu_work.gif) bottom center no-repeat ;
    }
    ul#top-nav li.services a {
    width: 168px ;
    background: url(../_images/menu_services.gif) bottom center no-repeat ;
    }
    ul#top-nav li.careers a {
    width: 168px ;
    background: url(../_images/menu_careers.gif) bottom center no-repeat ;
    }
    ul#top-nav li.contact a {
    width: 189px ;
    background: url(../_images/menu_contact.gif) bottom center no-repeat ;
    }
    ul#top-nav li a:hover {
    background-position: center center ;
    }

    So, right now my menu buttons are left-aligned but I’d like them to be centered on the page.

    Here is the site I’m working on http://www.viziworx.com/test.html

    Any and all feedback pertaining to achieving my goal will be much appreciated.

    Thanks in advance!

    B-Rad
    Hampton Roads Most Wanted

    # May 20, 2008 at 5:58 pm

    Looks like you mis-spelled an ID name. In the markup you use "menu-item", but in the CSS you use "menu-items".

    # May 20, 2008 at 6:02 pm

    Doh!

    Easy enough. It’s always the simplest mistake that gets me every time!

    Haha.

    I think I need a break from staring at the monitor.

    Thanks Chris!

    box
    # May 20, 2008 at 7:09 pm

    Really the two ‘divs’ are redundant. You can achieve the same layout with just the UL tag.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".