3 replies [Last post]
cng
Offline
newbie
Last seen: 14 years 25 weeks ago
Timezone: GMT-5
Joined: 2004-10-28
Posts: 6
Points: 0

I have done several standard css list-style navigation bars before and have been able to get them to work pretty well. However, now I am trying to create a horizontal nav where there is one link to the left and five to the right, something like:

Contact to the far left and

Products Info Support Login to the far right

I've tried making a nav container set to the nav bar width and height, and then 2 divs inside it, a left floated one for the "Contact" link and a right floated one for other links. It seems like that should work, but I run into various problems, such as the right links are dropped down a line, or they appear vertically, or something.

Any help or links to a tutorial would be awesome. Thanks!

obsidian
Offline
Enthusiast
South Carolina
Last seen: 12 years 27 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

Horizontal nav bar with links aligned left and right

i have done something similar in practice (i've never actually published a site with that sort of menu layout. your idea with the floated divs works best in my opinion. in my code below, keep in mind that it won't validate unless you use divs instead of spans for the floats within the #navcontainer. this gives the effect you're after in FF and IE 6:

HTML:

<div id="navcontainer">
<span class="left">
	<a href="#">Contact</a>
</span>
<span class="right">
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Links</a></li>
	</ul>
</span>
</div>

CSS:

body {
	margin: 0;
	padding: 0;
	background-color: #EFEFEF;
	font-family: 'Trebuchet MS', Verdana, Georgia, Arial, sans-serif;
	font-size: 1em;
}

#navcontainer {
	font-size: 0.8em;
}

span.left {
	float: left;
	display: block;
	width: 25%;
	padding-left: 10px;
}

span.right {
	float: right;
	display: block;
	width: 70%;
	text-align: right;
}

#nav {
	margin: 0;
	padding: 0;
}

#nav li {
	list-style-type: none;
	margin: 0;
	padding: 0 10px;
	display: inline;
}

hope this helps. i haven't styled the links or anything yet, either, so you've got lots you can still play with. this simply gets you to have the contact link on the left and the others floated to the right.

You can't win, you can't lose, you can't break even. You can't even get out of the game!

the3jsgrve
Offline
Regular
Last seen: 14 years 18 weeks ago
Timezone: GMT-6
Joined: 2004-12-15
Posts: 29
Points: 0

Horizontal nav bar with links aligned left and right

Great! Thanks. That helps with the question I asked in my post here. I'll give that a shot when I get to the office in the morning ! I also found this article that presents a method of doing something similar to what I'm trying. The actual effect I'm going for is seen on the Macromedia website: Main navigation horizontal with subnavigation appearing horizontally just beneath it as you mouseover. However, I have absolutely no desire to use Flash for my navigation.

Thanks again for your help. I'm still open to any other suggestions!

Josh

GeoGeo
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2004-12-04
Posts: 13
Points: 0

Horizontal navigation

Hi

I think I have done what you are looking to achieve. Take a look at our site and see if it is what you are looking to achieve.

www.geogeo.co.uk

Basically, we just used a containing DIV (for our site an absolute) and then made a .link_box (which is floated) to put inside the container. This way you can float as many as you like and they line up just nice within the container. We set the dimensions to match exactly the graphic we use as a background. Set your a properties to do the mouse over effect and bob's your uncle.

I hope this helps. If you need more help, just do another post.

Andy
GeoGeo.co.uk