How to do this Please help...!

i want some help i am creating my new website and i want to do this:

if the link color is white and when i move mouse over it then it should change to red.
and if the link color is #4A7291 then when i move mouse over it so it should also change to red how can i do this.
my default link color which is set is #4A7291 and i already add some css but it is working with #4A7291 color becoz it is also default link color but when i am moving mouse to white link it is not changing to red please help me friends.
here is the code which i am using and its only changing #4A7291 to red not white to red.

<style>
a:hover{color:red; }
</style>

Code (markup):

here is my website design.

the above pic is my navbar and these links color not changing to red when i am moving mouse on it.


and this is my menu its links color changing becoz the text color which i used is the default link color also.

 

If your code (html and css) is valid, it may be a specificity problem :
http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm

 

If it is a specificity problem, you can try adding important, like this:

a:hover{ color:red !important; }

Code (markup):

If that doesn't do it, could you post the link to your site so we can take a look at it?

 

12 to 1 the problem here is that when you are reassigning .navbar A to white, it's overwriting the global A declaration.

Which is why I always declare my hovers directly off the parent wrapping class/id and almost never rely on the global assignment.

Though as KatieK suggested, showing us some code would let us diagnose the problem right quick.

 

i am still working on my site it doesnot launched yet but i just uploaded its main index page just for demo to chech please review and point out mistakes.

http://cricwallz.sitesled.com/demo.html

 

If you could fix the urls in it and upload the images so it works, we might have something of a better idea...

file:///D:/Web2/images/bg.jpg

is NOT going to work on a server. Frankly there's no reason for you to EVER specify the path to an image that way if you set the directory tree up right.

Though that's not your problem... Though your uber nesting of table in a table in a table seems unneccessary at best, bloated at worst.

I THINK part of the problem is all the inlined presentation (which should be removed)... In fact I'm certain of it:

<td width="69" align="center">
<font face="Arial" size="2" color="#FFFFFF">
<a href="index.html" style="text-decoration: none"><font color="#FFFFFF">Home</font></a></font></td>

The font color="#FFFFFF" is overriding anything declared on A - FRANKLY ALL Those font declartations need to get the axe - frankly so does the width, align, and style declarations. As I've said about several sites of late, there is more of 1997 to this page than 2007, in that with all the inlined presentation you've got easily three times (or more) the HTML that's needed for such a simple layout.

-- edit --
Oh, BTW the code AFTER the HTML tag is closed REALLY can't be helping matters.

 

so what should i have to edit....?
and leave the images i jst uploaded that file for review
can you create 1 css simple file for me?

 

"Oh, BTW the code AFTER the HTML tag is closed REALLY can't be helping matters."

How does that hurt? I do that with dynamically visible and absolutely positioned items all of the time. Good for invisible z-index items as well. You don't want these things cluttering up the body of your regular markup as they are completely separated from the flow anyway.

 

COMPLETELY INVALID HTML. PERIOD.

 

Xtreme, you have two choices: you can pay a website builder money to make you an html and css page; or you can get a book and learn to do it yourself (correctly).

Look at your library for this book: Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. If English isn't your first language (seems like it isn't), then see if there's a translation of that book. It starts from the beginning, makes you build a site, and explains why you do what you do and don't do.

Looking on teh Internets is actually not a great idea since that's where you get stuff like you already have.

 

Period? Where do you stick an absolutely positioned hidden div? For example, in the instance of a dynamic dropdown menu that layers over top of the content. Would you stick that right next to the div you're going to cover? Wouldn't that clutter things a bit? Anyway, it works across the board, and in fact, I remember about 6 years ago, when I worked for a web company, they were running into strange behavior for these non displayed or invisible divs, and the problem went away when they stored them after the html tag. It seemed to be easier on the browser and therefore more reliable.

 

can anyone edit this code and make some correction in it for free.?

 

use this

<style type="text/css">
a:hover : #FF0000;
</style>

 

<head>
<style>

.TopNavLink {
text-decoration: none;
color: white;
font-family: arial;
font-height: 12px; (or any value you want)
}

