Horizontal List problem

[ollysharp]

I'm new here so hi everyone.

I'm having some trouble with styling a navigation bar. For reference the page I'm working on can be found here.

I am trying to get the links along the top to list horizontally with display: inline; however this isn't working as you can see. A solution I have seen to this is to use float: left; instead but this makes it end up looking like this: http://cl.ly/image/2r2H1D1U0v3Q.

I have managed to fix this second problem by adding overflow: hidden; to the ul, however this then leads me to lose the small triangles either side of the nav bar which make it look as though it folds over.

Thanks in advance!

[Sammy12]

Originally Posted by ollysharp

I am trying to get the links along the top to list horizontally with display: inline; however this isn't working as you can see.

You could also use display: inline-block; which works the same was as float: left;, however you don't have to clear your floats (which is what overflow: hidden; was for):

#nav li {
    display: inline-block;
    *display: inline; /* for ie6 & 7 */
    *zoom: 1; /* for ie6 & 7 */
}

Inline-Block Article To some this article up: the downside is that you have to string your elements together or you will get a 4px gap between them, kind of like words.

<li>No Gaps!</li><li>No Gaps!></li>
<li>
    A natural 4px gap :(
</li>
<li>
    A natural 4px gap :(
</li>

--------------------------------- FOR YOUR SITUATION, I RECOMMEND

Originally Posted by ollysharp

A solution I have seen to this is to use float: left; instead but this makes it end up looking like this: http://cl.ly/image/2r2H1D1U0v3Q.

You could set a height to the #nav instead if you decided to use floats (instead of inline-block):

#nav {
    height: 47px; /* this is the correct height value you should use */
}

Looking at your code, I believe you were trying to do something similar to this:

#nav {
	margin-left: -40px;
	margin-right: -40px;
	padding: 0 20px;
	background: #0055FF;
	list-style: none;
	/*overflow: hidden;*/
	position: relative;
	height: 100; /* this is not valid, it needs "px", "em", or "%" */
}

---------------------------------

I have managed to fix this second problem by adding overflow: hidden; to the ul, however this then leads me to lose the small triangles either side of the nav bar which make it look as though it folds over.

Yeah, the problem with the overflow: hidden; float clearing method is that is indeed does hide any overflow from the normal dimensions (the folds are indeed not part of the nav and were position: absolute; outside of the parent).

---------------------------------

I hope you enjoyed all your options,
Sammy12