Results 1 to 6 of 6

Thread: Cant seem to center my unordered list, any help appreciated.

  1. #1
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Cant seem to center my unordered list, any help appreciated.

    Hey yall i am doing my site and having trouble centering the list for the top i want it to stay the same size but be in the center and and not offset to the left. Thanks in advance.

    Code:
    /* HEADER */
    
    #header{width:735px; height:283px;  position:relative; background:url(../images/b_header.jpg) 0 0 no-repeat; margin:0 auto}
    
    #header img#logo{position:absolute; top:9px; left:510px}
    #header img#slogan{position:absolute; top:186px; left:408px}
    
    #header ul.menu{position:absolute; top:16px; left:2px; width:470px}
    #header ul.menu li{height:17px; margin-right:13px; float:left}
    #header ul.menu li a{height:17px; display:block; text-indent:-20000px; }
    #header ul.menu li a:hover{height:17px;}
    
    #header ul.menu li.btn_1 a{width:69px; background:url(../images/btn_1.gif) 0 0 no-repeat; }
    #header ul.menu li.btn_1 a:hover{width:69px; background:url(../images/btn_1_over.gif) 0 0 no-repeat;}
    
    #header ul.menu li.btn_2 a{width:61px; background:url(../images/btn_2.gif) 0 0 no-repeat; }
    #header ul.menu li.btn_2 a:hover{width:61px; background:url(../images/btn_2_over.gif) 0 0 no-repeat;}
    
    #header ul.menu li.btn_3 a{width:61px; background:url(../images/btn_3.gif) 0 0 no-repeat; }
    #header ul.menu li.btn_3 a:hover{width:61px; background:url(../images/btn_3_over.gif) 0 0 no-repeat;}
    
    #header ul.menu li.btn_4 a{width:66px; background:url(../images/btn_4.gif) 0 0 no-repeat; }
    #header ul.menu li.btn_4 a:hover{width:66px; background:url(../images/btn_4_over.gif) 0 0 no-repeat;}
    
    #header ul.menu li.btn_5{margin-right:0}
    #header ul.menu li.btn_5 a{width:73px; background:url(../images/btn_5.gif) 0 0 no-repeat; }
    #header ul.menu li.btn_5 a:hover{width:73px; background:url(../images/btn_5_over.gif) 0 0 no-repeat;}
    
    #header ul.menu li.line{width:6px; background:url(../images/bullet_m.gif) 0 6px no-repeat}
    Last edited by Jholden; 11-17-2009 at 05:01 PM. Reason: English was horrrible

  2. #2
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Also if any one has a better idea on how i should do it, i am open and can post the code for my entire site. Well at lease the CSS code and if needed the html also.

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by Jholden
    ...
    #header ul.menu{position:absolute; top:16px; left:2px; width:470px}
    ...
    This is why your list is offset to the left. It's generally not advised to use absolute positioning throughout the entire site.

  4. #4
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by boogyman View Post
    This is why your list is offset to the left. It's generally not advised to use absolute positioning throughout the entire site.
    O ok i will fix that, do i just change absolute to center?

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by Jholden View Post
    O ok i will fix that, do i just change absolute to center?
    (X)HTML was not created for presentational purposes.

    My advice if for you to read some more about proper webpage development. Start by reviewing http://webdevout.com

  6. #6
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yea, no offense but dont really have time to read that whole site. Is there a quick way to adjust it over, anywhere in the middle top works?

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
  •