<li> overlapping?

[dannynosleeves]

Im working on making a nav bar with an <ul> but all my <li> seem to be overlapping.

test page

*there is a purple box and a white box. The white box is the forst <li>.

Any ideas?

Thanks!

[Toon]

Could it be

#nav li {
	list-style:none;
	display:inline;
	float: left;
	}
	
#nav .about a{
	background-color:#FFF;
	height:80px;
	width:100px;
	display:block;
	margin-left:10px;
	z-index:9;
	}

Display:inline on .about command as first

[dannynosleeves]

Thanks for the help. What exactly should that do? I got what I wanted by adjusting the left margins. Nots ure if this is a good way to do it though.

[tommylogic]

well.. the way you did it is kind of a hack..
not a big fan of it. I like toon's aproach a bit more. Approach the whole straight line as a single item.. and stagger it left to right.
Use some javascript if you have to..

[dannynosleeves]

Originally Posted by tommylogic

well.. the way you did it is kind of a hack..
not a big fan of it. I like toon's aproach a bit more. Approach the whole straight line as a single item.. and stagger it left to right.
Use some javascript if you have to..

Im learning CSS as I go, so Im sorry if I dont follow you.

I was trying to approach the nav div as a straight line. But all the boxes <li> ended up in the same place on the left side of the div.

I dont know any java. How would you suggest staggering them left to right?

Hope the anwser isnt too much trouble.

Thanks for the pointers.

[Toon]

This might help

http://www.quirksmode.org/css/display.html#block

[tommylogic]

yeah.. what he said..

and I always do my nav with a separate nav<div>. then let it line itself up and positiont he entire nav where I want it

[Mack]

no javascript!

You should be able to achieve what your looking for from XHMTL and CSS alone.

[tommylogic]

Originally Posted by Mack

no javascript! .....

or Flash...

Really though, now that I see what it is you are trying to do.. straight forward CSS is all you need.

[dannynosleeves]

Originally Posted by tommylogic

well.. the way you did it is kind of a hack..
not a big fan of it. I like toon's aproach a bit more. Approach the whole straight line as a single item.. and stagger it left to right.
Use some javascript if you have to..

Originally Posted by Toon

This might help

http://www.quirksmode.org/css/display.html#block

That helps alot. Im going to work on it tomorrow. I'll keep you guys posted. Thanks for all the help. Its awesome people still do that.