...

View Full Version : Arranging images with text



eHaloCreative
11-29-2008, 01:24 AM
I have a number of small icon like images that I need to appear after a paragraph of text. The problem I need them all to appear on the same line, together. So if the text ends towards the end of the line, all the images would need to wrap around to the next line, but if there is space on the last line of text they would appear on that line. I've tried to put all the icons in a container like a div, but that always forces them to the next line, and I'm pretty sure putting a div inside of a paragraph tag isn't allowed. I still think placing all the icons inside of some sort of container is the answer. I would just do this manually for each paragraph, but different browsers render the text differently, so while you might have room in FF/IE, you do not have room in Safari. This is pretty difficult to describe, but if you take a look at the link it should help.

Here is the code in question


<p class="maintext">
<span style="font-weight: bold;">MCS Floor Scrub</span>
A powdered, ready-to-use, non-caustic concrete floor cleaner which
effectively removes grease and oil. Perfect for lube bay and mechanic
shops; pH = 12; recommended dilution = none.
<img style="padding: 0pt 1px; float: none;" src="images/icon-i.gif" alt="">
<img style="padding: 0pt 1px; float: none;" src="images/icon-l.gif" alt="">
<img style="padding: 0pt 5px 0pt 1px; float: none;" src="images/icon-m.gif" alt="">
<img style="padding: 0pt 1px; float: none;" src="images/icon-50.gif" alt="">
<img style="padding: 0pt 1px; float: none;" src="images/icon-400.gif" alt="">
</p>

And a direct link:
http://www.ecodzign.com/prowash/industrial-chemicals.php (http://www.ecodzign.com/prowash/industrial-chemicals.php?p=3descalers#a3descalers)

Excavator
11-29-2008, 02:37 AM
Hello eHaloCreative,
I've been playing around with this a bit and now I've run out of time....
I tried floating everything, wrapping the images in and out of the <p> tags... I think your right about the images needing to be in a container so they are right now.

anyway, this might make it easier for others to play around with too -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
text-align: left;
font: 100% "Comic Sans MS";
color: #333333;
text-decoration: none;
background: #99FFFF;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
overflow: auto;
width: 600px;
margin: 0 auto;
background: #ccc;
}
.icons {
width: 190px;
height: 20px;
float: left;
background: #9F0;
}
.icons img {
padding: 0 1px 0 1px;
}
p {
background: #CC6;
}
</style>
</head>
<body>
<div id="wrap">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
<div class="icons">
<img src="http://www.ecodzign.com/prowash/images/icon-d.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-i.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-l.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-m.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-1.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-6.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-30.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-55.gif" width="14" height="16" alt=''/>
<!--end icons--></div>
</p>
<!--end wrap--></div>
</body>
</html>

Apostropartheid
11-29-2008, 11:05 PM
Honestly, if I were you, I'd avoid all the fuss and make them line break and right align them so they're consistant. But, if you really have to have it this way, have you tried floating a div container?
Wait, Excavator tried that. Well, I don't know...

Excavator
11-30-2008, 12:26 AM
Wait, Excavator tried that. Well, I don't know...


I know... you can float it right and wrap text around it but I can't seem to get it to come at the end of the text. Margin it down but if you have more text then it wraps again...

effpeetee
11-30-2008, 04:02 PM
I must admit that I don't really understand your need, but it doesn't cost me anything to show you this.

