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 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help to position image correctly within text.

    Hi,

    Would anyone be able to tell me the correct/best way to position an image within a block of text, so that the text flows around the right of the image? ... do I need to define a styled DIV that contains the image?

    http://www.diminishingfish.com/james/news.html
    http://www.diminishingfish.com/james/layout1.css

    Here's what I have. It seems to work in Mac Safari, but the text to right of the image gets pushed out of my middle column (div id=content) - and also it seems to affect my background image, cutting it off....And while I'm at it....how can I position my image so that it lines up with the text to the left, but has, say, a 10px gap to the right?

    Also, I'd like to position a bit of text aligned centrally under the image. How's that done?

    Am a newbie with CSS. Confusion currently reigning....

    Thanks,
    Andrew.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hey there,

    Did you get it fixed? I just checked the site and it looks fine (on both FF and Safari on OSX)...

    Just in case, I'd recommend floats for this. That's exactly what they were made for-- aligning text around images. They can be a bit tricky at first but once you get the hang of them you can use them for damn near everything.

    Here's a pretty good tutorial on the subject: http://css.maxdesign.com.au/floatutorial/

    Hope it helps,

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers Richard. Just found Floatutorial. Just the ticket. But I wonder if you can help. Here's what I have:
    http://www.diminishingfish.com/james/news.html
    http://www.diminishingfish.com/james/layout1.css

    Ok, but I'd like to center and wrap the caption underneath the image, and have the main text of the article flow down the left hand side of the image. Can't seem to make it so....

    Any ideas...?

    Ta.

    Andrew.

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops. I mean I'd like the text to flow down the righthand side of the image....

    A.

  • #5
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh, just as a completely irrelevant aside - I live in Hyndburn - in sunny Accy no less

    Small world

  • #6
    New Coder
    Join Date
    Feb 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey! Great Stuff!
    I don't ... but James does ... in Sunny Rishton....

    Andrew.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You could wrap the image and caption in a div and float that...

    Code:
    <div class="photos">
     <img src="photo.jpg" alt="glorious photo" />
     <p>A glorious photo showcasing remarkable photographic skill.</p>
    </div>
    
    .photos {
     float: left;
     padding: 5px;
     width: auto;
     text-align: center;
     }
    It should work... you could also markup photos in a definition list although that might be a little overkill for one or two photos on a page.


  •  

    Posting Permissions

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