how to make horizontal list of navigation buttons

**shock** · Jun 15, 2005 11:49

hi, i am making a site in css and i am trying to make a horizontal bar of about 7 or 8 navigation buttons, and this whole bar (div i guess) needs to be centered at the top of the page, but there needs to be about a 100px margin on the top.

i have the regular and hover images for the 7 or 8 buttons (they are all different), so i guess the way to do it is to make them background-images

how can i do this in css?

**all4nerds** · Jun 15, 2005 12:02

Hello

just tested

http://www.rekkab.com/s/menu/shm.htm

**shock** · Jun 15, 2005 12:16

that is really hard to understand and doesn't help me

**all4nerds** · Jun 15, 2005 12:26

Hello

Sorry, here is the basic horizontal hover menu not build in a container jet

do you have any code ?

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" xml:lang="en" lang="en"><!-- -->
<head>
<title>12345 12345 12345 123435 12345</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
	body{background:#ebebeb;font-size:1em;}
	/*div,ul,li,b,span,p,br{padding:0;margin:0;} 
	div,ul,li,b,span,p{width:0px;height:0px;}*/ 
	
	/* */.nav a{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:70%;
	font-weight:100;
	background:#eef0f0;
	color:#728080;
	text-align:center;
	/*line-height:1em; */
	padding: 0 .2em 0.2em 0;
	border-width:0.1em 0.1em 0.1em 0.1em;
	/*border-width:1px 1px 1px 1px;*/
	border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
	border-style: solid;
	
	text-decoration:none;
	display:block;/*  */
	
	}
	
	.y a{margin:.05em 0 0 0;}
	.nav .yc{margin-top:0;}
	.x a{margin:0 .05em 0 0;}
	
	.x a{float:left;}/* */
	.x a,.y a{width:6em;}
	
	.w{width:0px;height:0px;}/*  */
	.wh{width:45em;}/*  */
	
	.nav a:hover{background:#a4b4b4;color:#ffffff;border-color:#000000 #fbfbfb #fbfbfb #000000;}
	.nav .a{background:#a4b4b4;color:#ffffff;border-color:#c5c5c5 #b3b3b3 #b3b3b3 #c5c5c5;}/**/
	.nav .a:hover{background:#ffa500;border-color:#ffffff #595959 #595959 #ffffff;}/**/
	.y a:hover{border-color:#000000 #b3b3b3 #b3b3b3 #000000;}
	
	.fl{float:left;}
	.fr{float:right;}
	.fcl{clear:both;} 
	
	/* .navul{float:left;}
	.navul ul,.navul li,.navul{width:120px;} */
	
	/* .na{border:1px solid #ff3300;} */
	
	.y a{text-align:right;}
</style>
</head>
<body>
<div class="nav na x wh">
<a href="##" class="a">Home</a><a href="##">Spanish</a><a href="##">Ministry</a><a href="##">Prayer</a><a href="##">Perform</a><a href="##">Store</a><a href="##">Mission</a><a href="##">Contact</a>
<div class="fcl"></div>
</div>
<p><br /></p>
<div class="nav na y w">
<a href="##" class="a yc">Home</a>
<a href="##">Spanish</a>
<a href="##">Ministry</a>
<a href="##">Prayer</a>
<a href="##">Perform</a>
<a href="##">Store</a>
<a href="##">Mission</a>
<a href="##">Contact</a>
<div class="fcl"></div>
</div>
</body>
</html>

**shock** · Jun 15, 2005 12:48

isn't there a simpler way to just make one div with a set of li link blocks and each one has a different background image?

you are confusing me especially with all those x,y,wh,a,fidsd,gr,reer,hh sdger, all those letters.....they are super confusing

and i need the main div to be centered on the page and have a margin on top of it

**all4nerds** · Jun 15, 2005 13:00

Hello

no hovers, etc just colors OK

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" xml:lang="en" lang="en"><!-- -->
<head>
<title>12345 12345 12345 123435 12345</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
	html,body{/*html for FF Moz NS7 OP */
	text-align:center; /*IE 5 IE 5.5*/
	margin:0px;/* no margins body */
	padding:0px;/* no padding body */
	height:100%;
	}
	body{background:#ccccff;}
	
	.nav a{
	float:left;
	width:6em;
	font-size:1em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	text-align:center;
	text-decoration:none;
	display:block;/*  */
	}
	.nav{width:48em;margin:100px auto;}
	
	.c{background:#ffff00;}
	.cb{background:#ccff33;}
	.cc{background:#ff6699;}
	.cd{background:#cc66cc;}
	.ce{background:#9966ff;}
	.cf{background:#ccffff;}
	.cg{background:#66ffcc;}
	.ch{background:#99ff99}
	
	.nav a:hover{background:#ffffff;}
</style>
</head>
<body>
<div class="nav">
<a href="##" class="c">Home</a><a href="##" class="cb">Spanish</a><a href="##" class="cc">Ministry</a><a href="##" class="cd">Prayer</a><a href="##" class="ce">Perform</a><a href="##" class="cf">Store</a><a href="##" class="cg">Mission</a><a href="##" class="ch">Contact</a>
</div>
<p><br /></p>
</body>
</html>

User Tag List

Thread: how to make horizontal list of navigation buttons

Thread Tools

Display

how to make horizontal list of navigation buttons

Bookmarks

Bookmarks

Posting Permissions