SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot shock's Avatar
    Join Date
    Jan 2001
    Location
    FL, USA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to make horizontal list of navigation buttons

    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?
    ~%$-shock-$%~

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Zealot shock's Avatar
    Join Date
    Jan 2001
    Location
    FL, USA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that is really hard to understand and doesn't help me
    ~%$-shock-$%~

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    SitePoint Zealot shock's Avatar
    Join Date
    Jan 2001
    Location
    FL, USA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ~%$-shock-$%~

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by all4nerds; Jun 16, 2005 at 00:08.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •