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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image and Text side by side

    I have an image and text side by side. I alighned the image to the left and thats fine. How do I get a bit of space between the image and text. The text is on the right side of the image but tight.

    Code:
    <p><strong><img src="awards2012photo's/Representatives of Adventure Playground at the Forks.png" width="329" height="270" align="left" alt="Parks Canada" /></strong></p>
          <p align="right"><strong>Parks Canada<br />
            Variety The Children’s Charity<br />
            Adventure Playground at the Forks</strong><br />
            Monica Giesbrecht<br />
            Hilderman Frank Thomas Cram Landscape Architects<br />
            Parks Canada.<br />
            Dick Penner J&amp;D Penner Ltd<br />
            Ken Crozier Crozier Enterprises</p>      
          <br>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Google css
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'm sure it's not a css thing. i did it along time ago. it has to do with the html.

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    CSS would be the easiest way. Assign the image a class name (like "leftImage") and then assign it a style of margin-right: 10px;

    This CAN be done with pure html, by using tables, or by adding non-breaking character spaces (&nbsp, but CSS is a much easier way to go.

    If you only have the one image you want to be like this, you can do an inline style, <img src="" style="margin-right:10px"
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Hello charisma44,
    The html align attribute is depricated and should not be used.

    Instead, float your image and the text wraps around it. You can then use margins to make space between them. Look at a simple float tutorial here.
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by charisma44 View Post
    i'm sure it's not a css thing. i did it along time ago. it has to do with the html.
    Html is presentation. CSS is styling. The space you want is definitely a CSS thing.
    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
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The image has to stay left. and can't wrap text around. Text needs to stay to the right.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by charisma44 View Post
    The image has to stay left. and can't wrap text around. Text needs to stay to the right.
    Float is what you want. Did you look at the tutorial I suggested?

    Sometimes, like when it's a caption or product description, it all needs wrapped in a containing element to keep things together. Look at this demo of how easy captions can be.
    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
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes. and still trying to figure it out. i tryed the css the way the other guy said and it didn't make it worse and didn't make it better. still reading.

  • #10
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok we got it now. Thanks alot.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    So, the snippet you posted... I'm not sure why you wrap an image in paragraph tags or why the strong tag too...

    "The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, and <var> tags are all phrase tags. They are not deprecated, but it is possible to achieve richer effect with CSS." See http://www.w3schools.com/tags/tag_phrase_elements.asp

    Either way, it's nothing to do with the image.


    Following my demo, look at it with floats instead, something like 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>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;	
    	padding: 200px 0 300px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;
    }
    .wide_wrapper {
    	width: 500px; /*adjust width to suit*/
    	margin: 50px 0 0 150px;
    	overflow: auto;
    	text-align: left;
    	border: 1px solid #F00;
    	font-size: 0.7em;
    }
    .wide_wrapper img {	
    	float: left; 
    	margin: 5px; /*adjust space to suit*/
    	background: #eee; 
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div class="wide_wrapper">
                <img src="awards2012photo's/Representatives of Adventure Playground at the Forks.png" width="329" height="270" alt="Parks Canada" /> 
                    <h3>Parks Canada</h3>
                        <p>  
                            Variety The Children’s Charity<br />
                            Adventure Playground at the Forks</strong><br />
                            Monica Giesbrecht<br />
                            Hilderman Frank Thomas Cram Landscape Architects<br />
                            Parks Canada.<br />
                            Dick Penner J&amp;D Penner Ltd<br />
                            Ken Crozier Crozier Enterprises</p>      
                        </p>
            <!--end wide_wrapper--></div>    
        <!--end container--></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

  • #12
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got the look I was going for. Tell me what you think

    http://www.aacwinnipeg.mb.ca/awards2.html


  •  

    Posting Permissions

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