Sent by Rijk van Geijtenbeek on 14 December 2002 22:10
On Sat, 14 Dec 2002 12:41:33 -0500, basil crow [EMAIL-REMOVED]> wrote:
[...]
> i am stuck as to how to convert this piece of table markup to css:
>
> <table><tr><td background="images/bottom.jpg" height="70"
> valign="bottom">
> one line of text here
> </td></tr></table>
>
> with this, there was an area with an image of 70px, with the text on the
> bottom of the image.
> [...] any ideas?
Try something like this:
height: 70px; line-height: 1; padding-top: 50px; padding-bottom: 4px;
which assumes a default font-size of 16px. It depends on the nature of the
image and other parts of the design if it is necessary to make that font-
size explicit.
An approach that requires more markup, is to put the text into a separate
element and position this element inside the footer DIV. Somehing like
this:
<div id=footer><p>A line of text</p></div>
#footer {background: white url(images/bottom.jpg) no-repeat top left;
height: 70px; position: relative;}
#footer p {position: absolute; bottom: 0; height: 1em;}
--
If you don't like having choices | Rijk van Geijtenbeek
made for you, you should start | Documentation & QA
making your own. - Neal Stephenson | [EMAIL-REMOVED]
