need help with buttons

**heatherl** · Sep 29, 2006 04:17

hey,

i'm a bit crap at this and need some help with creating horizontal navigation using lists.

This is the tutorial that i was basing my code on but i don't seem to be able to amend it for my needs without totally mucking it up

Basically what i would like to have is a menu similar to this but the buttons all the same px width/height and for them to be split over 2 lines, so that there are 4 top and bottom (8 all together).

can anyone point me in the right direction perhaps to a tutorial that would better suit what i want. Sorry, i am a bit crap at this!

**Paul O'B** · Sep 29, 2006 05:57

Hi,

If you want the buttons the same width then you would need to float them so that you can add the specific dimensions.

To keep things simpler it would be easier to use separate ul's for each line although you could do it with one ul but its not so easy to manage.

Using the code you linked to it could be changed like this.

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
 <style type="text/css">
 #navlist ul
 {
 margin: 0;
 padding: 0;
 white-space: nowrap;
 list-style-type: none;
 clear:both;
 }
 #navlist li
 {
 float:left;
 width:6em;
 text-align:center;
 margin:5px 5px 5px 0
 }
 #navlist a { 
 	padding:0 10px;
 	display:block;
 	line-height:1.4em;
 	height:1.4em;
 }
 
 #navlist a
 {
 color: #fff;
 background-color: #036;
 text-decoration: none;
 }
 
 #navlist a:hover
 {
 color: #fff;
 background-color: #369;
 text-decoration: none;
 }
 </style>
 </head>
 <body>
 <div id="navlist">
 	<ul>
 		<li id="active"><a href="#" id="current">Item one</a></li>
 		<li><a href="#">Item two</a></li>
 		<li><a href="#">Item three</a></li>
 		<li><a href="#">Item four</a></li>
 	</ul>
 	<ul>
 		<li><a href="#">Item five</a></li>
 		<li><a href="#">Item six</a></li>
 		<li><a href="#">Item seven</a></li>
 		<li><a href="#">Item eight</a></li>
 	</ul>
 </div>
 </body>
 </html>