Css Menu, Change From Vertical To Horizontal

[mrkidd85]

Hi, I am making a site using a free CSS template. However, I feel, on this specific template I would rather have my links horizontal and not vertical. There must be something in this code which is telling the menu to be vertical, but I can't work out what it is. Can someone please help me out?

#menu {	float: left;	position: absolute;	width: 186px;	left: 10px;	font-size: 18px;	font-weight: normal;	font-family: Arial, Verdana, Helvetica, sans-serif;	overflow: hidden;	text-align: left;	top: 82px;}#menu a {	display: inline;	float: left;	position: relative;	background: #bc6d34;	width: 170px;	/width: 180px;	height: 33px;	overflow: hidden;	line-height: 33px;	padding-left: 10px;	margin-bottom: 5px;	text-align: left;	color: #fff;}#menu a:hover {	display: block;	float: left;	position: relative;	background: #d09971;	width: 170px;	/width: 180px;	height: 33px;	overflow: hidden;	line-height: 33px;	padding-left: 10px;	margin-bottom: 5px;	text-align: left;	color: #000;	text-decoration: none;}

Thanks alot, Dan

[jeffman]

It's hard to be sure without seeing more code, but:It looks like #menu is a container that holds all your links. It is 186px wide. It cannot hold anything wider than that. So when an element exceeds that width, it must start on a new line.I do not know why your <a> elements are defined to be inline AND have a width. Inline elements take their width from the size of their content -- more letters, bigger; fewer letters, smaller. The width definition should have no effect. On the other hand, your a:hover is redefined as a block-level element. Width definitions will apply. Changing the element from inline to block on a mouse-hover could lead to strange behavior.If you want the <a> elements always to have a specific width, they all need to be block-level, and they need a float property, which you already have.If you want them to line up horizontally, their container needs to be wider.

[roundcorners]

nest your anchor tags within list item tags;<ul id="menu"><li><a href="">link 1</a></li><li><a href="">link 2</a></li><li><a href="">link 3</a></li><li><a href="">link 4</a></li></ul>#menu {float:left;width?;}#menu li {float:left;}#menu li a {display:block;width:?;height?;}/*make sure the sum of the list items and anchors width, margin and padding fit horizonatlly in the width of their container, in this case #menu*/

[Ingolme]

nest your anchor tags within list item tags;<ul id="menu"><li><a href="">link 1</a></li><li><a href="">link 2</a></li><li><a href="">link 3</a></li><li><a href="">link 4</a></li></ul>#menu {float:left;width?;}#menu li {float:left;}#menu li a {display:block;width:?;height?;}/*make sure the sum of the list items and anchors width, margin and padding fit horizonatlly in the width of their container, in this case #menu*/

There is no need for float: left on this line:

#menu {float:left;width?;}

Width and height don't need to be specified for any of the elements. I usually give my <a> elements padding instead, like this:

#menu li a { display: block; padding: 3px 10px; }

[Steven]

Check out http://css.maxdesign.com.au/listamatic/There you can find all the various ways to present simple lists, vertically and horizontally.The one you want to check out first--the simple horizontal list--is this: http://css.maxdesign.com.au/listamatic/horizontal01.htm