Fairly Simple Question About Hover...

[darossa]

HiThis is my simple, but loved website: http://notasdeaula.orgIn there, you can see that everthing is based on tables. On the header, we can see some links, such as the "ajuda", "segundo semestre", and so on. Also, in the main table, the one with five colums, we see more links over text inside the cells.What I would like to do, but doesn't know the best way to do without going to javascript and extra files (I really want it to be all in html or CSS), is to make the whole cells clickable, but adding a hover property. Also, on hover, i`d like to have it change colors, so that the users will know that`s clickable more quickly. for example, the first row of the main cell contains links too, with important content, but they confuse it by thinking it`s just the column title.What do you suggest?Thanks a lot.

[thescientist]

so you want more than just the text within the cell clickable? the entire width of the cell?

[darossa]

The entire cell! :)How do I do it? The bad thing is that I can't quickly find an example to show you, but I think its easy to get the idea

[Ingolme]

Give the <a> elements display: block as a CSS rule and then, rather than giving a height to the table cell, give it to the links, or give the links some padding.

[darossa]

I didn't get how this helps. This is not about spacing or padding... just about linking and making the cells change appearance when hovered... or am I mistaken (very possible).

[Ingolme]

I didn't get how this helps. This is not about spacing or padding... just about linking and making the cells change appearance when hovered... or am I mistaken (very possible).

The idea is to first make the link take the full space of the table cell, and then just change the style of the link instead.Here's a quick example:

<table class="box">...<td><a href="">A link</a></td>...</table>

table.box a { display: block; }table.box a:hover { background-color: red; }

[thescientist]

I didn't get how this helps. This is not about spacing or padding... just about linking and making the cells change appearance when hovered... or am I mistaken (very possible).

What Ingolme said. Instead you use the content within cell to determine the cells size (like an image, maybe? (or with padding/display), and then use that content as your anchor.

[darossa]

Thanks guys and sorry for late response.So, I get almost all of it, and created this sample: http://notasdeaula.org/hoverbox.htmlBut, as you can see, only the background of the link text is coloured when hovered, not the entire table cell. How to change that?

[Ingolme]

Thanks guys and sorry for late response.So, I get almost all of it, and created this sample: http://notasdeaula.org/hoverbox.htmlBut, as you can see, only the background of the link text is coloured when hovered, not the entire table cell. How to change that?

Remove any padding from the table cell, and apply it to the <a> element instead. That also means to set the cellpadding attribute to 0.Also, table cells expand to be equal to the height of the tallest table cell, I think adding min-height: 100% should solve it.

[darossa]

Remove any padding from the table cell, and apply it to the <a> element instead. That also means to set the cellpadding attribute to 0.Also, table cells expand to be equal to the height of the tallest table cell, I think adding min-height: 100% should solve it.

There is already no padding in the cells as far as I know. The space between the top and text of the cell with large amount of text in it is because of the own amount of text compared to the amount of text of the adjacent cell.

and apply it to the <a> element instead

it what? Sorry for not undestanding... I created the codes you told me in post #6... what next? Thanks.

[Ingolme]

Add min-height: 100% to the <a> element:table.box a { display: block; min-height: 100%; }You should Validate your HTML before trying to lay out pages, otherwise, things aren't going to work correctly in all browsers.