Creating Horizontal CSS Menus

Curiosityx · 1 Nov 2006 at 01:11

Hello there i have the following Css snipet and html code, at present it creates a vertical menu but im after a horizontal menu, if anyone could lend a hand it would be appreciated

Code:

<div id="buttonscontainer1"> 
			<div class="buttons4">
			<a href="#">Home Page</a> 
			<a href="#">About Us</a> 
			<a href="#">Contact Us</a> 
		  </div>
        </div>

Code:

.buttonscontainer {width: 150px;}

.buttons a {display: block;
width: 100%;
font: 10px Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
padding-left: 3px;
background-color: #234A76;
color: #FFFFFF;
border-left: 12px solid #B8C8D8;
font-weight: bold;
text-decoration: none;
text-align: left;
margin-top: 1px;}

.buttons a:hover {border-left: 12px solid #E8ECF0;
text-decoration: none;
color: #FFFFFF;}

As i understand it the best way is too use un-ordered lists?

paulsheff · 1 Nov 2006 at 01:38

Should do the trick

joeyjojo · 1 Nov 2006 at 07:40

Code:

			<div class="buttons">
			<ul>
			<li><a href="#">Home Page</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
			</ul>
		    </div>

The container is too thin, so they are forced down.

Curiosityx · 1 Nov 2006 at 14:21

joeyjojo said:
Code:

<div class="buttons"> <ul> <li><a href="#">Home Page</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div>

The container is too thin, so they are forced down.

Please could you explain?

MagSafe · 1 Nov 2006 at 14:25

Hi there,

Having a bit of trouble with a horizontal list as well. I think it might be because of what joey said - that the container is to thin but whenever i try do put in display: block; or/and padding: 5px; the list items bump down to the next line.

I've included the code, just can't see what i'm doing wrong as the other lists i've created all work fine :confused:

Code:

<div id="navheader">
     <ul>
               <li><a href="#" title="">Section 1</a></li>
               <li><a href="#" title="">Section 2</a></li>
               <li><a href="#" title="">Section 3</a></li>
     </ul>
</div><!-- end of navheader -->

Code:

#navheader
{
	margin: 0;
	padding: 0;
	height: 27px;
	font: bold 8pt verdana, arial, helvetica, sans-serif;
	background: #dddddd;
	color: #000000;
}

#navheader ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#navheader li
{
	margin: 0;
	padding: 0;
	display: inline;
}

#navheader li a:link
{
	margin: 0;
	padding: 3px;
	display: block;
	font: normal 8pt verdana, arial, helvetica, sans-serif;
	background: #000000;
	color: #ffffff;
	text-decoration: none;
	border-right: 1px solid #ffffff;
}

#navheader li a:visited
{
	margin: 0;
	padding: 3px;
	display: block;
	font: normal 8pt verdana, arial, helvetica, sans-serif;
	background: #000000;
	color: #ffffff;
	text-decoration: none;
}

#navheader li a:hover
{
	margin: 0;
	padding: 3px;
	display: block;
	font: normal 8pt verdana, arial, helvetica, sans-serif;
	background: #000000;
	color: #ffffff;
	text-decoration: none;
}

#navheader li a:active
{
	margin: 0;
	padding: 3px;
	display: block;
	font: normal 8pt verdana, arial, helvetica, sans-serif;
	background: #000000;
	color: #ffffff;
	text-decoration: none;
}

Mr_L · 1 Nov 2006 at 14:31

Curiosityx said:
Please could you explain?

.buttonscontainer is set to 150px, which is too small for the list to display horizontally. If you change the width property to auto or a larger size then the list will display horizontally.

Curiosityx · 1 Nov 2006 at 16:09

Well after a some experimentation

Code:

}
	.menu {
      width: 100%;
      padding: 0px 0.5em;
      background: #eee none;
    }
   .menu ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
   .menu li {
      margin: 0;
      padding: 0;
      float: left;
    }
    .menu {
      padding: 0;
      background: #fff none;
    }
    .menu li {
      width: 7em;
      margin-right: 1em;
      background: #eee none;
      text-align: center;
    }
    .menu a {
      	width: 120px;
		font: 9px Verdana, Arial, Helvetica, sans-serif;
		padding: 2px;
		padding-left: 5px;
		background-color: #234A76;
		color: #FFFFFF;
		border-left: 16px solid #B8C8D8;
		font-weight: bold;
		text-decoration: none;
		text-align: left;
		margin-top: 1px;}
    }
    .menu a:hover {{border-left: 16px solid #FF0000;
		text-decoration: none;
		color: #FFFFFF;}
    }

Code:

<div class="menu"> 
        <ul>
          <li><a href="Index.htm">Home</a></li>
          <li><a href="Cp_profile.htm">Company Profile</a></li>
          <li><a href="Products.htm">Products</a></li>
          <li><a href="Contact_Us.htm">Contact Us</a></li>
        </ul>
        <br clear="left">
      </div>

Works now