Align Text underneath floating images

**perpetual_dream** · Sep 13, 2007, 04:33

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;    }

**DaveWoods** · Sep 13, 2007, 06:39

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.

**perpetual_dream** · Sep 13, 2007, 07:08

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;    }

**perpetual_dream** · Sep 15, 2007, 03:57

anyone?

**Paul O'B** · Sep 15, 2007, 05:44

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

The SitePoint Forums have moved.

User Tag List

Thread: Align Text underneath floating images

Thread Tools

Display

Align Text underneath floating images

Bookmarks

Bookmarks

Posting Permissions