Change Table Cell on Mouseover (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Avick -> Change Table Cell on Mouseover (9/14/2004 10:21:45)

I would like to change the background colour and border of a Table cell (TD) or a div when the mouse is over it.

Can I do this in CSS and if so how.

Or would I be better doing it in java



dpf -> RE: Change Table Cell on Mouseover (9/14/2004 13:51:19)

quote:

Or would I be better doing it in java

not java but javascript..or css



abbeyvet -> RE: Change Table Cell on Mouseover (9/14/2004 14:41:36)

Could you explain a little bit what you are trying to acheive by doing that?

While what you want may be tricky and need JavaScript, it may be possible to get the result you want using another approach.



Giomanach -> RE: Change Table Cell on Mouseover (9/14/2004 14:45:24)

It can be done with CSS, but it is a rather lengthy process, and involves applying the same class to more than one cell with the way in which I believe you wish to do it.

You should also note, that some browsers may not support the psuedo classes required to do it with CSS.

Before I can give you a more in depth answer how to do it, please could you define whether it will be applied to a Table Row <tr> or just a Table Cell <td>, and whether the content of the cell is to be a hyperlink or static content.

Dan



Avick -> RE: Change Table Cell on Mouseover (9/14/2004 15:53:29)

Sorry I should have made myself a bit clearer.

I have three boxes at the top of my site that will have a number of different links in each. When a person hovers over these boxes I would like the background to change to a different colour. Nothing to strong just a subtle change. I would also like to have the borders change colour, so before there is no border and after there is.

I have managed to do this using the onmouseover tag but I don’t have that much control over it.

The site is on the net at the moment. It’s not quite finished. The effect is on the home page.

http://www.newebirl.net



c1sissy -> RE: Change Table Cell on Mouseover (9/14/2004 17:56:54)

I believe It can be done in css. You would use the a:hover and I believe the a:active.

and you can do this for a div, list etc... If you go Here and look at the css, you'll see how I did this with the def list. I think its a matter of playing around and seeing what you can get it to do for you.



Giomanach -> RE: Change Table Cell on Mouseover (9/15/2004 7:34:29)

I would have done it slightly different, but never mind lol

Avick...look at your site through FF...it's all wonky..[&:]

Dan



Avick -> RE: Change Table Cell on Mouseover (9/15/2004 7:43:55)

I noticed that. I tried it in Opera and it’s a bit out but nothing much to worry about.
Then I had a look at it in FF and my god it looks like it was in a bad RTA.

I don’t get much “if any” visitors using FF so for the moment I am going to keep going as I am.

I was thinking of using the @import tag and creating a style sheet for FF called ffstyle.css but I am not to sure if 1 I know how to use it correctly and 2 if it will work.



Giomanach -> RE: Change Table Cell on Mouseover (9/15/2004 7:54:51)

Search for IE Conditionals, create a stylesheet for IE, and one for the rest

Dan



c1sissy -> RE: Change Table Cell on Mouseover (9/15/2004 8:26:00)

quote:

I was thinking of using the @import tag and creating a style sheet for FF called ffstyle.css but I am not to sure if 1 I know how to use it correctly and 2 if it will work.


Its interesting that you bring this up. You actually should have two style sheets. One that has very simple styles within it that the older browsers would pick up. And then you import the stylesheet with all the more intrigue styles in it.

You would put the @import in right under where you have your linked stylesheet. Do you know how to do an embedded style sheet? It goes within the <style> element. And if you are using an embedded style sheet, Make Sure that you have the @import listed above the styles that you have in there. Very important that you do this.

Now the IE conditionals,HERE is a link to some explaination for this method. Also if you search this forum for IE hacks or conditionals you will find that there is another link in here somewhere that explains this as well.

What you should be doing is using other browsers instead of IE to view your pages while working on them. Then go to the IE browser and create the IE conditionals. Seperate style sheet of course. It might seem like a good bit of work to do the seperate style sheets. But its better to do it this way in case the browsers ever catch up and are compliant. Then you don't have to search your xhtml code to remove any hacks that you might have in them for the pages to work. All you need to do is edit a style sheet.

If you have any other questions just make sure that you come back and ask them.



Avick -> RE: Change Table Cell on Mouseover (9/15/2004 10:29:54)

Ok Let me see if I have this right.[8|]
I have a style sheet in my head tag linked to my page like this:
<link rel="stylesheet" type="text/css" href="maincss.css">

If I create a second style sheet “say” called designcss.css I could access this with the following layout in the head tag.

<link rel="stylesheet" type="text/css" href="maincss7.css">
<style type="text/css"> @import url(designcss.css); </style>

The First sheet would have vary basic layouts and the second would have all the bells and whistles.

So the second style sheet would only be used when the browser can handle it. Am I on the right track?

Would the two sheets have the same tags

Maincss7
td#menuCell {background: #F0F0F0;}

designcss
td#menuCell {background: #F0F0F0;
border-top: solid 1px #FEFEFE;
font-width: bold;}


