# Need a CSS nav bar tutorial



## Perseus (May 16, 2005)

For some reason, I am unable to find a thorough and clean tutorial on how to create a CSS navigation bar. All I want is my bar to contain an "up" image  and "rollover" image states, and when clicked, will link to another page.

The tutorials have seen include complex ways to manipulate links and a:link, a:hover states etc, and I just dont understand it.  Can anyone help me?


----------



## bigdoug (May 16, 2005)

a:link {color: black; text-decoration: none;}
a:active{color:black; text-decoration: underline; }
a:visited{ color:black; text-decoration: none;} 
a:hover {color:red; text-decoration:underline;}

this will make a generic rollover with an underline on the text.  if you want more help write back


----------



## Perseus (May 17, 2005)

Im asking for a navigation bar consisting of images that are buttons. There will be a normal state (one image) and the rollover state (second image). When clicked, you will be linked to another page. Thats all.


----------



## Pengu (May 17, 2005)

.buttonOne
{
backround-image: url(image.png);
}

.buttonOne:hover
{
background-image: url(imageOver.png);
}


----------



## Pengu (May 17, 2005)

check out this page. I've got a lot of stuff, but the buttons are in a seperate CSS file.

http://pengu.uttx.net

http://pengu.uttx.net/css/buttons.css


----------



## mdnky (May 17, 2005)

```
------
HTML
------

<ul id="navlist">
     <li><a href="link.html" accesskey=" " title="Link Title Here">Link Text</a></li>
<li><a href="link.html" accesskey=" " title="Link Title Here">Link Text</a></li>
<li><a href="link.html" accesskey=" " title="Link Title Here">Link Text</a></li>
<li><a href="link.html" accesskey=" " title="Link Title Here">Link Text</a></li>
</ul>



------
CSS
------

#navlist {
     margin: 0;
     padding: 0;
     list-style: none;
     }

#navlist li a:link, #navlist li a:visited {
     display: block;
     width: 100px;
     height: 30px;
     color: #c03;
     background: transparent url("imagename-normalstate.png") no-repeat top left;
     }

#navlist li a:hover {
     color: #039;
     background: transparent url("imagename-overstate.png") no-repeat top left;
     }
```

That's assuming you aren't putting the text of the link in the image (a big accessibility no-no).  The above code should give you a basic vertical menu.  If you need to adjust spacing between buttons, then add a *#navlist li* rule and use margin or padding as needed.

To make it horizontal, use a *#navlist li* rule with *display:block; float: left;* or *display: inline*.

If you don't want to mess with all that, or at lest the back and forth, post a mock-up of how you want the image to look on the page and a copy of the normal and over states for the buttons and I'll write it up for you.


Good tutorial:  http://www.listamatic.com


----------



## bigdoug (May 17, 2005)

Pengu said:
			
		

> .buttonOne
> {
> backround-image: url(image.png);
> }
> ...



pengu...i've never seen this approach before.  so do you just apply this class to a td and the images will show up in it?

bigdoug


----------



## Pengu (May 17, 2005)

no. if you look at the site i posted (a work in progress) you'll see they're added to each HREF, with an index-transparent PNG inside, with a class set to width: 100%; height: 100%

i forgot to add the dimensions to the classes above.


----------



## Pengu (May 17, 2005)

and. on a side-note. please for the love of god try not to use tables for laying out your pages. That was necessary in 1998 when NS4 was battling IE4/5... Please use CSS. much cleaner.

For those that care, the linked site is what i am developing as a showcase for my skills, interests etc. the UI is using 100% XHTML 1.1 and CSS, with a bit of JavaScript for the scrolling. It's almost 100% supported in IE/Moz/Opera/Safari equally. WinIE let's it down a bit cus of hacky crap for PNGs (to get alpha transparency)...


----------



## Perseus (May 17, 2005)

I am proud to say I do not use tables!  
Each rectangular button is 108px width 20px height. There will be five of them, from left to right: home, events, officers, pictures, by laws. When rolled over, I want the button to change to a red background, and I want the font to become white. (Opposite of the up state), and of course, when clicked, link to the respective page. It will occur at: left: 181px, top: 145px, which is inbetween my title image and main content. 

I have uploaded my two images. Thanks a billion millions.


----------



## Cat (May 17, 2005)

Why do you need images at all? Isn't changing the backround color better? On my homepage (see signature) I made a similar menu: when you hover the mouse above it the background color and font color are inverted. Very easy to do, no need for images.


----------



## Perseus (May 17, 2005)

Cat, that sounds fine to me. But what about the little gray border im using? Can you help me? Thanks.


----------



## Cat (May 17, 2005)

I suppose a "border: thin solid gray;" or something like that would do the trick.
This is just a very basic example:

```
<html>
<head>
<style>

#navcontainer ul
{
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
width: 108px;
height: 20px;
float: left;
text-align: center;
}

#navcontainer ul li a
{
background: white;
border: thin solid gray;
border-right: 0;
color: red;
text-decoration: none;
display: block;
text-align: center;
}

#navcontainer ul li a:hover
{
color: white;
background: red;
}

#navcontainer a:active
{
background: white;
color: red;
}

#navcontainer li#active a
{
background: red;
border: thin solid gray;
color: white;
}

#navcontainer ul li a.last
{border-right: thin solid gray;}

</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
	<li><a href="home.html">Home</a></li>
	<li><a href="events.html">Events</a></li>
	<li><a href="Officers.html">Officers</a></li>
	<li><a href="pictures.html">Pictures</a></li>
	<li><a class="last" href="bylaws.html">By Laws</a></li>
</ul>
</div>
</body>
</html>
```

Copy-paste, save and look at it in Safari. It's up to you to fill in all the positioning (and margins and padding) and pick more suitable colours.

You might want to check out some of these CSS sites:

* http://www.htmlhelp.com/reference/css/properties.html
* http://alistapart.com/articles/taminglists/
* http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp
* http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html


----------



## Perseus (May 17, 2005)

would this work as a horizontal nav bar?


----------



## Perseus (May 17, 2005)

hey, it worked great! thanks cat! now how do i change the font size etc of the text? i tried putting in {font: 12px/1.3 etc..} in the #nav ul { section but it didnt do anything....


----------



## Pengu (May 17, 2005)

font-size: 12px;


----------



## Perseus (May 17, 2005)

um....what? that doesnt tell me anything. where do I put that?


----------



## Pengu (May 17, 2005)

you need to put that in whatever class or ID you want it to apply to. don't forget some browsers (including Safari) have a setting not to display text smaller than a certain size.


----------



## Perseus (May 17, 2005)

By the way, Cat, I highly appreciate the code you gave me etc, but it only displays properly in Firefox, Safari and Opera...and NOT in Netscape, IE or Mozilla. What to do?


----------



## mdnky (May 17, 2005)

Try adding a proper DOCTYPE to that code...IE will use 'quirks mode' unless it knows what it's dealing with.


----------



## Cat (May 18, 2005)

I told you it was just a very basic example. Different browsers render the same page differently. You'll have to test extensively to see what works, and consult some webpages for hacks to make your code display correctly.

About doctypes and other stuff: 
* http://developer.apple.com/internet/webcontent/bestwebdev.html


----------



## texanpenguin (May 18, 2005)

It's worth noting to the hover subclass that IE (Win and Mac) doesn't always like it. It's fine with some though (anchor is the obvious one).

I strongly suggest you all get CSSEdit from MacRabbit - the single most indispensable CSS editor you'll ever use. Ever.


----------



## Pengu (May 18, 2005)

hmm. tried CSSEdit. it is good, but i'll stick to skEdit for now : )


----------



## Cat (May 18, 2005)

> It's worth noting to the hover subclass that IE (Win and Mac) doesn't always like it.


Yeah, but whose fault is that? 

EDIT: The emoticon doesn't fully convey the sense of frustration that I experience when testing a site in IE ...


----------



## Perseus (May 19, 2005)

Yeah, I feel your frustration too. Its funny how my site looks different during testing on IE mac vs. IE windows. I was happy to learn recently of the share than Firefox is taking away from IE. (I also take pride in converting a few of my buddies to Firefox muahahahahah)


----------

