DD Color Tabs II - Table cells

[bluemoon562]

I'd like to convert the DD Color Tabs II script to a table with cells.

http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs-ii/

I think it's possible to adapt the CSS image background and hover effect to work in a table with cells.

Any idea on how to do this easily? It would be so much lighter than a typical javascript/DHTML code.

[blm126]

Just a note: the linked script is NOT DHTML/Javascript

[bluemoon562]

Yes, I know that.

I just meant that I want to use this CSS code because it's so much leaner than DHMTL/Javascript but I want to adapt it to a table row.

[blm126]

Sorry I misunderstood you, my bad. As for the table idea, can I ask why you want to do this? Tables are designed for tabular data not layout. Also even if you did convert it to a table it would require javascript. I recommend you try and use it the way it is.

[bluemoon562]

I'm still using table layouts because I'm not comfortable enough with all-CSS layouts yet - especially for a dynamic site that will be hooked up to a database.

Therefore, the existing <div> layout is cumbersome at the top of the page and would be better in a simple table row with cells.

(However, that said, I did apply the CSS script as is and it worked and looks fine in preview mode - but looks crazy in edit mode.)

I might just do a simple hover effect without the tab images.

I guess my question is, can I have two background images in a table cell with CSS? One would be the tab image and the other would be the mouseover highlight (hover).

[boogyman]

yes you can...



<style type="text/css">
<!--
td {
background: #ffffff url('link.gif');
}
td:hover {
background: #000000;
}
// -->
</style>


where #ffffff is equal to some hexadecimal color code
and link.gif is equal to some image that you want to be displayed in the background...

[mburt]

pissa: In the normal "td" how come you have written the below in red:


td {
background: #ffffff url('link.gif');
}

I'm not sure why the "#ffffff" is there. The gif should be able to sit on it's own.

[blm126]

pissa: In theory yes, but in IE no. IE only supports the hover pseudo-class on anchors(<a>).

mburt: You should always provide a backup incase the user can't(or doesn't want to) download your background image

[mburt]

Ok, thanks. It just looked a little odd :)

Yeah, I forgot to mention about the hover pseudo-class, which in IE only works for anchors.

Completely off topic: blm126 has 103 posts, and I have 301. Whoa... I'm amazed (completely ignore this)

[bluemoon562]

Okay, thanks.

So, if I have two graphics (left and right), how would that affect the CSS code?

And how do I put that in the HTML?

Say I have a table with four cells:

Home About Info Stuff

Not sure how to plug that into the cells.