The second sheets tag elements only being used when the browser can handle it!.

Please don't tell me I have to rip my site apart [:(]



c1sissy -> RE: Change Table Cell on Mouseover (9/15/2004 10:39:50)

quote:

The First sheet would have vary basic layouts and the second would have all the bells and whistles.

So the second style sheet would only be used when the browser can handle it. Am I on the right track?


You are correct on this.

When I mention basics, it would be your fonts, etc.. your basic link styles, Think of the most basic styles that you have on your sheet right now that would work in basically any browser. That would be on the linked style sheet.

Now your bells and whistles would be your imported style sheet.

I would not put anything in regards to positioning in the basic style sheet as that is one of the things that browsers have a problem with. If you would like a good course on css p, let me know and I'll send you a link via pm to it.

You really don't need to tear your site apart at all. Just a matter of looking at what you have and making a very basic linked style (here is an example 
body {
    font-family: Arial, serif, "Times New Roman";
    }
h1 {
    font-size: 155%;
    }
a:link {
    color: #06c;
    }
a:visited {
    color: #000;
    }

sheet, and rename the bells and whistles one to import.css (or whatever you wish to name it. And if I am remembering correctly you need to have quotation marks around the url for the imported style sheet. Here is an example taken right from one of my pages right now. 
<style type="text/css">
<!--@import url("xhmlssiimport.css");
--></style>
</head>

as you can see, it goes right above the </head> element.

I hope that this helps you out



abbeyvet -> RE: Change Table Cell on Mouseover (9/15/2004 10:46:33)

You have the @import stuff right.

I am not sure that saying you SHOULD have two stylesheets is necessarily true.

The only browser that will see the stylesheet that is simply linked to is NN4 - not at all common now. For many people it will not be worth maintaining 2 stylesheets just to support a browser that is hardly ever used, and if you just link to a single stylesheet then the information WILL still appear in NN4, though in a highly unadorned state, which is probably enough in most cases.

Back to your first question. What you want to happen with the cells is only possible by combining CSS with Javascript. Personally I would think of a different way of presenting it nicely without resorting to JavaScript if it were me, on a keep it simple basis.

And go easy with the hacks and conditionals - really you should only resort to them if you find there is no alternative way to do what you want with plain CSS without hacks. Most things that can be done with CSS can be acheived in several different ways, to my mind the one that doesn't need a hcak to make it work should win every time.

Nice to see others from Ireland around here! [:D]



Avick -> RE: Change Table Cell on Mouseover (9/15/2004 10:48:28)

Thanks,[:D]
I can now see what you mean.
Strip the default sheet down to the very basics.
This is also good if I want to change the fonts or the background color of the body tag.

Can you send me the like for the css p course, help me improve my skills.



Avick -> RE: Change Table Cell on Mouseover (9/15/2004 10:56:40)

Katherine
There are very few hits on my site using anything other then IE.
I did have a problem with people using IE and Mac but that seems to have disappeared with the new MAC OS.

On the other hand, the two style sheets are not a bad idea as the most basic elements can be used on almost all websites. I could use a default sheet for all clients and a custom sheet for each site.

Are you Dublin based Katherine?.
"What a stupid Question... Doh..[:)] its in your profile"



c1sissy -> RE: Change Table Cell on Mouseover (9/15/2004 10:57:54)

quote:

Can you send me the like for the css p course, help me improve my skills.


Sure its on its way. Its a pretty good one. There are also recomended books that you can purchase. I just got them, and they are pretty good ones.

let me know how you make out with this, I would love to see your page again.



Donkey -> RE: Change Table Cell on Mouseover (9/15/2004 10:58:31)

I find it easier not to use the @import but to link both style sheets and to comment out the IE stylesheet like this
<link href="/styles/mainstyles.css" rel="stylesheet" type="text/css"/>
<!-->
<link href="/styles/ie-styles.css" rel="stylesheet" type="text/css"/>
<!-->

In this method you have one style sheet for the compliant browsers which is always the first one. The second sheet only contains changes so it will be much smaller. The compliant browsers ignore the second sheet because of the comment tags; IE doesn't and because of the cascade the changes in the second sheet over-ride the values in the first sheet.

It works and it validates.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
7.910156E-02