PDA

View Full Version : table headers and css


HIPPY
03-06-2007, 05:07 PM
I have a <th> tag on a webpage

What i want to happen is that when a user puts their mouse over the table header that a little box appears with the word hide/show in it..

like how it is done with images using alt="blah".. when you put that in an img tag and you put your mouse over an image the word blah pops up

I would like something similar to happen using css.. or if you know any other method of how to do it

ive tried using tthe <acronym> tag to pull of the effect but a message only pops up when you put ure mouse over the text in the table header and also has a dotted underline which kinda spoils the look of the page...

So can you help me out!!

thanks in advance ;)

jlhaslip
03-06-2007, 07:39 PM
This page (http://www.jlhaslip.trap17.com/samples/tooltips/index.html) shows one approach.
You need to wrap the h1 tag in an anchor <a> tag, add the span, and insert the css code to display the span contents on:hover. IE has trouble with the on:hover without the anchor tag. And the colour, size and positioning is adjustable if you modify the css a little. It isn't perfect, Opera9 doesn't like it and acts a bit weird somtimes.

Arbitrator
03-07-2007, 09:00 AM
ive tried using tthe <acronym> tag to pull of the effect…Unless the content of the element is actually an acronym, using the acronym element for this purpose would be un-semantic; in other words, it wouldn’t be correct according to the meaning of the tag.

… and also has a dotted underline which kinda spoils the look of the page...You can fix that with CSS:

acronym { border-width: 0; }

You need to wrap the h1 tag in an anchor <a> tag… It isn't perfect, Opera9 doesn't like it and acts a bit weird somtimes.It probably doesn’t work well because putting any naturally block-level element, such as an h1 element, inside an anchor element is illegal (X)HTML.

jlhaslip
03-07-2007, 02:05 PM
Then the <a tag would need to go inside the <h1>???
Would that work?

Arbitrator
03-07-2007, 08:17 PM
Then the <a tag would need to go inside the <h1>???
Would that work?That would at least be valid. I haven’t read the resource that you provided though, so I can’t say whether or not it will work for that technique.

jlhaslip
03-07-2007, 08:40 PM
Thanks for pointing that out.
I will put that on the 'spare time' list of things to check.