SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: div order for image display
-
Sep 9, 2004, 20:15 #1
- Join Date
- Feb 2004
- Location
- Albury, NSW, Australia
- Posts
- 215
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
div order for image display
I have some CSS to display thumbnails:
Code:/*for the image*/ div.float { float: left; padding: 2px; } /*for the caption*/ div.float p { text-align: center; } /*for the text description*/ div.description { margin-left:250px; padding: 2px; border: 1px solid #666666; width: 300px; } div.description p { text-align: left; } /*to make a space at the end*/ div.thumbspacer { clear: both; } /* to contain everything*/ div.thumbcontainer { border: 1px dashed #333; background-color: #E8E8E8; }
Code:<!-- thumbnail starts-----------------------------------------------------> <div class="thumbcontainer"> <h2>Recent Projects</h2> <div class="float"> <a href="#"><img src="portfolio/thumb.jpg" alt="image1" width="200" height="150" border="0" /></a><br /> <p>Image title<br /> [click thumbnail for larger image] </p> </div><!-- float --> <div class="description"> <p><strong>Project Description:</strong> The website was built using an open-source DotNetNuke (DNN) portal application and customized for the client. This included a sophisticated application for client contact and maintenance and gives the client full control over the extensibility and maintenance of their site..<br /> <br /> View the site at: <a href="http://www.website.net" target="_blank">www.website.net</a><br /> <br /> </p> </div><!-- Description --> </div><!-- thumbcontainer --> <div class="thumbspacer"> </div> <!-- end thumbnail -->
THks
Martin
-
Sep 10, 2004, 01:05 #2
- Join Date
- Feb 2004
- Location
- Albury, NSW, Australia
- Posts
- 215
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I fixed it by setting the height property of the div.thumbcontainer to 300px and adding a few more <div class="thumbspacer"> </div>
Is there a better or more elegant way to do it?
-
Sep 10, 2004, 12:47 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
I'm not sure if I quite understand what you want but you must remember that floats are basically removed from the flow and will escape out of the parent container if the container isn't big enough, or if the floats aren't cleared before the closing div of the parent.
Heres an example:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> /*for the image*/ div.float { float: left; padding: 2px; position:relative; } /*for the caption*/ div.float p { text-align: center; margin:0 0 5px 0; } /*for the text description*/ div.description { margin-left:250px; padding: 2px; border: 1px solid #666666; width: 300px; } div.description p { text-align: left; margin:0; } /*to make a space at the end*/ div.thumbspacer { clear: both; height:5px; overflow:hidden; } /* to contain everything*/ div.thumbcontainer { border: 1px dashed #333; background-color: #E8E8E8; position:relative; margin-bottom:10px; } </style> </head> <body> <div class="thumbcontainer"> <h2>Recent Projects</h2> <div class="float"> <a href="#"><img src="images/pmoblogo7.jpg" alt="image1" width="200" height="150" border="0" /></a><br /> <p>Image title<br /> [click thumbnail for larger image] </p> </div> <!-- float --> <div class="description"> <p><strong>Project Description:</strong> The website was built using an open-source DotNetNuke (DNN) portal application and customized for the client. This included a sophisticated application for client contact and maintenance and gives the client full control over the extensibility and maintenance of their site..<br /> <br /> View the site at: <a href="http://www.website.net" target="_blank">www.website.net</a><br /> </p> </div> <!-- Description --> <div class="thumbspacer"></div> </div> <!-- thumbcontainer --> <div class="thumbcontainer"> <h2>Recent Projects</h2> <div class="float"> <a href="#"><img src="images/pmoblogo7.jpg" alt="image1" width="200" height="150" border="0" /></a><br /> <p>Image title<br /> [click thumbnail for larger image] </p> </div> <!-- float --> <div class="description"> <p><strong>Project Description:</strong> The website was built using an open-source DotNetNuke (DNN) portal application and customized for the client. This included a sophisticated application for client contact and maintenance and gives the client full control over the extensibility and maintenance of their site..<br /> <br /> View the site at: <a href="http://www.website.net" target="_blank">www.website.net</a><br /> </p> </div> <!-- Description --> <div class="thumbspacer"></div> </div> <!-- thumbcontainer --> </body> </html>
Paul
Bookmarks