SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,895
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image alignment.

    Hello,
    here is an image of the section of site I am working on:



    Below is the code for the Part:

    PHP Code:
    <div class="tab-page">
    <h2 class="tab">Intro</h2>

    <img src="img/headings/introduction.jpg" />
    <table>
    <tr>
    <td class="intro_table">
    <?php

    if ( $getresortdata['resort_photo'] == "") {
    echo 
    ""

    else { 
    echo 
    '<img src="'.$getresortdata['resort_photo'].'" class="photo" align="right" />'
    }

    echo 
    $getresortdata['resort_review'];

    if ( 
    $getresortdata['resort_graphic'] == "") {
    echo 
    ""

    else { 
    echo 
    '<img src="'.$getresortdata['resort_graphic'].'" class="graphic" align="left" />'
    }
        
    ?>
    </td>
    </tr>
    </table>

    <br /><br />

    </div>
    Here is a bit of css which is involved:

    Code CSS:
    .black_border
    {
    border:									solid 1px #000000;
    }
     
    .photo
    {
    margin-left:							10px;
    margin-bottom:							5px;
    }
     
    .graphic
    {
    margin-left:							10px;
    margin-bottom:							5px;
    margin-top:									-100px;
    }

    I basically want to find a way to make the text review wrap around the lower left aligned image. I tried setting the top margin of the image to be negative to move it up but the text does not wrap. As you may notice, the text and both graphics are dynamically pulled from a database table.

    I hope you can help with this?

    Regards,
    Neil

  2. #2
    SitePoint Zealot glowdot's Avatar
    Join Date
    Jun 2007
    Location
    Santa Monica, CA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you get rid of the margin CSS, it works properly? Try to cut the img tag into the middle of the review.
    Advertise on Glowfoto
    banners as low as $25/month, text ads $10/month
    Share 10 million impressions per month!

  3. #3
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,895
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't do that as the review and the two graphics are 3 things in the database!

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,397
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It's probably caused by justifying the text...?

    You might want to try wrapping the images in a <div> as this would give you more control over positioning and flow...

    echo '<div class="image1"><img src="'.$getresortdata['resort_photo'].'" class="photo" /></div>';

    and

    echo '<div class="image2"><img src="'.$getresortdata['resort_graphic'].'" class="graphic" /></div>';

    Then add the classes to your CSS file, ie...

    .image1 {float: right; width: 150px; margin-left: 10px;}
    .image2 {float: left; width: 150px; margin-right: 10px;}

    adjust css accordingly!

  5. #5
    SitePoint Zealot glowdot's Avatar
    Join Date
    Jun 2007
    Location
    Santa Monica, CA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    I can't do that as the review and the two graphics are 3 things in the database!
    Code:
    $review = $getresortdata['resort_review'];
    
    if ( $getresortdata['resort_graphic'] == "") {
         echo $review; 
    } else { 
    
         if (strlen($review) > 250) {
              $review_a = substr($review, 0, 150);
              $review_b = substr($review, 150);
    
              echo $review_a.'<img src="'.$getresortdata['resort_graphic'].'" class="graphic" align="left" />'.$review_b;
         } else {
              echo $review.'<img src="'.$getresortdata['resort_graphic'].'" class="graphic" align="left" />';
         } 
    
    }
    Something like that?
    Advertise on Glowfoto
    banners as low as $25/month, text ads $10/month
    Share 10 million impressions per month!

  6. #6
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,895
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kewl
    I'll give it a go!

  7. #7
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,895
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glowdot, Just tried your idea and it's perfect. I didn;t think to split the review into separate pieces!

    Cheers!


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
  •