HighDots Forums  

aligning text to image

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss aligning text to image in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
tomasio
 
Posts: n/a

Default aligning text to image - 02-27-2006 , 08:33 AM






Dear NG-readers,

I want to align text right to an image. The last line of text should
align with the bottom edge of the image. Unfortunately, the results
using my poor CSS knowledge mounted in text which starts at the bottom
line of the image and continues below. For an example go here:
http://tomasio.at/temp/test_valign.html

I want to achieve the following look:
http://tomasio.at/temp/correct.html

Does anybody could give me a hint what I am doing wrong?

kind regards,
--
tomasio

Reply With Quote
  #2  
Old   
Arne
 
Posts: n/a

Default Re: aligning text to image - 02-27-2006 , 09:17 AM






Once upon a time *tomasio* wrote:
Quote:
Dear NG-readers,

I want to align text right to an image. The last line of text should
align with the bottom edge of the image. Unfortunately, the results
using my poor CSS knowledge mounted in text which starts at the bottom
line of the image and continues below. For an example go here:
http://tomasio.at/temp/test_valign.html

I want to achieve the following look:
http://tomasio.at/temp/correct.html

Does anybody could give me a hint what I am doing wrong?

kind regards,
Something like this may work?

<div class="indent"> <img src="images/jan_bild.jpg"
style="float: left; margin-right: 10px;" alt="image" height="150"
width="145">
<p style="margin-top: 60px;">this text
should float the image on theleft side, but the last line of text
should end with the bottom line of
the image.</p>
</div>

--
/Arne

Now ignoring all top posters
* How to post: http://www.cs.tut.fi/~jkorpela/usenet/brox.html
-------------------------------------------------------------


Reply With Quote
  #3  
Old   
tomasio
 
Posts: n/a

Default Re: aligning text to image - 02-27-2006 , 10:02 AM



On Mon, 27 Feb 2006 15:17:20 +0100, Arne <invalid (AT) domain (DOT) invalid>
wrote:

Quote:
Once upon a time *tomasio* wrote:
Dear NG-readers,

I want to align text right to an image. The last line of text should
align with the bottom edge of the image. Unfortunately, the results
using my poor CSS knowledge mounted in text which starts at the bottom
line of the image and continues below. For an example go here:
http://tomasio.at/temp/test_valign.html

I want to achieve the following look:
http://tomasio.at/temp/correct.html

Does anybody could give me a hint what I am doing wrong?

kind regards,

Something like this may work?

div class="indent"> <img src="images/jan_bild.jpg"
style="float: left; margin-right: 10px;" alt="image" height="150"
width="145"
p style="margin-top: 60px;">this text
should float the image on theleft side, but the last line of text
should end with the bottom line of
the image.</p
/div
Thanks a lot, Arne, that is a step towards the solution of the desired
layout. The problem is, as soon as the text is changing in its size,
the alignment is not correct any more. Is there a possibility to keep
the text to the bottom edge of the image no matter what amount of text
I enter?

kind regards,
--
tomasio


Reply With Quote
  #4  
Old   
Spartanicus
 
Posts: n/a

Default Re: aligning text to image - 02-27-2006 , 10:33 AM



tomasio <frognsnedso (AT) bled (DOT) de> wrote:

Quote:
I want to align text right to an image. The last line of text should
align with the bottom edge of the image. Unfortunately, the results
using my poor CSS knowledge mounted in text which starts at the bottom
line of the image and continues below. For an example go here:
http://tomasio.at/temp/test_valign.html

I want to achieve the following look:
http://tomasio.at/temp/correct.html
<title>CSS Tutorial</title>?

Doing this "properly" requires browser support for CSS tables (not
supported by IE): http://homepage.ntlworld.ie/spartanicus/temp.htm

--
Spartanicus


Reply With Quote
  #5  
Old   
Sid Ismail
 
Posts: n/a

Default Re: aligning text to image - 02-27-2006 , 11:08 AM



On Mon, 27 Feb 2006 14:33:06 +0100, tomasio <frognsnedso (AT) bled (DOT) de>
wrote:

: Dear NG-readers,
:
: I want to align text right to an image. The last line of text should
: align with the bottom edge of the image. Unfortunately, the results
: using my poor CSS knowledge mounted in text which starts at the bottom
: line of the image and continues below. For an example go here:
: http://tomasio.at/temp/test_valign.html
:
: I want to achieve the following look:
: http://tomasio.at/temp/correct.html
:
: Does anybody could give me a hint what I am doing wrong?


If it were me, I would use tables. Of course I use CSS as well, but
for this application, what could be simpler?

<table cellpadding=6>
<tr>
<td>the image</td>
<td valign=bottom>the text</td>
</tr>
</table>

Set width of TDs and Table to taste. Serves a good page.

Sid





Reply With Quote
  #6  
Old   
tomasio
 
Posts: n/a

Default Re: aligning text to image - 02-27-2006 , 12:19 PM



On Mon, 27 Feb 2006 15:33:06 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

Quote:
tomasio <frognsnedso (AT) bled (DOT) de> wrote:

I want to align text right to an image. The last line of text should
align with the bottom edge of the image. Unfortunately, the results
using my poor CSS knowledge mounted in text which starts at the bottom
line of the image and continues below. For an example go here:
http://tomasio.at/temp/test_valign.html

I want to achieve the following look:
http://tomasio.at/temp/correct.html

title>CSS Tutorial</title>?

Doing this "properly" requires browser support for CSS tables (not
supported by IE): http://homepage.ntlworld.ie/spartanicus/temp.htm
thx a lot, Spartacus. It's a shame that IE does not render CSS tables,
but at least it displays correctly in Firefox.

kind regards,
--
tomasio


Reply With Quote
  #7  
Old   
tomasio
 
Posts: n/a

Default Re: aligning text to image - 02-27-2006 , 12:21 PM



On Mon, 27 Feb 2006 18:08:29 +0200, Sid Ismail <elsid (AT) nospam (DOT) co.za>
wrote:
Quote:
If it were me, I would use tables. Of course I use CSS as well, but
for this application, what could be simpler?

table cellpadding=6
tr
td>the image</td
td valign=bottom>the text</td
/tr
/table

Set width of TDs and Table to taste. Serves a good page.

Sid
In this case it is the most simple approach. Sometimes these tables
are still useful ; )

Thank you for your help.

kind regards,
--
tomasio


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.