Text wrap and image position questions
in [CSS]
|
From: dorayme on 25 Feb 2010 03:18 In article <slrnhobi5u.bld.ncherry(a)cookie.uucp>, Neil Cherry <ncherry(a)teranews.net> wrote: > I am unable to put an image towards the bottom left or bottom > right and have the text wrap and finish with the bottom of the text > and the bottom of the image matching. Is this possible using legal > css? > It is possible to have it happen on screen, yes. But it is not easily controlled by an author using floats (the obvious thing to use where image placement is required and text wrapping is wanted). Because of the float rules, it is always pretty easy to ensure a pic is at the top left or top right (as you no doubt have observed). This is because if there is room on the line for a float, its *top* will be on that line. But only The Good Lord knows where the bottom will be in relation to text. Because where the text ends depends on the size of the browser window and/or any specified width of the containing element as well as the user text size preferences. If the user needs very big text, even the best guess for placing the float will be ruined. Here is what makes it bottom as you would want *on my eyesight and font settings in my favourite browser*: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Old and new float way</title> <style type="text/css" media="all"> p {margin-bottom: 2em; width: 600px;} ..crimson {float: right; padding: .2em;} </style> </head> <body> <p>Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend convallis, diam augue blandit magna. Cras vel eros. <img class="crimson" src="pics/crimson.png" width="200" height="200" alt="">Vivamus sed odio et orci tincidunt ornare. Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend convallis, diam augue blandit magna. Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend convallis, diam augue blandit magna.</p> </body> </html> > Example: > > ... > text text text text text text text text text text text text text > text text text text text text text text text text text +-------+ > text text text text text text text text text text text | | > text text text text text text text text text text text | Image | > text text text text text text text text text text text | | > text text text text text text text text text text end. +-------+ > > Any pointers would be appreciated, thanks. Here is a pointer. If you are of average eyesight, do as I have done above but set the width to please your design and accept that it will not be absolutey perfectly what you were hoping for. But note, what does it matter, when you consider the troubles in this world, whether it quite bottoms or not. It is very important to keep a wide moral perspective. -- dorayme
From: Ben C on 25 Feb 2010 03:39 On 2010-02-25, Neil Cherry <ncherry(a)teranews.net> wrote: > I'm afraid I can't quite wrap my head around this topic (pun > intended). I've been able to put an image to the top left or top > right and have the text of a long paragraph wrap around the image. > > Example: > > A start of the text text text text text text text text +-------+ > text text text text text text text text text text text | | > text text text text text text text text text text text | Image | > text text text text text text text text text text text | | > text text text text text text text text text text text +-------+ > text text text text text text text text text text text text text > ... Yes, this is quite easy, and is called a "float", achieved either by setting float: right on the image in CSS or "align=right" in HTML. > but I am unable to put an image towards the bottom left or bottom > right and have the text wrap and finish with the bottom of the text > and the bottom of the image matching. Is this possible using legal > css? I don't think it's possible using any CSS. It's a fundamentally harder problem for the browser to solve because the position of the last line of the text depends on where the image is. You could achieve it with some JavaScript-- put the floated image in after the text and move it back word by word until its offset as reported by DOM is at the bottom edge of the paragraph-- but it's better to stop wanting it than to go to such lengths. > Example: > > ... > text text text text text text text text text text text text text > text text text text text text text text text text text +-------+ > text text text text text text text text text text text | | > text text text text text text text text text text text | Image | > text text text text text text text text text text text | | > text text text text text text text text text text end. +-------+ > > Any pointers would be appreciated, thanks.
From: Thomas 'PointedEars' Lahn on 25 Feb 2010 09:46 Neil Cherry wrote: > [...] I've been able to put an image to the top left or top > right and have the text of a long paragraph wrap around the image. > > Example: > > A start of the text text text text text text text text +-------+ > text text text text text text text text text text text | | > text text text text text text text text text text text | Image | > text text text text text text text text text text text | | > text text text text text text text text text text text +-------+ > text text text text text text text text text text text text text > ... > > but I am unable to put an image towards the bottom left or bottom > right and have the text wrap and finish with the bottom of the text > and the bottom of the image matching. Is this possible using legal > css? Yes. > [...] > Any pointers would be appreciated, thanks. <http://www.w3.org/TR/CSS21/visuren.html#propdef-position> PointedEars
From: jeff on 25 Feb 2010 11:51 Neil Cherry wrote: > I'm afraid I can't quite wrap my head around this topic (pun > intended). I've been able to put an image to the top left or top > right and have the text of a long paragraph wrap around the image. > > Example: > > A start of the text text text text text text text text +-------+ > text text text text text text text text text text text | | > text text text text text text text text text text text | Image | > text text text text text text text text text text text | | > text text text text text text text text text text text +-------+ > text text text text text text text text text text text text text > ... > > but I am unable to put an image towards the bottom left or bottom > right and have the text wrap and finish with the bottom of the text > and the bottom of the image matching. Is this possible using legal > css? > > Example: > > ... > text text text text text text text text text text text text text > text text text text text text text text text text text +-------+ > text text text text text text text text text text text | | > text text text text text text text text text text text | Image | > text text text text text text text text text text text | | > text text text text text text text text text text end. +-------+ > > Any pointers would be appreciated, thanks. inline-block. vertical-align: bottom <p style="display: inline-block;vertical-align: bottom; width: 200px;"> text here ....</p> <img style="display: inline-block;vertical-align: bottom; ... Google IE6 and inline-block to get around IE6. I think IE7 is OK. Inline block is the most powerful tool that is neglected. Jeff >
From: Ben C on 25 Feb 2010 11:59
On 2010-02-25, Thomas 'PointedEars' Lahn <PointedEars(a)web.de> wrote: > Neil Cherry wrote: > >> [...] I've been able to put an image to the top left or top >> right and have the text of a long paragraph wrap around the image. >> >> Example: >> >> A start of the text text text text text text text text +-------+ >> text text text text text text text text text text text | | >> text text text text text text text text text text text | Image | >> text text text text text text text text text text text | | >> text text text text text text text text text text text +-------+ >> text text text text text text text text text text text text text >> ... >> >> but I am unable to put an image towards the bottom left or bottom >> right and have the text wrap and finish with the bottom of the text >> and the bottom of the image matching. Is this possible using legal >> css? > > Yes. How? >> [...] >> Any pointers would be appreciated, thanks. > ><http://www.w3.org/TR/CSS21/visuren.html#propdef-position> You can absolutely position the image and put it in the desired place, but if you do, it won't be a float any more and the text won't flow around it. |