SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Sep 13, 2007, 05:33 #1
- 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; }
-
Sep 13, 2007, 07:39 #2
- 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.
-
Sep 13, 2007, 08:08 #3
- 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> </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; }
-
Sep 15, 2007, 04:57 #4
- Join Date
- Nov 2005
- Location
- Jerusalem
- Posts
- 542
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
anyone?
-
Sep 15, 2007, 06:44 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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>
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