SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    Sydney
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Nav: display:inline or float:left?

    Using the list element, we can generate a horizontal menu effect by using either display:inline or float:left.

    Which one do you usually use? Which way is more convenient? Which one is more correct? Can you tell me the pros and cons of each one please?

    Thanks.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I usually float them. I somehow feel this is more appropriate because list elements are block elements by default and floats are still block-level elements. I somehow think changing an element that is block-level by default to an inline element is bad, the logic (ahem) behind this being that block level elements are superior to inline level elements. This is quite sad, I know.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    Sydney
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Curiously -correct me if I'm wrong-, when you apply "display:inline" to the <li> element, the list bullet points disappear automatically. It doesn't if you use "float:left", you you have to write an extra statement in your CSS, "list-style:none".

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I set the height and line height on the list, then set the list items to display: inline; and white-space: nowrap; - and then finish it off by putting a height on the anchors.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends on what you want to do with the <a> links. If you want to give the <a>s a particular height and width, then you will have to set them to block display, which then means floating the <li>s is required as inline won't work. Inline display on the <li>s is only suitable when the <a>s are also inline (which they are by default).

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I think it's easier to float the list elements, There's less 'moving parts' with a block level element. Padding is applied differently to inline elements also - so I prefer to set them to block-level elements so I can set padding/width/height etc.. and have it behave as I am wanting.

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

    Make use of what the CSS can do for you

    Quote Originally Posted by Centauri View Post
    It depends on what you want to do with the <a> links. If you want to give the <a>s a particular height and width, then you will have to set them to block display, which then means floating the <li>s is required as inline won't work. Inline display on the <li>s is only suitable when the <a>s are also inline (which they are by default).
    Thanks for explaining PS you can set padding top and bottom on inlines with a little trick

    display:inline without width's centered
    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;}
    	
    	.x{
    	padding:.95em 0;
    	text-align:center;
    	list-style:none;
    	}
    	html .x .y{border-left:1px solid #0000ff;}
    	
    	.x li{display:inline;}
    	
    	.x a{
    	padding:.9em 3em;
    	background:#ccccff;
    	border:1px solid #0000ff;
    	border-left:none;
    	}
    	.x a:hover{background:#ffccff;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <ul class="x">
    <li><a href="##" class="y">12345</a></li><li><a href="##">1234567</a></li><li><a href="##">12345678</a></li><li><a href="##">123</a></li>
    </ul>
    
    </body>
    </html>
    Float on li's with a fixed width (also works without width set) width's easy adjusted / calculated to container width's, I consider this a slightly stronger way , the display inline is cleaner and a simpler technique
    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;}
    	
    	.x{
    	list-style:none;
    	/* margin:0 auto;
    	width:40em; center with fixed width */
    	}
    	
    	html .x .y{border-left:1px solid #0000ff;}
    	
    	.x li{float:left;width:10em;} /* with a fixed width ul you can use &#37;*/
    	
    	.x a{
    	display:block;
    	padding:.9em 0;
    	background:#ccccff;
    	border:1px solid #0000ff;
    	border-left:none;
    	text-align:center;
    	}
    	* html .x a{height:1%;}
    	
    	.x a:hover{background:#ffccff;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <ul class="x">
    <li><a href="##" class="y">12345</a></li>
    <li><a href="##">1234567</a></li>
    <li><a href="##">12345678</a></li>
    <li><a href="##">123</a></li>
    </ul>
    
    </body>
    </html>
    You can also use both models on the same page , with a more stricter separation of the CSS that is actual needed, or not needed at all ( the UL LI in the left right column need even less code then the horizontal inline, they are slightly stronger because they can stay block level)
    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%;} /* 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;
    	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 li{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 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 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</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>
    Last edited by all4nerds; Aug 23, 2007 at 01:31.


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
  •