SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help Me Center This List!!!

    Hey,

    I used some examples from alistapart to make a drop down menu. I got it kind of looking how I want, need to mess with it a bit, but I cant get my links to center. They start at the left of the screen and all I can change is their spacing, I cant center them.

    Here is my complete code:
    Code:
    <script>
    sfHover = function() { 
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
    	for (var i=0; i<sfEls.length; i++) { 
    	    sfEls[i].onmouseover=function() { 
    	        this.className+=" sfhover"; 
    	    } 
    	    sfEls[i].onmouseout=function() { 
    	      this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
    	    } 
    	} 
    } 
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    
    <style type="text/css">
    body {
    	font: normal 12px arial; 
    	background-color: #000000; }
    #nav, #nav ul {
    	padding: 0; 
    	margin: 0; 
    	list-style: none; } 
    #nav a { 
    	display: block; 
    	width: 20em;
    	 }
    #nav li { 
    	float: left;
    	width: 20em;
    	}
    #nav li ul { 
    	position: absolute; 
    	width: 10em; 
    	left: -999em;
    	background-color: #D1D1D1; }
    #nav li:hover ul, #nav li.sfhover ul { 
    	left: auto; } 
    a:link {
    	color: #FFFFFF;
    	text-decoration: none; }
    a:active {
    	color: #CCCCCC;
    	text-decoration: none; }
    a:visited {
    	color: #FFFFFF;
    	text-decoration: none; }
    a:hover {color: #000000;
    	text-decoration: none; }
    </style>
    
    <html>
    <ul id="nav"> 
    <li><a href="#">View CDs</a>
      <ul> 
          <li><a href="#">Entire Collection</a></li> 
          <li><a href="#">Burnt Collection</a></li>
          <li><a href="#">Placeholder</a></li> 
      </ul> 
           </li> 
    <li><a href="#">Manage CDs</a> 
      <ul> 
           <li><a href="#">Whole Collection </a></li> 
           <li><a href="#">Burnt Collection</a></li> 
           <li><a href="#">Placeholder</a></li> 
           </li> 
      </ul> 
    <li><a href="#">View DVDs</a> 
      <ul> 
          <li><a href="#">Entire Collection</a></li> 
          <li><a href="#">DVD Movie Collection</a></li> 
          <li><a href="#">DVD Music Collection</a></li>
          <li><a href="#">Burnt Collection</a></li> 
       </ul> 
           </li> 
    <li><a href="#">Manage DVDs</a> 
      <ul> 
          <li><a href="#">Whole Collection</a></li>
          <li><a href="#">DVD Movie Collection</a></li>
          <li><a href="#">DVD Music Collection</a></li>
          <li><a href="#">Burnt Collection</a></li>
      </ul> 
      </li>
      </ul>
    </html>

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    #nav {width: something; margin: 0 auto;} ??

    I'm still confused as to how you want to center 'em.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you seen the page?

    I want the links at the top to fill up the entire row of the first screen in a centered fashion.

    For example take a look at the top of this site where the tabs that say blog, forums, etc.. are.

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'd love to have a look. But where? Have you got a link online?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script>
    sfHover = function() { 
     var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
     for (var i=0; i<sfEls.length; i++) { 
    	 sfEls[i].onmouseover=function() { 
    		 this.className+=" sfhover"; 
    	 } 
    	 sfEls[i].onmouseout=function() { 
    	   this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
    	 } 
     } 
    } 
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <style type="text/css">
    body {
     font: normal 12px arial; 
     background-color: #000000; }
    #nav, #nav ul {
     padding: 0; 
     margin: 0; 
     list-style: none; 
     text-align:center
     } 
    #nav a { 
     display: block; 
     width: 20em;
      }
    #nav li { 
     float: left;
     width: 20em;
     
     }
    #nav li ul {
     position: absolute; 
     width: 10em; 
     background-color: #D1D1D1;
     left:-999em;
     margin-left:5em;
    }
    #nav li ul li, #nav li ul a { width:10em;}
    #nav li:hover ul, #nav li.sfhover ul { 
     left: auto; } 
    * html #nav li{position:relative;}
    * html #nav li:hover ul, #nav li.sfhover ul { 
     left: 0; } 
    a:link {
     color: #FFFFFF;
     text-decoration: none; }
    a:active {
     color: #CCCCCC;
     text-decoration: none; }
    a:visited {
     color: #FFFFFF;
     text-decoration: none; }
    #nav ul a:hover {color: #000000;
     text-decoration: none; }
    </style>
    </head>
    <body>
    <ul id="nav">
      <li><a href="#">View CDs</a> 
    	<ul>
    	  <li><a href="#">Entire Collection</a></li>
    	  <li><a href="#">Burnt Collection</a></li>
    	  <li><a href="#">Placeholder</a></li>
    	</ul>
      </li><li>
      <a href="#">Manage CDs</a> 
      <ul>
    	<li><a href="#">Whole Collection </a></li>
    	<li><a href="#">Burnt Collection</a></li>
    	<li><a href="#">Placeholder</a></li></li>
    	
      </ul>
      <li><a href="#">View DVDs</a> 
    	<ul>
    	  <li><a href="#">Entire Collection</a></li>
    	  <li><a href="#">DVD Movie Collection</a></li>
    	  <li><a href="#">DVD Music Collection</a></li>
    	  <li><a href="#">Burnt Collection</a></li>
    	</ul>
      </li>
      <li><a href="#">Manage DVDs</a> 
    	<ul>
    	  <li><a href="#">Whole Collection</a></li>
    	  <li><a href="#">DVD Movie Collection</a></li>
    	  <li><a href="#">DVD Music Collection</a></li>
    	  <li><a href="#">Burnt Collection</a></li>
    	</ul>
      </li>
    </ul>
    </body>
    </html>
    You will need to control the wrapping of the top level list.

    Paul

  6. #6
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that worked


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
  •