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 Need help centering a menu

    I am trying to center an unordered list used as a taskbar. I can get the whole thing centered and left-justified, but I want it centered as if I were using the text-align property. Here is a visual of what I am looking to do:



    The area I want to center it in has a black 1px border.

    Here is the site:

    http://www.jameswebdevelopment.com/clients/jasonmarks/

    And here is the css:

    Code:
    body, html {margin : 0; padding : 0; background : url("../pics/background.gif") repeat center center; color : #000;}
    body {min-width : 820px; min-height : 100%;}
    /* Main Layout */
    #wrap {width : 800px; margin : 0 auto; padding : 0 10px; background: url("../pics/background_body.png") repeat-y 50% 0;}
    #header {width : 800px; height : 280px; margin : 0 auto; padding : 0; background: url("../pics/header.png") no-repeat center center;}
    #taskbar {position : relative; top : 110px; left : 240px; width : 550px; height : 109px; border : 1px solid #000;}
    #contentwrap {width : 758px; margin : 0 auto; padding : 0; background-color : #FFF;}
    #sidebar {float : left; width : 209px; margin : 5px; padding : 5px; background-color : #DADADA; border : 6px solid #C1C1C1; font-size : 0.8em; font-family : Arial, Verdana, sans-serif; font-weight : bold; color : #000;}
    #content {float : right; text-align : left; width : 430px; margin : 5px; font-size : 0.8em; font-family : Arial, Verdana, sans-serif; color : #000;}
    #footer {clear : both; text-align : center; padding : 20px 0; font-family : Arial, Verdana, sans-serif; font-size : 0.7em; color : #000; font-weight : bold;}
    /* Helpers */
    .left {float : left;}
    .right {float : right;}
    .center {text-align : center;}
    div.spacer {clear : both;}
    img {border : 0;}
    ul.nostyle {list-style : none;}
    /* Taskbar */
    .taskbar {list-style-type : none; text-align : center; margin : 0; padding : 15px 0 0 0;}
    .taskbar li {float : left;}
    #navbarHome {width : 101px; height : 40px;}
    #navbarHome a {display : block; width : 101px; height : 40px; text-indent : -2000em; background-image : url("../pics/taskbar/home.png"); }
    #navbarHome a:hover, #navbarHome a.focus {background : url("../pics/taskbar/home_over.png") no-repeat 0 0;}
    #navbarBio {width : 72px; height : 40px;}
    #navbarBio a {display : block; width : 72px; height : 40px; text-indent : -2000em; background-image : url("../pics/taskbar/bio.png"); }
    #navbarBio a:hover, #navbarBio a.focus {background : url("../pics/taskbar/bio_over.png") no-repeat 0 0;}
    #navbarReviews {width : 130px; height : 40px;}
    #navbarReviews a {display : block; width : 130px; height : 40px; text-indent : -2000em; background-image : url("../pics/taskbar/reviews.png"); }
    #navbarReviews a:hover, #navbarReviews a.focus {background : url("../pics/taskbar/reviews_over.png") no-repeat 0 0;}
    #navbarHeadshotResume {width : 240px; height : 40px;}
    #navbarHeadshotResume a {display : block; width : 240px; height : 40px; text-indent : -2000em; background-image : url("../pics/taskbar/headshotresume.png"); }
    #navbarHeadshotResume a:hover, #navbarHeadshotResume a.focus {background : url("../pics/taskbar/headshotresume_over.png") no-repeat 0 0;}
    #navbarMedia {width : 108px; height : 40px;}
    #navbarMedia a {display : block; width : 108px; height : 40px; text-indent : -2000em; background-image : url("../pics/taskbar/media.png"); }
    #navbarMedia a:hover, #navbarMedia a.focus {background : url("../pics/taskbar/media_over.png") no-repeat 0 0;}
    #navbarGuestbook {width : 154px; height : 40px;}
    #navbarGuestbook a {display : block; width : 154px; height : 40px; text-indent : -2000em; background-image : url("../pics/taskbar/guestbook.png"); }
    #navbarGuestbook a:hover, #navbarGuestbook a.focus {background : url("../pics/taskbar/guestbook_over.png") no-repeat 0 0;}
    #navbarContact {width : 126px; height : 40px;}
    #navbarContact a {display : block; width : 126px; height : 40px; text-indent : -2000em; background-image : url("../pics/taskbar/contact.png"); }
    #navbarContact a:hover, #navbarContact a.focus {background : url("../pics/taskbar/contact_over.png") no-repeat 0 0;}
    /* Rounded Corners in the Content */
    .roundcont {background-color : #FFF; color : #000;}
    .roundcont div.content {padding-left : 37px; padding-right : 37px;}
    .roundtop {background : url('../pics/content_trcorner.png') no-repeat top right;}
    .roundbottom {background : url('../pics/content_brcorner.png') no-repeat top right;}
    img.corner {width : 37px; height : 37px; border : none; display : block !important;}
    /* News List */
    ul.news {clear : both; list-style : none; margin : 0; padding : 10px 0;}
    ul.news li {display : inline;}
    ul.news li.newsphoto {width : 115px;}
    ul.news li.newsdetails {width : 315px;}
    /* Headings */
    h2 {margin : 0; padding : 0;}
    #content h2 {margin : 0; padding : 0; border-bottom : 1px solid #000; width : 100%;}
    h3 {clear : both; font-size : 1.3em; padding : 20px 0;}
    /* Links */
    #sidebar a, #content a, #footer a {color : #000;}
    #sidebar a:hover, #sidebar a:focus, #content a:hover, #content a:focus, #footer a:hover, #footer a:focus {color : #4B4B4B;}

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You either need to give the <li>s display:inline instead of float:left or use this centered menu technique.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  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 for the advice. The centered menu technique worked beautifully. The display:inline technique seemed to actually make the menu display vertically in Mozilla. Appreciate it!


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
  •