images and text
in [CSS]
|
Prev: Img - bottom margin mystery
Next: Png fix not working
From: Jeff on 31 Mar 2008 08:06 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? Jeff
From: dorayme on 31 Mar 2008 13:13 In article <13v1ktgdkp85l43(a)corp.supernews.com>, 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? > > Jeff It depend on the context. If you are simply essaying and are wanting to include illustrations that are referred to or not in the text, straightforward is best as in the first of your examples. Here is something from way back: <http://netweaver.com.au/alt/floatleftFloatright.html> or <http://tinyurl.com/yvgn8g> You have good control over the image via the padding, you can alter the top padding if you want but simple all round of about .5em looks fine mostly. -- dorayme
From: Jeff on 31 Mar 2008 23:11 dorayme wrote: > 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" ... You are right, my error. If you look at what I wrote, I had *two* style tags and had the float in the second. Safari ignores the second. I had made the same mistake earlier, and hadn't cleared it up. So much for a quick test with inline style... Jeff > > 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. >
From: dorayme on 1 Apr 2008 00:52 In article <dPudneicsZNDOmzanZ2dnUVZ_saknZ2d(a)earthlink.com>, Jeff <jeff(a)spam_me_not.com> wrote: > dorayme wrote: > > 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" ... > > You are right, my error. If you look at what I wrote, I had *two* style > tags and had the float in the second. Safari ignores the second. I had > made the same mistake earlier, and hadn't cleared it up. So much for a > quick test with inline style... If you supply a url of anything you want testing on a Mac on Safari 2, I can help you. I think you were saying some floated style was buggered up in Safari? -- dorayme
From: Jeff on 1 Apr 2008 00:17
dorayme wrote: > In article <dPudneicsZNDOmzanZ2dnUVZ_saknZ2d(a)earthlink.com>, > Jeff <jeff(a)spam_me_not.com> wrote: > >> dorayme wrote: >>> 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" ... >> You are right, my error. If you look at what I wrote, I had *two* style >> tags and had the float in the second. Safari ignores the second. I had >> made the same mistake earlier, and hadn't cleared it up. So much for a >> quick test with inline style... > > > If you supply a url of anything you want testing on a Mac on Safari 2, I > can help you. I think you were saying some floated style was buggered up > in Safari? Thanks, But here is what I wrote: <img style="border:1px solid black" src="some_image.jpg" style="float: left"> ^^^ style tag one^^^^^ ^^^ style two ^^ It's easy to miss! Still dumb on my part though! Jeff > |