One of my stock. (http://exitfegs.co.uk/Picchoosea.html)

It is done with the SPAN tag which I believe is an "inline" tag. It was written for me by a member of this forum some time ago.


<!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>Picture Menu 1</title>
<style type="text/css">

* { margin: 0;
padding: 0; }

html, body {
margin-top: 10px;
padding: 0px;
display: inline-block;
background-color: #CCCCCC;
color:white; }

.wrapper {
text-align: center;
background-color: #cccccc;
color:white;
margin-top:20px; }

.wrapper p {
display: inline;
font-size: 70% }

.wrapper span {
margin: .5em;
vertical-align: bottom;
width: 120px;
height: 100px;
display: table-cell;
display: inline-block; }

.wrapper p span {
vertical-align:top; }

.wrapper p img {
margin-bottom: 0px;
border: none;
margin-top: 0px;
}
.wrapper a {
text-decoration: none;
color: #000; }
</style>
</head>

<body>
<a href="index.html"><img src="home.jpg" alt="Home page." width="85" height="42"></a>
<div class="wrapper">

<p><span><a href="firstb.html"><img src="First.jpg" alt="0"
width="100" height="80" /><br />
Steve at Mapperton.</a></span></p>

<p><span><a href="1a.html"><img src="steve6a.jpg" alt="1"
width="100" height="80"><br>
Steve, relaxing on the 'Bluebell Railway.</a></span></p>

<p><span><a href="2b.html"><img src="1a.jpg" alt="1" width="100" height="80" ><br>
Mark and Steven</a></span></p>

<p><span><a href="3b.html"><img src="2a.jpg" alt="2" width="100" height="80" ><br>
In the gardens at Mapperton.</a></span></p>

<p><span><a href="4b.html"><img src="3a.jpg" alt="3" width="100" height="80" ><br>
The front of Mapperton House.</a></span></p>

<p><span><a href="5b.html"><img src="4a.jpg" alt="4" width="100" height="80" ><br>
Higher Came farm.</a></span></p>

<p><span><a href="6b.html"><img src="5a.jpg" alt="5" width="100" height="80" ><br>
Another view in Mapperton.</a></span></p>

<p><span><a href="7b.html"><img src="6a.jpg" alt="6" width="100" height="80" ><br>
A lawn at Mapperton.</a></span></p>

<p><span><a href="8b.html"><img src="7a.jpg" alt="7" width="100" height="80" ><br>
A bridge in Japan.</a></span></p>

<p><span><a href="9b.html"><img src="8a.jpg" alt="8" width="100" height="80" ><br>
Just a country road.</a></span></p>

<p><span><a href="10b.html"><img src="9a.jpg" alt="9" width="100" height="80" ><br>
In the gardens at Mapperton</a></span></p>

<p><span><a href="11b.html"><img src="10a.jpg" alt="10" width="100" height="80"><br>
The "coat hanger" A bridge in Sydney.</a></span></p>

<p><span><a href="12b.html"><img src="11a.jpg" alt="11" width="100" height="80" ><br>
Mapperton, a stately home in Dorset.</a></span></p>

<p><span><a href="13b.html"><img src="12a.jpg" alt="12" width="100" height="80" ><br>
In side St. Nicholas Church - Moreton.</a></span></p>

<p><span><a href="14b.html"><img src="13a.jpg" alt="13" width="100" height="80" ><br>
The "bell" hotel at Alresford.</a></span></p>

<p><span><a href="15b.html"><img src="14a.jpg" alt="14" width="100" height="80" ><br>
Horsted Keynes Station on the Bluebell Line.</a></span></p>

<p><span><a href="16b.html"><img src="15a.jpg" alt="" width="100" height="80" ><br>
Higher came farmhouse.</a></span></p>

<p><span><a href="17b.html"><img src="16a.jpg" alt=" " width="100" height="80" ><br>
The sea front at Swanage.</a></span></p>

<p><span><a href="18b.html"><img src="17a.jpg" alt="" width="100" height="80" ><br>
Horsted Keynes Station on the Bluebell Line.</a></span></p>

<p><span><a href="19b.html"><img src="18a.jpg" alt="" width="100" height="80" ><br>
Steven Mum and Betty.</a></span></p>

<p><span><a href="20b.html"><img src="19a.jpg" alt="" width="100" height="80" ><br>
We should have turned left at the crossroads.</a></span></p>

<p><span><a href="21b.html"><img src="20a.jpg" alt=" " width="100" height="80" ><br>
Winchester Cathedral.</a></span></p>

<p><span><a href="22b.html"><img src="21a.jpg" alt="" width="100" height="80" ><br>
Caution - Road Up! - Weymouth 2005.</a></span></p>

<p><span><a href="23b.html"><img src="22a.jpg" alt="" width="100" height="80" ><br>
This way for "higher came" farmhouse.</a></span></p>

<p><span><a href="24b.html"><img src="23a.jpg" alt="" width="100" height="80"><br>
Topiary at Mapperton in Dorset.</a></span></p>

<p><span><a href="25b.html"><img src="24a.jpg" alt=" " width="100" height="80"><br>
'Footsteps' guest house in the Welsh Marches.</a></span></p>

<p><span><a href="26b.html"><img src="25a.jpg" alt="" width="100" height="80"><br>
A lovely country road in Dorset.</a></span></p>

<p><span><a href="27b.html"><img src="26a.jpg" alt="" width="100" height="80"><br>
A view from the tower at Salisbury Cathedral.</a></span></p>

<p><span><a href="28b.html"><img src="27a.jpg" alt="" width="100" height="80"><br>
'Books Afloat' - A favourite venue for Steve and
Mark.</a></span></p>

<p><span><a href="29b.html"><img src="28a.jpg" alt=" " width="100" height="80"><br>
Mark and Steven at the museum of the Tolpuddle
Martyrs.</a></span></p>

<p><span><a href="30b.html"><img src="29a.jpg" alt="" width="100" height="80"><br>
A view from the "london eye"</a></span></p>

<p><span><a href="31b.html"><img src="30a.jpg" alt="" width="100" height="80"><br>
A pond at Mapperton, a stately home in Dorset.</a></span></p>

<p><span><a href="32b.html"><img src="31a.jpg" alt="" width="100" height="80"><br>
A view from the "footsteps" guest house.</a></span></p>

<p><span><a href="33b.html"><img src="32a.jpg" alt=" " width="100" height="80"><br>
Devils Bridge Station - in Wales.</a></span></p>

<p><span><a href="34b.html"><img src="33a.jpg" alt="" width="100" height="80"><br>
On the Welsh Highland Railway at Waunfawr.</a></span></p>

<p><span><a href="35b.html"><img src="34a.jpg" alt="" width="100" height="80"><br>
Messing about in boats.</a></span></p>

<p><span><a href="36b.html"><img src="35a.jpg" alt="" width="100" height="80"><br>
Llanfair station - Welsh Highland Rlwy.</a></span></p>

<p><span><a href="37b.html"><img src="36a.jpg" alt=" " width="100" height="80"><br>
Alresford railway station on the Watercress
line.</a></span></p>

<p><span><a href="38b.html"><img src="37a.jpg" alt="" width="100" height="80"><br>
Horsted Keynes station on the Bluebell line.</a></span></p>

<p><span><a href="39b.html"><img src="38a.jpg" alt="" width="100" height="80"><br>
A very weedy stream in 'Mapperton' in Dorset.</a></span></p>
</div>
<img src="First.jpg" style="display: none">
<img src="Steve6a.jpg" style="display: none">
<img src="1a.jpg" style="display: none">
<img src="2a.jpg" style="display: none">
<img src="3a.jpg" style="display: none">
<img src="4a.jpg" style="display: none">
<img src="5a.jpg" style="display: none">
<img src="6a.jpg" style="display: none">
<img src="7a.jpg" style="display: none">
<img src="8a.jpg" style="display: none">
<img src="9a.jpg" style="display: none">
<img src="10a.jpg" style="display: none">
<img src="11a.jpg" style="display: none">
<img src="12a.jpg" style="display: none">
<img src="13a.jpg" style="display: none">
<img src="14a.jpg" style="display: none">
<img src="15a.jpg" style="display: none">
<img src="16a.jpg" style="display: none">
<img src="17a.jpg" style="display: none">
<img src="18a.jpg" style="display: none">
<img src="19a.jpg" style="display: none">
<img src="20a.jpg" style="display: none">
<img src="21a.jpg" style="display: none">
<img src="22a.jpg" style="display: none">
<img src="23a.jpg" style="display: none">
<img src="24a.jpg" style="display: none">
<img src="25a.jpg" style="display: none">
<img src="26a.jpg" style="display: none">
<img src="27a.jpg" style="display: none">
<img src="28a.jpg" style="display: none">
<img src="29a.jpg" style="display: none">
<img src="30a.jpg" style="display: none">
<img src="31a.jpg" style="display: none">
<img src="32a.jpg" style="display: none">
<img src="33a.jpg" style="display: none">
<img src="34a.jpg" style="display: none">
<img src="35a.jpg" style="display: none">
<img src="36a.jpg" style="display: none">
<img src="37a.jpg" style="display: none">
<img src="38a.jpg" style="display: none">

</body>
</html>


Frank

Excavator
11-30-2008, 04:49 PM
Thought you might have had it there Frank but I guess not. Have a look at this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
text-align: left;
font: 100% "Comic Sans MS";
color: #333333;
text-decoration: none;
background: #99FFFF;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
overflow: auto;
width: 600px;
margin: 0 auto;
background: #ccc;
}
.icons {
width: 190px;
}
.icons img {
padding: 0 1px 0 1px;
}
p {
background: #CC6;
}

</style>
</head>
<body>
<div id="wrap">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
<span class="icons">
<img src="http://www.ecodzign.com/prowash/images/icon-d.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-i.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-l.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-m.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-1.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-6.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-30.gif" width="14" height="16" alt=''/>
<img src="http://www.ecodzign.com/prowash/images/icon-55.gif" width="14" height="16" alt=''/>
<!--end icons--></span>
</p>
<!--end wrap--></div>
</body>
</html>

effpeetee
11-30-2008, 06:36 PM
Looks OK to me. Uses the SPAN tag also. But it does break up with larger images. I don't see that anything can be done about that.

Frank

Excavator
11-30-2008, 06:40 PM
Looks OK to me. Uses the SPAN tag also.

Frank

No, the OP wanted this:
So if the text ends towards the end of the line, all the images would need to wrap around to the next line, but if there is space on the last line of text they would appear on that line

Put more text in that example and watch where the images go.

effpeetee
11-30-2008, 09:19 PM
Yes. I really didn't (don't) understand what exactly is wanted.

Frank

Arbitrator
12-01-2008, 05:51 AM
I still think placing all the icons inside of some sort of container is the answer.Maybe this does the trick? (Substitute your own images.)


<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html lang="en-Latn">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo for CodingForums.com Thread 153240</title>
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
div { white-space: nowrap; }
</style>

</head>
<body>

<div>
<img alt="" width="150" height="150" src="article_a.png"
><img alt="" width="150" height="150" src="article_b.png"
><img alt="" width="150" height="150" src="article_c.png"
><img alt="" width="150" height="150" src="article_d.png">
</div>

</body>
</html>

Excavator
12-01-2008, 06:08 AM
Arg! I can't believe I didn't think of that!

Good on you Arbitrator!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum