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 6 of 6

Thread: Image Alignment

  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    364
    Thanks
    7
    Thanked 1 Time in 1 Post

    Question Image Alignment

    I want my text aligned left to the image & I dont the text go beneath the image. It should go down straight. I dont wanna use 2 cells for this. How can I do this? ? ?

  • #2
    Regular Coder Masterslave's Avatar
    Join Date
    Dec 2005
    Posts
    287
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <img src="dummi.jpg" alt="Dummi" style="float: left;"/>
    This is text this is text this is text

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    364
    Thanks
    7
    Thanked 1 Time in 1 Post
    No, its not working. It places the text below image while I need the text right to the image. My image is 8x4 in size (a bullet) & the test is a whole story of a big paragraph. I wanna align the whole paragraph to Right. The text should not go below the bullet.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Arbitrator (self)
    I actually stumbled onto a way of doing this dynamically using CSS's text-indent property: text-indent the link with a negative value equal to the distance you want to indent subsequent lines; then add padding of the same value except positive.

    For the first line of text these two properties will cancel each other out; additional lines will automatically be indented at the specified value.

    Source: http://forums.dreamincode.net/index....5&#entry153834
    I modified this a little bit to compensate for the image. Here's a working example below:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html lang="en-us">
    <head>
    
    <!-- This Page Is Valid XHTML 1.0 Strict! -->
    
    <meta http-equiv="content-type" content="text/html; charset = utf-8"/>
    
    <title>test009b</title>
    
    <style type="text/css">
    p {
      padding-left: 45px; /* 40px (image width) + 5px (image padding) */
      text-indent: -45px; /* -40px (image width) + -5px (image padding) */
      text-align: justify;
      }
    img.bullet {
      width: 40px;
      height: 25px;
      padding-right: 5px;
      }
    </style>
    
    </head>
    <body>
    
    <p><img class="bullet" alt="Frying Pan Emoticon" title="Paragraph Bullet" src="http://i10.photobucket.com/albums/a117/PLGaries/Icons/fryingpan7aa.gif"/>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 justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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 justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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 justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    
    </body>
    </html>
    Last edited by Arbitrator; 05-05-2006 at 01:26 PM. Reason: minor code revision
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    311
    Thanks
    1
    Thanked 35 Times in 35 Posts
    Wouldn't it be easier and use less code to place the text in a div and float the div alongside the image?
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Donkey
    Wouldn't it be easier and use less code to place the text in a div and float the div alongside the image?
    Don't let all the extra information fool you. All my code really is is text-indent and padding-left; I don't see what's so hard about that. If you used multiple paragraphs, the multiple div would add up to more code. Not only that but if you wanted to change the behavior to say a floated image with wrapping text, you would have to go back and remove all the div tags.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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