SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Centering horizontal nav list in a div

    I've been put in charge of converting a site from a tabled based html layout to a layout consisting of div and css which will meet validation standards for our company. But I'm having a little problem with one element particularly. The "look" needs to match the current site as close as possible.

    The current site has a logo in the top left of the design, then a vertical navigation list with 3 links to the top right corner, below these is a horizontal navigation bar with 3 links. The 3 links in the horizontal bar are centered in the bar which is ending up being tricky for me.

    Here is a glimpse of the code that I have written to do this:

    HTML Code:
    <div id="Wrapper">
    	<div id="header">
    		<h1><a href="/index.html"><span></span>Site Title</a></h1>
    		<ul id="topNav">
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About Us</a></li>
    			<li class="topNavLast"><a href="#">Contact Us</a></li>
    		</ul>
    	</div>
    	<div id="horNav">
    		<ul>
    			<li class="horNavFirst"><a href="#">Link 1</a></li>
    			<li><a href="#">Link 2</a></li>
    			<li><a href="#">Link 3</a></li>
    		</ul>
    	</div>
    </div>
    And the CSS for the above html code:

    Code CSS:
    #Wrapper {
    	width: 744px;
    	float: none;
    	margin-left: auto;
    	margin-right: auto;
    	}
    #header {
    	width: 744px;
    	}
    #header h1 {
    	width: 205px;
    	height: 61px;
    	position: relative;
    	font-size: 14px;
    	float: left;
    	}
    #header h1 span {
    	background: url(../images/logo.jpg) no-repeat;
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	}
    #topNav {
    	float: right;
    	width: 158px;
    	margin: 0 0 20px 0;
    	}
    #topNav li {
    	list-style: none;
    	padding: 2px 0 4px 0;
    	margin: 0;
    	border-bottom: 1px solid #a9a9a9;
    	text-transform: uppercase;
    	width: 158px;
    	}
    #topNav li.topNavLast {
    	border-bottom: none;
    	}
    #topNav li a {
    	text-decoration: none;
    	color: #666;
    	font-size: 9px;
    	}
    #topNav li a:hover {
    	text-decoration: underline;
    	}
    #horNav {
    	width: 744px;
    	background: #4caaa1;
    	float:left;
    	clear: both;
    	margin-bottom: 10px;
    	}
    #horNav ul{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	background: #4caaa1;
    	width: 744px;
    	}
    #horNav ul li a {
    	display: block;
    	margin: 0;
    	padding: 10px 20px 10px 20px;
    	color: #fff;
    	text-decoration: none;
    	border-right: 1px solid #fff;
    	background: #4caaa1;
    	}
    #horNav ul li {
    	float: left;
    	font-size: 12px;
    	text-transform: uppercase;
    	}
    #horNav a:hover {
    	background: #62c4bb;
    	}

    I can't seem to find a way to center the UL element within the horNav DIV. I tried to "eye it up" by applying a margin-left to the UL element but that didn't work with IE and is really just a hack. Does anyone have any suggestions on how to center the UL element?

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Use display inline to your advantage
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    *{padding:0;margin:0;}
    
    body{
    font-size:75&#37;;
    font-family:verdana,sans-serif;
    text-align:center;
    }
    
    div,h1{font-size:1em;/* em control */text-align:left;/* bring to te left */}
    
    #Wrapper{
    width:744px;
    margin:0 auto;
    }
    
    #header{overflow:hidden;}
    
    #header h1{
    float:left;
    }
    
    #header h1 span{
    display:block;
    background:#ccccff url(../images/logo.jpg) no-repeat;
    width:205px;
    height:61px;
    }
    
    #topNav {
    background:#ffccff;
    float:right;
    width:158px;
    margin: 0 0 20px 0;
    }
    
    #topNav{list-style:none;}
    
    #topNav li a{
    display:block;
    padding: 2px 0 4px 2px;
    border-bottom:1px solid #a9a9a9;
    text-transform: uppercase;
    text-decoration: none;
    color: #666;
    font-size:.8em;
    }
    
    #topNav .topNavLast a{border-bottom:none;}
    
    #topNav a:hover{text-decoration:underline;}
    
    #horNav{min-height:1%;}
    
    #horNav ul{
    background:#4caaa1;
    text-align:center;
    padding:10px 0;
    list-style:none;
    }
    
    #horNav li{display:inline;}
    
    #horNav a{
    padding:10px 20px;
    color:#fff;
    text-decoration:none;
    border-right:1px solid #fff;
    text-transform:uppercase;
    font-size:12px;
    }
    #horNav .horNavFirst a{border-left:1px solid #fff;}
    
    #horNav a:hover{background:#62c4bb;}
    
    	head+/* */body .fc:after{ /* min-height browser but not IE 7 */
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    	
    
    		
    
    </style>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
    
    <div id="Wrapper">
    
    <div id="header" class="fc">
    
    <h1><a href="/index.html"><span>Site Title</span></a></h1>
    
    
    <ul id="topNav">
    <li><a href="##">Home</a></li>
    <li><a href="###">About Us</a></li>
    <li class="topNavLast"><a href="##">Contact Us</a></li>
    </ul>
    
    </div>
    
    <div id="horNav">
    <ul>
    <li class="horNavFirst"><a href="##">Link 1 a</a></li><li><a href="##">Link 2 a</a></li><li><a href="##">Link 3 a</a></li>
    </ul>
    </div>
    
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! I used your CSS for the horNav which seems to center the list. I didn't really touch the other styles because the logo and top right nav seem to be working fine in all browsers.

    But in my implementation I'm getting about a 4px padding or margin above the list links in the horNav div. And the :hover on the two last links in the list seem to have a 4px margin/padding between the white border and the :hover background color.

    I'm not sure how to narrow down what is causing that because I'm not familiar with some of the CSS you're using.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's the link to the current Web site, if you don't mind me asking?

  5. #5
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds,

    Can you explain to me what the following css style does? I've never seen anything like this used before.

    Code CSS:
    head+/* */body .fc:after{ /* min-height browser but not IE 7 */
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}

  6. #6
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For some reason the horizontal navigation is displaying some padding to the left. I've included a screen shot to show this. I've tried a number of things to attempt to fix this but none seem to work. Any suggestions?
    Attached Images Attached Images

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dziner View Post
    all4nerds,

    Can you explain to me what the following css style does? I've never seen anything like this used before.

    Code CSS:
    head+/* */body .fc:after{ /* min-height browser but not IE 7 */
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    Hello

    The PIE way of float clearing

    Quote Originally Posted by dziner View Post
    For some reason the horizontal navigation is displaying some padding to the left. I've included a screen shot to show this. I've tried a number of things to attempt to fix this but none seem to work. Any suggestions?
    Try inline

    <li></li><li></li><li></li>

    not
    <li></li>
    <li></li>
    <li></li>

  8. #8
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! Removing the white space between the li elements did the trick! I'll need to read up some more on the PIE float clearing method. Thanks again!

  9. #9
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uhoh... I just tested this page in IE on a PC running Windows XP and found a few issues.

    1. The spacing between the LI links under the topNav div have too much spacing.

    2. There is too much space between the horNav div and the header div.

    3. There seems to be a gap between the horNav div and the list navigation inside of it (the white borders from the LI elements do not meet the top of the surrounding div).

    I've attached a screen shot as an example.

    HTML snippet:

    HTML Code:
    <div id="Wrapper">
    	<div id="header" class="fc">
    		<h1><a href="/index.html" title="Company Title"><span></span>Company Title</a></h1>
        		<ul id="topNav">
          			<li><a href="##" title="Home">Home</a></li>
          			<li><a href="###" title="About Us">About Us</a></li>
          			<li class="topNavLast"><a href="##" title="Contact Us">Contact Us</a></li>
        		</ul>
      	</div>
    	<div id="horNav">
        	<ul>
    			<li class="horNavFirst"><a href="#" title="Link 1">Link 1</a></li><li><a href="#" title="Link 2">Link 2</a></li><li><a href="##" title="Link 3">Link 3</a></li>
    		</ul>
    	</div>
    CSS snippet:

    Code CSS:
    * {
    	padding: 0;
    	margin: 0;
    	}
    body {
    	font-size: 75%;
    	font-family: verdana,sans-serif;
    	text-align: center;
    	}
    div,h1 {
    	font-size: 1em; /* em control */
    	text-align:left; /* bring to te left */
    	}
    #Wrapper{
    	width: 744px;
    	margin: 0 auto;
    	padding-top: 20px;
    	}
    #header {
    	overflow: hidden;
    	}
    #header h1 {
    	width: 205px;
    	height: 61px;
    	position: relative;
    	font-size: 14px;
    	float: left;
    	}
    #header h1 span {
    	background: url(images/logo.jpg) no-repeat;
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	}
    #topNav {
    	background: #fff;
    	float: right;
    	width: 158px;
    	margin: 0 0 20px 0;
    	list-style: none;
    	}
    #topNav li {
    	padding: 0;
    	margin: 0;
    	}
    #topNav li a {
    	display: block;
    	padding: 2px 0 4px 2px;
    	margin: 0;
    	border-bottom: 1px solid #a9a9a9;
    	text-transform: uppercase;
    	text-decoration: none;
    	color: #666;
    	font-size: .8em;
    	}
    #topNav .topNavLast a {
    	border-bottom: none;
    	}
    #topNav a:hover {
    	text-decoration: underline;
    	}
    #horNav {
    	min-height: 1%;
    	}
    #horNav ul {
    	background: #4caaa1;
    	text-align: center;
    	padding: 10px 0;
    	list-style: none;
    	clear: both;
    	}
    #horNav li {
    	display: inline;
    	}
    #horNav a {
    	padding: 10px 20px;
    	color: #fff;
    	text-decoration: none;
    	border-right: 1px solid #fff;
    	text-transform: uppercase;
    	font-size: 12px;
    	margin: 0;
    	}
    #horNav .horNavFirst a {
    	border-left: 1px solid #fff;
    	}
    #horNav a:hover {
    	background: #62c4bb;
    	}
    head+/* */body .fc:after{ /* min-height browser but not IE 7 */
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}

    I can't see any reason why IE would put such a padding in the topNav. Any ideas for a fix for these?
    Attached Images Attached Images

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    IE 6 ? debug it on haslayout
    * html #topNav li a,#horNav,* html #wrapper,* html #header{height:1&#37;;}

  11. #11
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That fixed it! I must admit... you're a life saver. You've used quite a few CSS styles that I've never seen before. Now I just need to get a better grasp of them myself so I can use them in the future if needed.

  12. #12
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    3 basic ways of nav list link sets, horizontal floating, vertical, horizontal centering
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	
    	<!--[if IE]>
    	<style type="text/css">
    	* html .fc,* html li a,* html .q{height:1&#37;;} /* IE 5 5.5 6 haslayout */
    	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
    	* html .r{float:left;}
    	</style>
    	<![endif]-->
    	
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	body{
    	background:#a2a2a2;/* styling */
    	font-size:75%;/* em control */
    	font-family:verdana,sans-serif;/* styling */
    	text-align:center; /* IE 5 */
    	}
    
    	div{font-size:1em;/* em control */text-align:left;/* bring to te left */}
    	
    	/* behavior */
    	* html .nav a{float:left;}
    	.wra ul,.fo ul{list-style:none;}
    	.fo li{display:inline;}
    	.l,.nav li{float:left;}
    	.ll{float:right;}
    	.nav a,.l a,.ll a{display:block;}
    	.fo{clear:both;text-align:center;background:#ccccff;/* padding footer check */}
    	.wra li a,.fo a,.fo{padding:.5em;}
    	
    	/* parameter */
    	.wx{width:64em;margin:0 auto;}
    	.l,.ll{width:16em;/* IE 5 5.5 need a width */}
    	
    	/* general styling */
    	.wra{background:#cccccc;/* clearing check */}
    	.fo{padding-left:0;padding-right:0;}
    	
    	/* separate nav styling */
    	.nav{background:#ffffcc;}
    	.l a{background:#ccffcc;}
    	.ll a{background:#ccffff;}
    	.nav a:hover,.l a:hover,.ll a:hover{background:#ff6600;}
    	.wra a:hover,.fo a:hover{color:#ffffff;} /* general hover */
    	
    	/* clearing behavior */
    	head+/* */body .fc:after{ /* min-height browser but not IE 7 */
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    	
    	/* model switch
    	html,.h{height:100%;}
    	* html .h .wra{height:100%;}
    	head+body.h .wra{min-height:100%;}
    	.wra{margin-top:-3em;overflow:hidden;}
    	.he{border-top:3em solid #ff0000;}
    	.fo{height:2em;}
    	* html .fo{height:2em;}
    	.ex{padding-bottom:1000em;margin-bottom:-1000em;background:#ccff00;}
    	 */
    	</style>
    
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body class="h">
    <div class="wra w fc">
    
    <div class="he"><p>header<br /><br /><br /><br /><br />end</p></div>
    
    <ul class="nav fc">
    <li><a href="##">home with</a></li>
    <li><a href="##">page 1 with</a></li>
    <li><a href="##">page 2<br /><br /><br /> no width</a></li>
    <li><a href="##">page 3 with width</a></li>
    <li><a href="##">page 4 no</a></li>
    <li><a href="##">page 5 width</a></li>
    </ul>
    
    <div class="l ex">
    <ul>
    <li><a href="##">home with</a></li>
    <li><a href="##">page 1 with</a></li>
    <li><a href="##">page 2<br /><br /><br /> no width</a></li>
    <li><a href="##">page 3 with width</a></li>
    <li><a href="##">page 4 no</a></li>
    <li><a href="##">page 5 width</a></li>
    </ul>
    </div>
    
    <div class="ll ex">
    <ul>
    <li><a href="##">home with</a></li>
    <li><a href="##">page 1 with</a></li>
    <li><a href="##">page 2 no width page 2 no width page 2 no width page 2 no width page 2 no width page 2 no width page 2 no width </a></li>
    <li><a href="##">page 3 with width</a></li>
    <li><a href="##">page 4 no</a></li>
    <li><a href="##">page 5 width</a></li>
    </ul>
    </div>
    
    <div class="r">
    <div class="q fc"><p>content</p></div>
    </div>
    
    </div>
    
    <ul class="fo w fc">
    <li><a href="##">home with</a></li><li><a href="##">page 1 with</a></li><li><a href="##">page 2 no width</a></li><li><a href="##">page 3 with width</a></li><li><a href="##">page 4 no</a></li><li><a href="##">page 5 width</a></li>
    </ul>
    
    
    </body>
    </html>


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
  •