SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question how to cover the area below a picture with text

    hey all. how can i make text flow/fill up the space below an image which is 100*100 coz typically in tables the col in which image is empty and the text is in 2nd col. just take a example of any text and images site like bbc. where the image end the paragraph that was coming parrallel to pic spread to this end of pic.
    All those who wander aren't lost.

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    use a background image

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by eruna View Post
    use a background image
    wht will i do with background image...
    All those who wander aren't lost.

  4. #4
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    can you provide an example of what you are trying to do?

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well take this example http://www.sitepoint.com/blogs/2009/...ing-deadlines/ the text parallel to the picture is according to the width of picture but as soon as the picture end the paragraph ends. the text take up all the place beneath the picture area. that what i am asking. hope u got it
    All those who wander aren't lost.

  6. #6
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    is this the kind of thing you mean?: http://www.tizag.com/cssT/float.php

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or maybe try this one - without floating:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Image in text</title>
    </head>
    <body>
    
    <p><img src="images/sample.gif" width="100" height="200" alt="image here" align="left" vspace="5" hspace="5">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    
    </body>
    </html>
    A huge list of resources for designers and content producers
    to buy, sell or share stock photo images and other content.

  8. #8
    SitePoint Enthusiast CKEANEDesign's Avatar
    Join Date
    Mar 2009
    Location
    Chicago, IL
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your example CSS is being used. The img tag nested inside of a paragraph tag will put images to the right of blocks of text.

    If you want to learn the specifics of that, the CSS forum is very helpful

  9. #9
    SitePoint Guru silver trophy JamesColin's Avatar
    Join Date
    May 2009
    Location
    Jomtien, Pattaya, Thailand
    Posts
    910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the easiest is to use style="float:left" on the img tag and put the image before the text, I think that will do it crudly.
    Otherwise I always do a div style="float:left;margin-right: 4px;bottom-margin: 2px;" and then I put the img in the div (and I clode the div after of course)
    and then after comes the text.
    Do you really need traffic? Where to? What for?
    If you really do need traffic then stop messing around!
    Advertise on my sites today: She Told Me & Best Reviewer :
    200,000+ UV / Month


Bookmarks

Posting Permissions

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