SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floated Images Rise Above Text

    I'm working on an article that includes several images floated to the left or right, something like this...

    Code:
    <p id="1">Text</p>
    <div style="float: right;">(IMAGE 1)</div>
    <p id="2">Text</p>
    <p id="3">Text</p>
    <div style="float: left;">(IMAGE 2)</div>
    <p id="4">Text</p>
    It works fine, except the images seem to ride too high, creating an extra gap between my paragraphs. For example, the code above would produce a display that looks something like this:

    Code:
    <p id="1">
    
    <p id="2">(Image 1 protrudes 2 or 3 lines above second paragraph)
    <p id="3">
    
    <p id="4">(Image 2 protrudes 2 or 3 lines above fourth paragraph)
    ...rather than this:

    Code:
    <p id="1">
    <p id="2">(Top of Image 1 should be flush with top of second paragraph)
    <p id="3">
    <p id="4">(Top of Image 2 should be flush with top of fourth paragraph)
    I thought floats were supposed to up content to about the same level, but I can't find anything in my style sheet that's creating this extra gap. Is there some sort of style I can use to balance things out?

    Thanks.

  2. #2
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's probably default margin/padding on the <p> tag itself that may be causing the extra space. Play with margin setting on the <p> and see if that makes a difference.

    Nadia

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't need the image in the div to do what your after.

    Just stick the image directly between the paragraph tags at the start and using CSS apply the float to it there. You can also apply margin to the image to create space around it so that the text isn't budged right up to it

  4. #4
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    You shouldn't need the image in the div to do what your after.

    Just stick the image directly between the paragraph tags at the start and using CSS apply the float to it there. You can also apply margin to the image to create space around it so that the text isn't budged right up to it
    Thanks; that does help. Also, I discovered a couple dumb mistakes I made.

    Just one problem - my floated images now destroy the paragraph indent for some reason. Can anyone see an obvious problem in the html below?:

    Code:
    <p id="8"><span style="width:150px; border-bottom: 1px solid #000;" class="fright">
    <a href="/imagesGS/Topics/Vex/Flags/world/eur/svg/fra.svg" title="Click to see a bigger picture"><img src="/imagesGS/Topics/Vex/Flags/world/eur/150/fra.png" width="150" height="100" class="img" alt="The French Tricolor"></a>
    <span style="text-align: center"><span style="color: #f00; font-size: 125%;"><strong>WARNING!</strong></span>&nbsp;&nbsp;<img src="/images/aids/imgBig.gif" width="14" style="position: relative; top: 2px; right 2px;" alt="Click the image above to see a bigger picture.">The French tricolor</span></span>Many mottoes are tripartite...</p>
    Below is what it would look like if I inserted line breaks:

    Code:
    <p id="8">
    <span style="width:150px; border-bottom: 1px solid #000;" class="fright">
    <a href="/imagesGS/Topics/Vex/Flags/world/eur/svg/fra.svg" title="Click to see a bigger picture"><img src="/imagesGS/Topics/Vex/Flags/world/eur/150/fra.png" width="150" height="100" class="img" alt="The French Tricolor"></a>
      <span style="text-align: center">
        <span style="color: #f00; font-size:    125%;"><strong>WARNING!</strong>
        </span>
    &nbsp;&nbsp;
    <img src="/images/aids/imgBig.gif" width="14" style="position: relative; top: 2px; right 2px;" alt="Click the image above to see a bigger picture.">The French tricolor
      </span>
    </span>
    Many mottoes are tripartite...</p>
    I'm using a fairly complex PHP script to display images if they exist, automatically inserting the width and height and the proper styling. The inner most span warns me if an image isn't ready to be published online for some reason.

    It's kind of complex, but I don't understand why it would zap my paragraph indent.

    Thanks.

  5. #5
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    P.S. For whatever it's worth, this is what it looks like in my database table:

    Code:
    <p>$Img2RMany mottoes are tripartite...</p>
    I simply use a str_replace function to replace the text $Img2R with the variable $Img2R - the second image on this page, floated to the (R)ight.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have external css associated with this? You're applying some classes and ID's but I've no idea what styling your applying to them?

    Personally I wouldn't use text-indent on a paragraph. Just use padding on whichever sides of the paragraph you require it on and that should sort it.

    Hope that helps?

  7. #7
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I just learned a few things about spans. I can preserve the paragraph indent of I leave a space on either side of the outer span, like this...

    Code:
    <p> <span style="float: right;">IMAGE</span> First word...
    BUT the floated image sucks the bordering text up ABOVE IT; the first line of text floats across the image.

    I suspect that might be fixed by omitting the first space - between the <p> tag an the floated span. However, I never got around to testing it because I discovered that I can place the floated span outside the paragraph tag after all...

    Code:
    <span style="float: right;">IMAGE</span>
    <p>Paragraph</p>
    It doesn't work with div's, for obvious reasons, but spans seem to work just fine. Thanks for the tips.


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
  •