navigation spacing 1

harrymossman · Feb 18, 2004

I want to make a navigation area that looks sort of like this:

Code:

____________________________________________
Home breadcrumbs         Site Map  About us
____________________________________________

Easy enough with tables. But I can't figure out how to do it with CSS. The problem is that the bread crumbs can vary quite a bit in length.

Harry

stormbind · Feb 18, 2004

overflow:hidden; will prevent long strings from ruining your layout. MSIE has another option that chops off long strings with ... but I forgot what that is called.

----------
I'm willing to trade custom scripts for... [see profile]

harrymossman · Feb 18, 2004

Thanks, but it's important info. I don't want it to go into hiding!

Vragabond · Feb 19, 2004

This will basically do what you wish:

Code:

<html>
 <head>
  <style type=&quot;text/css&quot;>
   #navigation {
 	width: 800px;
	height: 40px;
	margin: 0;
	padding 0;
	list-style: none;
	border-width: 1px 0px 1px 0px;
	border-color: black;
	border-style: solid;
   }
  
   #navigation li {
	width: 100px;
   }

   #navigation li.left {
	float: left;
   }

   #navigation li.right {
	float: right;
   }

   #navigation li.breadcrumbs {
	width: 500px;
   }

  </style>
 </head>
<body>

<ul id=&quot;navigation&quot;>
  <li class=&quot;left&quot;>Home</li>
  <li class=&quot;left breadcrumbs&quot;>Lotsa Lotsa Lotsa Lotsa Lotsa Lotsa Lotsa Lotsa Lotsa Lotsa Lotsa Lotsa Lotsa Breadcrumbs</li>
  <li class=&quot;right&quot;>Site Map</li>
  <li class=&quot;right&quot;>About Us</li>
</div>
</body>
</html>

Hope it helps.

Vragabond · Feb 19, 2004

Oops, should be closing </ul> at the end not closing </div>. Tiny error.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

navigation spacing 1

harrymossman

Technical User

stormbind

Technical User

harrymossman

Technical User

Vragabond

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor