images and text
in [CSS]
|
From: Nick Theodorakis on 31 Mar 2008 09:55 On Mar 31, 8:06 am, Jeff <jeff(a)spam_me_not.com> wrote: > I'm rewriting some of my CMS code. > > It's very common to have a block of text with an image. > > This can be done this way: > > <p><img...>enough text to flow past the image... > </p> > > or this way: > > <div> > <img ...> > <p>enough text to flow past the image...</p> > </div> > > Now, if we set widths and float the image either left or right, they > will appear identical. I suppose you could also set image align > properties, although I seldom use most of the alignments for this. > > Method two allows for a no text wrap, perhaps that's useful. > > Any thoughts on handling images? > ISTM that it depends on the logical relationship between the text and the image. Is the text a caption? Or is the image just tangentially related to the text? Could the image be logically considered part of the paragraph? Nick -- Nick Theodorakis nick_theodorakis(a)hotmail.com contact form: http://theodorakis.net/contact.html
From: Ben C on 31 Mar 2008 10:40 On 2008-03-31, Jeff <jeff(a)spam_me_not.com> wrote: > I'm rewriting some of my CMS code. > > It's very common to have a block of text with an image. > > This can be done this way: > ><p><img...>enough text to flow past the image... ></p> > > or this way: > ><div> ><img ...> ><p>enough text to flow past the image...</p> ></div> > > Now, if we set widths and float the image either left or right, they > will appear identical. I suppose you could also set image align > properties, although I seldom use most of the alignments for this. They're deprecated and browsers just turn them into float anyway. > Method two allows for a no text wrap, perhaps that's useful. > > Any thoughts on handling images? I prefer the first of your two examples. The second example is a bit counterintuitive because the position of the float may depend on the top margin of the <p> depending on whether that top margin collapses with the top margin of the element containing the float. In other words, if the <div> has no top border or padding: <div> <img> <p> </div> looks the same as <div> <p> <img> </div> But give the div top border or padding and in the first case the top of the img moves up. I'm assuming <p> has some top margin. This is also tricky enough that I'm sure some browsers get it wrong. Presumably you want the float aligned with the top of the <p> and the second approach guarantees that.
From: Jeff on 31 Mar 2008 19:26 Ben C wrote: > On 2008-03-31, Jeff <jeff(a)spam_me_not.com> wrote: >> I'm rewriting some of my CMS code. >> >> It's very common to have a block of text with an image. >> >> This can be done this way: >> >> <p><img...>enough text to flow past the image... >> </p> >> >> or this way: >> >> <div> >> <img ...> >> <p>enough text to flow past the image...</p> >> </div> >> >> Now, if we set widths and float the image either left or right, they >> will appear identical. I suppose you could also set image align >> properties, although I seldom use most of the alignments for this. > > They're deprecated and browsers just turn them into float anyway. > >> Method two allows for a no text wrap, perhaps that's useful. >> >> Any thoughts on handling images? > > I prefer the first of your two examples. The second example is a bit > counterintuitive because the position of the float may depend on the top > margin of the <p> depending on whether that top margin collapses with > the top margin of the element containing the float. > > In other words, if the <div> has no top border or padding: > > <div> > <img> > <p> > </div> > > looks the same as > > <div> > <p> > <img> > </div> > > But give the div top border or padding and in the first case the top of > the img moves up. I'm assuming <p> has some top margin. > That's an interesting point. IE6 and Moz 2.0 don't, but Safari 3.04 does. > This is also tricky enough that I'm sure some browsers get it wrong. > > Presumably you want the float aligned with the top of the <p> and the > second approach guarantees that. Safari (windows) completely screws up the first example. It starts the paragraph at the bottom of the image. I did not expect that. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <div style="border: 1px solid black;width: 300px"> <p style="width: 300px"><img style="border:1px solid black" src="some_image.jpg" style="float: left">Soil Enhancer Samples are packaged in 1/2 cubic foot containers. They are designed to enhance potting soils for container gardens, flowers beds and hanging baskets. Try your sample .</p> </div> Dorayme, you don't get that on your Mac do you? You get the text starting at the top of the image rather than the bottom? I wonder how popular Safari windows is? I'm thinking it has some issues... Ultimately what I want is to to style the image, top, left, right, ??? with just CSS and not changing the html. I've been experimenting with a standard module format for blocks of html that also lets you add curved borders, drop shadows, corner effects. I'm not sure there is really any meaning behind a div aside from what you give it. And that structure is largely for your own purposes, such as designating a div with an id="navigation". I don't think search engines care and I don't know if aural browsers. Jeff
From: dorayme on 31 Mar 2008 21:04 In article <JsmdnaO3IfCp7mzanZ2dnUVZ_qCunZ2d(a)earthlink.com>, Jeff <jeff(a)spam_me_not.com> wrote: > Safari (windows) completely screws up the first example. It starts > the paragraph at the bottom of the image. I did not expect that. > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" > "http://www.w3.org/TR/REC-html40/strict.dtd"> > > <div style="border: 1px solid black;width: 300px"> > <p style="width: 300px"><img style="border:1px solid black" > src="some_image.jpg" style="float: left">Soil Enhancer Samples are > packaged in 1/2 cubic foot containers. They are designed to enhance > potting soils for container gardens, flowers beds and hanging baskets. > Try your sample .</p> > </div> > > Dorayme, you don't get that on your Mac do you? You get the text > starting at the top of the image rather than the bottom? You must distinguish between an inline image and one that is floated. See what happens when you change your img style="border:1px solid black;" ... to img style="border:1px solid black;float left" ... I am pretty sure I had examples of the different effects in <http://netweaver.com.au/floatHouse/> I think on page 2. You might see that some of your puzzles over Safari disappear when you make this distinction. -- dorayme
|
Pages: 1 Prev: padding-left, padding-right.. Next: Strange(?) behavior with styled links |