|
|
Posted by Jonathan N. Little on 12/11/06 03:45
David Smithz wrote:
> "Steve Greenaway" <macfisto@engsoc.org> wrote in message
>>> I have a 1row * 1 column table containing a text which acts as a
>>> hyperlink.
>> I have to admit that I don't understand why you're using a single-celled
>> table. Seems like a lot of extra markup to simply define a box around
>> something.
>
> Hi guys and thanks for all the input. I do confess there is probably some of
> the CSS theory missing from my knowledge which I am trying to address.
>
> The reason for the table is the ability to be able to vertically position
> the text within a <div>. Previously I had looked up ways of doing this
> because using the style property vertical-align:bottom did not seem to
> have any effect.
>
> I was reading about this only applying to inline elements (I'm still new to
> CSS really) and the guides I found online (not sure where) said you can use
> a table to get the positioning by using the valign:bottom attribute on the
> <td> element.
>
> This made sense to me so I went with it.
>
> If anyone can show me away to take rectangle section of the screen that I
> format looks wise as I choose.
> Make the entire rectangle selectable as a hyperlink and have the text in the
> rectangle positioned so that it is on the right hand side and to the bottom
> then I would be very happy.
>
> So imagine a section like the below (hopefully displayed OK)
> -------------------------------
> | |
> | |
> | |
> | |
> | My text here |
> -------------------------------
>
> When I move my cursor into the above, it should change to the pointing
> finger and anywhere I select in the region will take me through to my
> desired URL.
>
> Also when I move the mouse over the section the background colour of the
> area needs to change (I don't mind doing this using JavaScript).
>
> If I do not have the text positioned at the bottom right, I can get this to
> work easily, however, getting the text positioned bottom right seems to be
> very hard when making all of my other requirements still true.
>
> If anyone has an example of the above working I would be very grateful.
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>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|