|
Posted by Jonathan N. Little on 12/11/06 16:32
David Smithz wrote:
> "Jonathan N. Little" wrote in message
>> 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 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.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|