1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Text under image

Discussion in 'CSS' started by DuneDreamer, Mar 20, 2014.

  1. #1
    I need to position text under image. The image is floated to the left and the text nicely wraps around it. I need to preserve the effect while doing so.

    This is the code for the image and the text:

    <p><img src="_images/plah.jpg"  width="211" height="300" alt="nyc"> By nature animals are born with the faculty of sensation, and from sensation memory is produced in some of them, though not in others. And therefore the former are more intelligent and apt at learning than those which cannot remember; those which are incapable of hearing sounds are intelligent though they cannot be taught, e.g. the bee, and any other race of animals that may be like it; and those which besides memory have this sense of hearing can be taught.
    </p>
    Code (markup):
    And these are the styles for the image and the text that wraps around it:

    img {
        float: left;
        margin: 0 1em 0 0;
    }
    p {
        font-size: 1em;
        line-height: 1.5;
        margin-bottom: 1em;
    }
    Code (markup):
     
    DuneDreamer, Mar 20, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    First, what makes the image part of the paragraph? Second, do you want the float behavior or not? WHAT text do you want under it? the text wrapping around it? If so what do you mean by "preserve the effect"?!? Not sure what you're even asking there.

    Do you mean you have MORE text you need to add that goes under the image? Something like...

    <div class="leadingPlate">
    	<img src="_images/plah.jpg"  width="211" height="300" alt="nyc" />
    	Your New Text
    </div>
    <p>
    	By nature animals are born with the faculty of sensation, and from sensation memory is produced in some of them, though not in others. And therefore the former are more intelligent and apt at learning than those which cannot remember; those which are incapable of hearing sounds are intelligent though they cannot be taught, e.g. the bee, and any other race of animals that may be like it; and those which besides memory have this sense of hearing can be taught.
    </p>
    Code (markup):
    /* Assumes a reset is in use */
    
    .leadingPlate {
    	float:left;
    	padding:0 1em 1em 0; /* padding instead of margin means no collapse headaches */
    	text-align:center; /* center that 'new text' part to the image */
    }
    
    .leadingPlate img {
    	display:block; /* prevents alignment oddities */
    }
    Code (markup):
    Guessing a bit, not entirely certain that's what you're asking for.
     
    deathshadow, Mar 20, 2014 IP
    DuneDreamer likes this.
  3. DuneDreamer

    DuneDreamer Well-Known Member

    Messages:
    363
    Likes Received:
    213
    Best Answers:
    0
    Trophy Points:
    135
    #3
    Thank you, deathshadow. Your code certainly accomplishes the task. The only downside to your suggestion is that I will have to rewrite the code of the page, which won't be a difficult task anyway. I was just wondering if there is a way to preserve the original code and yet add some text below the picture (any text). Your suggestion is perhaps the easiest way to deal with the task. Maybe I was over-complicating matters. :)

    Edit: The text below the picture is a description of the picture.
     
    DuneDreamer, Mar 20, 2014 IP
  4. Hafiz Kashif Asif

    Hafiz Kashif Asif Active Member

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #4
    I think @deathshadow has replied what you are looking for.
     
    Last edited: Mar 25, 2014
    Hafiz Kashif Asif, Mar 25, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    @Hafiz Kashif Asif, he still wants the whole thing (image + new text) floating -- you missed what he's asking for.
     
    deathshadow, Mar 25, 2014 IP