SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Evangelist perpetual_dream's Avatar
    Join Date
    Nov 2005
    Location
    Jerusalem
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align Text underneath floating images

    Hello,
    I want to align the text underneath each of the folating images

    here is my html code:

    Code HTML4Strict:
    while ($row=mysql_fetch_array($result)){
    $imgsrc=$row['file_path'];
    $fullimgsrc="Moderator/"."$imgsrc";
    $download_id=$row['download_id'];
    ?>
    <div class="transON_First" style="width:100px;height:119px;" onmouseover="this.className='transOFF_First'" onmouseout="this.className='transON_First'" ><a href="<?php echo "downloaddetail.php?id=$download_id" ; ?>"><img src="<?php echo $fullimgsrc; ?>" width="100" height="119" style="border:1px solid black;"></a>
    </div>
     
    <?php
    $record_count=$record_count+1;
    } //end of while loop

    css:
    Code CSS:
    .transOFF_First {width: 100%; background-color: 
    silver; border:1px solid black; margin: 0 15px 5px 30px;  
     display: inline; 
    float:left; clear:inherit; text-align: center;   }
    .transON_First  {width: 100%; background-color: silver;
     opacity:.50; filter: alpha(opacity=50); 
    -moz-opacity: 0.5;border:1px solid black; 
    margin: 0 15px 5px 30px; display:inline;
     float:left; clear:inherit; text-align: center;    }
    Tanzeelnet - Best arabic downloadsite
    Linux Hosting |Free Downloads |

  2. #2
    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)
    I don't see any text in the code you've provided an can't see how any text could be generated from that php, it just looks like an image as a link to me.

    You could quite easily add a <p> with text in underneath the <img> but still within that div and then style it accordingly although until I can see exactly how the text is being generated at the moment it's difficult to advise.

  3. #3
    SitePoint Evangelist perpetual_dream's Avatar
    Join Date
    Nov 2005
    Location
    Jerusalem
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oK HERE is the image describing what I need:
    http://www.download-firefox-3.com/image.PNG

    HTML:
    Code HTML4Strict:
    <body>
    <div class="placeholder">
      <div id="logo"></div>
      <div id="emptyspace"></div>
      <div id="maincontent">
        <p>Here come the top wallpapers</p>
        <div class="kader">
        <div class="gallerycontainer">
    <?php
    $result=sql_select("select * from downloads where download_type_id='1' order by download_count desc limit 5");
    $record_count=1;
    while ($row=mysql_fetch_array($result)){
    $imgsrc=$row['file_path'];
    $fullimgsrc="Moderator/"."$imgsrc";
    $download_id=$row['download_id'];
    if($record_count==1) {
    ?>
    <div class="transON_First" style="width:100px;height:119px;" onmouseover="this.className='transOFF_First'" onmouseout="this.className='transON_First'" ><a href="<?php echo "downloaddetail.php?download_id=$download_id" ; ?>" class="style1"><img src="<?php echo $fullimgsrc; ?>" width="100" height="119" style="border:1px solid black;"></a>I want text here</div>
     
    <?php
    $record_count=$record_count+1;
    }//end of if $record_count=1
    else {
    ?>
     
    <div class="transON" style="width:100px;height:119px;" onmouseover="this.className='transOFF'" onmouseout="this.className='transON'" ><a href="<?php echo "downloaddetail.php?download_id=$download_id" ; ?>"><img src="<?php echo $fullimgsrc; ?>" width="100" height="119" style="border:1px solid black;"></a>I want text here</div>
    <?php
     
    }////end of else $record_count=1
    } //end of while loop
     
        ?>
     
        </div>
        <p>&nbsp;</p>
      </div>
    </div>
    </body>

    Here is the css:
    Code CSS:
    .transOFF {width: 100%; background-color: silver; border:1px solid black; margin: 0 15px 5px 0;  
     display: inline; float:left; clear:inherit; text-align:center;   }
    .transON  {width: 100%; background-color: silver; opacity:.50; filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; margin: 0 15px 5px 0; display:inline; float:left; clear:inherit;   text-align:center;   }
    .transOFF_First {width: 100%; background-color: silver; border:1px solid black; margin: 0 15px 5px 30px;  
     display: inline; float:left; clear:inherit;  text-align:center;   }
    .transON_First  {width: 100%; background-color: silver; opacity:.50; filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; margin: 0 15px 5px 30px; display:inline; float:left; clear:inherit;    }
    Tanzeelnet - Best arabic downloadsite
    Linux Hosting |Free Downloads |

  4. #4
    SitePoint Evangelist perpetual_dream's Avatar
    Join Date
    Nov 2005
    Location
    Jerusalem
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone?
    Tanzeelnet - Best arabic downloadsite
    Linux Hosting |Free Downloads |

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Sorry but I don't do PHP. You should post the source that the code produces (i.e. html and css).

    If you want a caption under an image you simply need to float the image container and then place the caption under the image using a break tag or paragraph but keep both elements in the float.

    e.g.
    http://www.pmob.co.uk/temp/caption25.htm

    Code:
    <p class="caption"><img src="images/photo-2.jpg" width="100" height="75" alt="" /><br />Caption</p>
    The p tag is floated width a width and height that will accomodate the image and the text. If you don't set a height then when the floats wrap to the next line they will snag on the highest element in the line.

    You can float without widths but this means that the text can only be one work or two because it will not wrap at the image boundaries. The only way to make text wrap is to use a width on the float.

    Here is a more advanced example that shows all the above and more but is a little complicated as it attempts to vertically center the images also.

    http://www.pmob.co.uk/temp/caption24.htm


    The first example I posted gives the general idea in an easy format.

    Hope it helps


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
  •