Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Arranging images with text

    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

    Code:
    <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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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?
    Edit: Wait, Excavator tried that. Well, I don't know...

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by CyanLight View Post
    Edit: 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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

    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.

    Code:
    <!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
    Last edited by effpeetee; 11-30-2008 at 04:20 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Thought you might have had it there Frank but I guess not. Have a look at this:
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 11-30-2008 at 06:40 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by effpeetee View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Yes. I really didn't (don't) understand what exactly is wanted.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by eHaloCreative View Post
    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.)

    Code:
    <!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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Arg! I can't believe I didn't think of that!

    Good on you Arbitrator!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •