Quick Noobish Question

[fluffums]

Hi everyone, I'm new here.Anyways, I've been doing HTML for a while, but I'm still learning CSS and a few other things. I found this really cool setup for the CSS that lets me change the background color thats behind the link to a diffrent color when the mouse hovers over. But since I have to change the a: hover setup it makes all the links on the page have the bg color change. I only want it for the navigation. I think I can set this up with classes can't I? If I can how do I do it? And if not how can I make 2 seperate diffrent types of links. Here is a link to the page...its still just skin and bones though hehe. Go ahead and look at the source and see if you can figure anything out.http://www.freespaces.com/finalfantasy/index1.htmlThanks.

[Chocolate570]

#nav a:hover {background-color:#5f5f5f; color: #000000;font-family: Verdana;}Then put a <div class="nav"> before navigation, and after it. That should work. I'm a newbie to css, so maybe someone more advanced can double-check that.

[fluffums]

Ahh. Thank you so much. Hope it works.

[fluffums]

Ok. It didn't work. I'll save you some work. Here is the code for my CSS:<style type="text/css">ul{float:left;width:0%;padding:0;margin:0;list-style-type:none;}a{float:left;width:14em;font-size: 13;font-family: Verdana;background-color:#222222;padding:0.2em 0.7em;}a:hover {background-color:#5f5f5f; color: #000000;font-family: Verdana;}#nav a:hover {background-color:#5f5f5f; color: #000000;font-family: Verdana;}li {display:inline}}body, p, td {color: #FFFFFF;font-family: Verdana;font-size: 10px;}a:link {color: #FFFFFF;font-family: Verdana;font-size: 12px;}a:visited{color: #FFFFFF;font-family: Verdana;font-size: 10px;}a:active {color: #FFFFFF;font-family: Verdana;font-style: nonetext-decoration: none;}a:link {color: #FFFFFF;font-family: Verdana;font-size: 10px;}</style>Now here is the top part of my navigation area:<IMG WIDTH="149" SRC="http://img.photobucket.com/albums/v474/MasterFluff0/NavHead11.jpg"><div class="nav"><A HREF="">Home/News</A><BR>Is that right? I'm supposed to put a </div> at the end of the navigation too, right? And do I make two hover defines? If you make up a quick HTML doc and try all that out you can see whats the problem.Thanks again.

[Chocolate570]

#nav a:hover {background-color:#5f5f5f;color: #000000;font-family: Verdana;}Did that wrong. Put this:

a:hover#nav{background-close:#5f5f5fcolor: #000000;font-family: Verdana;}

Tell me if that works?

[Chocolate570]

You know what? Just shoot me. Check this out:a.one:hover {background-close:#5f5f5fcolor: #000000;font-family: Verdana;}Also-divs aren't needed.Instructions: put the ahref tag like this:<a href="blah" class="one">Blah</a>

[F-Man]

*Smacks fore-head*Just do what Chocolate570 said first, but replace class in your markup to id. It is also the best method, comparatively to giving a class to every anchor.EDIT: seems like your site uses a table layout, so put the id inside the td which holds the navigation bar.

[Chocolate570]

*Smacks for-head with a steel construction girder*Last time i'm going to try to help out in the css forum. Good luck fluffums, and thanks f-man.

[fluffums]

Well, thanks for the help. But I'm still not getting anything. I've set up the CSS with two hover defines, making on the them the class defined that you made. I tried everything you said to do but it stays the same. The background bar stays over the link. Well...

[F-Man]

As a said, just do this:

#nav a:hover {background-color:#5f5f5f;color: #000000;font-family: Verdana;}

And in your HTML:

<td other_attributes id="nav">   Links</td>

[fluffums]

First of all thanks! It worked. But I have some bad news too. I did what you said and I got rid of the background color, but thats it.Take a look and see what happens:http://www.freespaces.com/finalfantasy/index1.htmlSee that space it makes between the links on the content area? Well, I need to fix that. I know what part of my CSS script is doing it. Its this:{float:left;width:14em;font-size: 13;font-family: Verdana;background-color:#222222;padding:0.2em 0.7em;}It has that section that was "width: 14em;" But if I change that it changes the amount of the background around the link that changes color. For example, if I make it smaller it dosn't fill the entire length of the table, if I make it longer than... well nothing really happens I don't think. This might be too much to ask since you have already done a lot, but think you could clean my CSS up to make it work? I wrote all of it sometime ago, but I've been copying and pasting from old sites I did and now I've made a huge mess and can't fix it hehe.What I need though, and I said this before, is two types of links, I have them now(thanks to you), but I still have that width problem. I need somehow to make all of that piece of CSS I posted above to apply only to that navi links. Its like I need a two diffrent link defines and two diffrent hover deffines, I have the hovers, I just need another link define. And then once I have it how do I make the <TD> command call for both of them?Thanks again.

[Jonas]

You know what you should do first? You should try to make your document valid. Choose a doctype, either for html 4.01 using frameset, loose or strict, or xhtml frameset, transitional or strict.http://www.w3.org/QA/2002/04/valid-dtd-list.htmlWith a doctype, there's a bigger chance of your css showing equally in all browsers, because you're sure that all browsers are getting the same code to start off with, and that the code is valid html code, not something browser-spesific.Oh, and your news section has horrible contrast values. If I were visually impaired I'd have trouble reading that. Infact, sitting on a laptop with an lcd-screen, just tilting my screen slightly up or down, I have trouble reading that. White on black is better than black on dark gray at any rate...

[Chocolate570]

^^ Jonas is right. The news section needs major help. Also, your menu seems to be working now, so congratz.

[F-Man]

lol fluffums, I see that you have added 'other_attributes' to your navigation cell. When I said other_attributes I was talking about, well, your other attributes, not telling you that you should type it exactly like in my example. So yeah just remove it.

[fluffums]

Hmmm. Well I guess what you said about decalaring my document type is what I need to do, cause the text isn't dark grey, its white... or atleast it is for my viewing. Ok, well I will take care of that. Ty Jonas.And again thanks to F-Man, maybe I can get all this taken care of hehe.