Hyperlink for entire table cell rather then just the text - how is it done?

D

David Smithz

IE wants a background color for this to work as intended.
[snip]
Don't quite know what you mean here. However I think I have solved it using
Jonathans approach (See other postings).

Cheers
 
D

David Smithz

strict doctype, work even in IE and no JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Boxed Link</title>

<style type="text/css">
A.boxed{ display: block; width: 15em; padding: 5em 0 0 0;
background-color: #eee; text-align: right; }
A:hover.boxed{ background-color: #ff0; }
</style>
</head>

<body>
<div>Here is one way <a href="#" class="boxed">Lower Right</a></div>
</body>
</html>

Well! This certainly is a lot less code then I produced. And so far it seems
to work perfectly. I have today ordered myself the CSS o'reailly definitive
guide as a result of these postings to give myself a better grounded
understanding.

I have not yet managed to incorporate into the website I'm working on but in
theory it looks excellent and a whole lot simpler.
I hope there are no caveats.

Thanks again.
 
J

Jonathan N. Little

David said:
in message

Well! This certainly is a lot less code then I produced. And so far it seems
to work perfectly. I have today ordered myself the CSS o'reailly definitive
guide as a result of these postings to give myself a better grounded
understanding.

I use "em" so if the user changes the text site all will be relative.
Simply put the box is created by making the A element a block giving it
a WIDTH, and since you wanted the text on the bottom a chrated the
height but increasing the TOP PADDING

Don't know how good the O'Reilly book is on CSS, some of theirs are
great and other sub-par.

I have not yet managed to incorporate into the website I'm working on but in
theory it looks excellent and a whole lot simpler.
I hope there are no caveats.
 
D

David Smithz

in message
[snip]

Thanks to your code example I have taken it quite far and even managed to
right align an image in the anchor link as a background-image that was
previously in an adjacent layer.

One thing I have noticed though, using the background image when you move
the mouse over the hyperlink (with its right aligned background image ) in
IE the cursor seems to very briefly change to an egg time.

This leads me to believe it is loading the image every time. Also the URL
does not get displayed in the Status bar like on a normal Hyperlink.
Any reason why these things might be occurring. They are not critical by any
means but if easy to put right I would like to.

Thanks again
 
J

Jonathan N. Little

David said:
in message
[snip]

Thanks to your code example I have taken it quite far and even managed to
right align an image in the anchor link as a background-image that was
previously in an adjacent layer.

One thing I have noticed though, using the background image when you move
the mouse over the hyperlink (with its right aligned background image ) in
IE the cursor seems to very briefly change to an egg time.

I use css to swap background images on the menubar of my website and I
do not see such behavior. Need URL to *see* what you are actually doing
to comment.
This leads me to believe it is loading the image every time. Also the URL
does not get displayed in the Status bar like on a normal Hyperlink.
Any reason why these things might be occurring. They are not critical by any
means but if easy to put right I would like to.

Shouldn't, should cache. Is this image huge?
 
D

David Smithz

Shouldn't, should cache. Is this image huge?

Hi Jonathan,

It's not a huge file but I will try and work on putting the files public.
Sort of difficult at the moment as I am not supposed to yet.

Thought I would run quickly by you your opinion on some other aspects of
handling things.

I have a navigation menu on the left hand side of the screen. I do use
tables in this with each table row being an entry. I thought this makes an
easy way to change the navigation page if it changes.

Is this a valid use of tables in this context or would you approach this a
different way.

Also I have breadcrumbs on my webpage to help the use know where they are. I
did put this in a table (placed in a div) so that I can vertically centrally
align it within the region I place the breadcrumbs, but having viewed your
examples. I think I am better to just put padding around the breadcrumb
text.
In fact even reading the question back it seems very stupid to use a table
but rather then remove it I'll keep it there in case you give me any more
pearls of wisdom in this context.

Thanks again for your help and be happy to know that a (another I'm sure)
website out there had directly benefited from your expertise.
 
J

Jonathan N. Little

David Smithz wrote:
In fact even reading the question back it seems very stupid to use a table
but rather then remove it I'll keep it there in case you give me any more
pearls of wisdom in this context.

Thanks again for your help and be happy to know that a (another I'm sure)
website out there had directly benefited from your expertise.

I use a list, since it is a list of links. Mine are nested to follow the
hierarchy of my site and I use CSS for flyouts...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top