[thelist] Aligning an image to the bottom of multiple lines of textin CSS

Robert Vreeland vreeland at studioframework.com
Mon Oct 18 19:35:15 CDT 2004


You can do it with absolute positioning and z-index.
For example
<div style="position:absolute; top:200px; left:200px; z-index:1;
width:200px; height:200px"><a href="someplace.com"><img src="someimage.gif"
alt="yada" width="200" height="200" border="0"></a></div>
<div style="position:absolute; top:380px; left:200px; z-index:2;
width:200px; height:20px"><a href="someotherplace.com">This is the text,
click here</a></div>

Robert Vreeland
Managing Partner
StudioFramework
vreeland at studioframework.com


----- Original Message ----- 
From: "Roger Ly" <evolt at matchpenalty.com>
To: <thelist at lists.evolt.org>
Sent: Monday, October 18, 2004 7:49 PM
Subject: [thelist] Aligning an image to the bottom of multiple lines of
textin CSS


> Hey all,
>
> Any thoughts on how to accomplish the following with CSS and no tables?
>
>
> =============================
>
> ----
> |  |
> |  |
> |  | this is some text
> |  | that is aligned to
> |  | the bottom of an image.
> ---- how to do this?
>
> www.mydomain.com
>
> ==============================
>
> There is an image on the left, which is vertically aligned to the bottom
> of the multi-line text on its right.  Directly underneath both, is a
> link which is aligned to the left of the image.  Both the image and the
> link need to be hyperlinked.
>
> I can't seem to get any good alignment going.
>
> The best thing I could come up with was something like this:
>
> <div style="background-image: url(http://url.to.image);
> background-position: bottom left; background-repeat: no-repeat;">
> <!-- the padding should be the width of the image plus some
> padding pixels !-->
> <div style="padding-left: 150px; ">
> blah blah blah<br />
> blah blah blah<br />
> blah blah blah<br />
> blah blah blah<br />
> blah blah blah<br />
> </div>
> </div>
> <div><a href="http://www.mydomain.com">www.homestead.com</a></div>
>
> But I don't know how I'd get the image to be hyperlinked.
>
> Any ideas?
>
> TIA
>
> Roger
>
>
> -- 
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !



More information about the thelist mailing list