View Full Version : CSS Text Rollover

01-12-2006, 04:34 AM

On a text rollover, I want the background color to change for the entire cell. Unfortunately, the background only changes for the length of the link. What have I done wrong?

I am learning CSS. In DreamweaverMX, I used the CSS Style Selector to create the link, visited, hover, and active states. The problem is as the mouse moves over the link, the words are different sizes so the rollover background colors do not change the for the entire cell. For instance, there are seven links (About Us, Directions, New Members, etc) and the background change to the right color as the mouse moves over it but does not change the color for the entire cell. So I have the original link or not visited color (#eaead4 with black text) and the rollover color (#ac822d with white text) in the same cell.

I am sure I missed a step, how do I make the rollover text background fill an entire table cell vs just fill behind the link text?


01-12-2006, 08:24 AM
I've kind of had this issue as well Carter - although using the words 'cell' you sound like you are using tables? You don't need to. I've made a list <ul> and of links and then used CSS to style them to look like a menu. But as you say - I can only get the background of each link to change colour on rollover as oppose to a wider space. If you know what I mean.


01-12-2006, 11:40 PM

I am sorry but I do not know what a "a list <ul> and " is.

Per the source, the menu on DreamweaverClub home page appears to be a <ul>. I have no idea how this was done.

I would appreciate if you or someone on the forum would point me to a link that provides an overview and identifies the steps to do this? (I found very little via google.) Thanks

Creative Insanity
01-13-2006, 12:03 AM
OK carter there is a cheats way that I do this and that is after the link text I hold down Shift+Ctrl and press space until I reach the end of the cell which will add a few and then high-light the entire cell and create that as the link.
If I want the links centered then I just add them before the text until I see it is centered and then a few at the end of the text to fill the cell and make them all part of the link including the text.
If you find it does not fill the cell on a hover, just add a few more in code view. Don't forget that if it is centered to make sure you add the same infront of and at the end of the link text.

01-15-2006, 05:08 AM
Creative Insanity,

Great tip!!!! It works! I did not know spaces could be done this way..... Thanks!


Creative Insanity
01-15-2006, 05:47 AM
They are not normal spaces carter.. they are characature spaces and therefore you can high-light them.

DJ will proberly want to beat me up now for telling you to cheat LOL.

dj.. don't hurt me.

01-16-2006, 08:05 AM
dj.. don't hurt me.

i have a bat with a nail in the end

Creative Insanity
01-16-2006, 08:49 AM
i have a bat with a nail in the end
Well you know where you head is ah.. so use that bat. LOL