Jump to content
Sign in to follow this  
fluffums

Quick Noobish Question

Recommended Posts

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.

Share this post


Link to post
Share on other sites

#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. :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

#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?

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

*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.

Share this post


Link to post
Share on other sites

*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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...