.TopNavLink: hover {
color: red;
}

</style>
</head>

etc etc etc.....................................

<td width="69" align="center"><a href="index.html" class="TopNavLink">Home</a></td>

You need to give a specific name for your links in the top nav, (I chose class=TopNavLink) because you don't want them to be the same as the rest of your links because they need to be white colored rather than your default blue that you use for the rest of the page. That's your only problem. And, as you can see, no need for any font tags, as it's simpler and less cluttered to set it in the stylesheet. You could style the <td> too and enter it's width and text alignment on the stylesheet, but that's getting into css design, which it seems you don't want to do right at the moment, you just want to get this finished.

Or, here's a simpler way fro you because it's inline styling

<td width="69" align="center"><a href="index.html" style="text-decoration:none; color:white; font-family:arial; font-height:12px;">Home</a>

And by default, it will then use your existing hover spec that you use for all of your hyperlinks

<style>
a: hover{
color: red
}
</style>

All you needed to do was to color that specific instance of hyperlink to override it's page wide definition.

 

li ul {
  visibility: hidden;
  position: absolute; 
  top: 32px; 
  left: 0px; 
  width: 120px;
}

Code (markup):

Not sure if this is exactly what you're talking about, but this is an absolutely positioned submenu in a CSS-only drop-down where the drop-down part covers the content. I make it visibility hidden which doesn't just hide it but makes it not there at all-- it takes up no space and users cannot interact with it until it appears (visibility:visible on mouse hover).

In the HTML, the whole menu is there. Lynx users can access the entire menu. I've found that JAWS users cannot, which sux0rs, but if they turned CSS off they could (I let them be able to click on the main menu and brings them to a page with the other links sitting free in the content for them).

Anything you hide after </html> is inaccessable to many people (even if you're using CSS to make it show up elsewhere later).

A company I work for is still using a stat script after the html end tag on their site pizzaatje.nl (which I have completely and validly rewritten but is still sitting on my server as no-one has the time to upload mine : ( and yes, the script still works and is invisible to the user (and the user should never ever see it), but I could validly stick it before the end tag by not having the actual script on the page (it shouldn't be there anyway).

*edit, my bad, that page is so badly written, there are NO html tags at all. And waddaya know, it still kinda works in some browsers!

 

^ visibility:hidden just makes the element "invisible", but it still takes up all the space that it would normally take. I'd suggest higher values for left to throw it off.

 

I don't move my menus off to the left to hide them.

Sorry, you're right I was confusing with display: none where it takes up no space. My menus don't push down the content because of high z-index.

 

I was talking about putting the actual markup (li ul), not the css specs, after the html end tag because if the object is absolutely positioned, it is independent from any other elements or html flow control. An invisible element does take up space, but if you have it coded to be absolutely positioned over top of some existing content, then it will not appear to take up any space at all. but, if it is not absolutely positioned, or positioned somewhere below the visible content, you will see where it will take up space and give you a blank area at the bottom that matches the size of the invisible element. This is probably why some people just throw it outside of the html altogether. As far as taking up no space, the display none property does this and makes it as though the code doesn't even exist, and therefore no space need be accounted for it.

In my experience, hidden, absolutely positioned divs after </html> have never caused one single problem for me in FF, IE or Opera. Don't know about Safari/Mac. And, it is much better organized for the code reader rather than embedding confusion into the regular markup.

 

PERIOD. There isn't a validator out there that is going to call that valid code. That is INVALID HTML.

As to where to put it, before you close the body tag. It's an absolute, it's removed from flow - so long as you put the HTML where the html is supposed to go in the document, there shouldn't be a single problem.

While putting if after the HTML is INVALID CODE. HTML goes INSIDE the HTML tags - DUH. JHFC DUH. HFSAYKM DUH.

What's worse than buggy broken invalid HTML? People saying it's ok to use so browser makers can't actually FIX anything.

 

Friend sorry to tell you but still nothing happening
have you tried this code in my page first?