CSS navigationbar

**NightStalker** · 04-19-2005, 10:47 AM

I was bored and tried to make cool navibar so i made this..

.:PREVIEW:.

First off lets create a html document and put divs inside table and so on..(look at the code)

index.html

Code:

&#60;&#33;DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.0 Transitional//EN&#34;&#62;
&#60;html&#62;
&#60;head&#62;
&#60;link href=&#34;file.css&#34; TYPE=&#34;text/css&#34; REL=&#34;stylesheet&#34;&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;center&#62;
&#60;table&#62;
&#60;tr&#62;
&#60;td class=&#34;menu&#34;&#62;
&#60;div class=&#34;linkbar&#34;&#62;
&#60;a href=&#34;link&#34;&#62;Index&#60;/a&#62; 
&#60;a href=&#34;link&#34;&#62;News&#60;/a&#62; 
&#60;a href=&#34;link&#34;&#62;Gallery&#60;/a&#62; 
&#60;a href=&#34;link&#34;&#62;Tutorials&#60;/a&#62; 
&#60;a href=&#34;link&#34;&#62;Forums&#60;/a&#62; 
&#60;a href=&#34;link&#34;&#62;Downloads&#60;/a&#62;
&#60;/div&#62;
&#60;/td&#62;
&#60;/table&#62;
&#60;/center&#62;
&#60;/body&#62;
&#60;/html&#62;

Then we create .css

file.css

Code:

.menu{
	padding&#58; 0px;
	width&#58; 100%;
	background-color&#58; #576;
	color&#58; #fff;
	font-family&#58; verdana;
	font-size&#58; 10px;
	border&#58; 1px solid #acb;
}
td.menu div.linkbar{
	text-align&#58; center;
}
td.menu div.linkbar a {
	font-size&#58; 10px;
	color&#58; #fff;
	text-decoration&#58; none;
}
td.menu div.linkbar a&#58;hover {
	color&#58; #000;
	background-color&#58; acb;
}

.:PREVIEW:.

***unit_number_43*** · 04-20-2005, 06:37 AM

I made something similar.

http://adamsbasement.home.att.net/com/
ignore the site being messed up. They decided they didn't want it after I basically finished the design so i left it in shambles.

It's a really easy effect that seems to be pretty crossbrowser compatible.