Need Help Laying Out A Gallery Of Images In CSS

  • CStrauss
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: St. Louis MO. USA

Post 3+ Months Ago

One of my weak spots when it comes to CSS is to make a gallery page just using CSS div and span tags. Basicly what I want to do is lay out 3 rows of images say around 200 px and maybe 5px gap between each image. What would be the best way to do this I only need one row cause eventually I will use PHP to great additional rows.

Every time I try this I get frustrated and say screw it and put in html tables. Anyways anyone have a good way to lay this out in CSS? I'm not looking for anything complex just something to look at and try to build off of.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

I'd forget the divs and spans and unleash the power of the unordered list :D

Try out something like what I have below:

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<style>
 
<!-- I've stuck the css here, rather than in a separate code block to make it easier to see what's going on -->
 
#gallery {margin: 24p 0px 0px 10px; color: #666;}
#gallery ul {list-style: none; margin: 10px 0px 0px 20px; padding: 0}
#gallery li {float: left; margin: 10px 15px 10px 0px; text-align: center; font-family: "Lucida Grande", Verdana, Arial, Sans-serif; font-size: 10px}
#gallery li img {display: block; width: 200px; height: 200px}
#gallery h1 {margin: 24px 10px 0px 10px; color: #ccc;}
#gallery ul li a {color: #555; font-weight: bold; text-decoration: none;}
a img {border: none}
 
</style>
 
 
</head>
 
<body>
 
<div id="gallery">
<h1>My Pics</h1>
<ul>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
<li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
</ul>
</div>
 
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <style>
  6.  
  7. <!-- I've stuck the css here, rather than in a separate code block to make it easier to see what's going on -->
  8.  
  9. #gallery {margin: 24p 0px 0px 10px; color: #666;}
  10. #gallery ul {list-style: none; margin: 10px 0px 0px 20px; padding: 0}
  11. #gallery li {float: left; margin: 10px 15px 10px 0px; text-align: center; font-family: "Lucida Grande", Verdana, Arial, Sans-serif; font-size: 10px}
  12. #gallery li img {display: block; width: 200px; height: 200px}
  13. #gallery h1 {margin: 24px 10px 0px 10px; color: #ccc;}
  14. #gallery ul li a {color: #555; font-weight: bold; text-decoration: none;}
  15. a img {border: none}
  16.  
  17. </style>
  18.  
  19.  
  20. </head>
  21.  
  22. <body>
  23.  
  24. <div id="gallery">
  25. <h1>My Pics</h1>
  26. <ul>
  27. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  28. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  29. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  30. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  31. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  32. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  33. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  34. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  35. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  36. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  37. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  38. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  39. <li><a href="#"><img src="foo.jpg" alt="" /></a><br />description</li>
  40. </ul>
  41. </div>
  42.  
  43. </body>
  44. </html>



... works a treat: simple, clean, easy to manage and customise.
  • suzie
  • Guru
  • Guru
  • User avatar
  • Posts: 1134
  • Loc: England

Post 3+ Months Ago

Hi,

When I insert the image source it tells me the correct size. I am using Dreamweaver and the size is correct in there but yet my image is squashed.

Any particular reason why? As yet I have only tried one image till I ask about the squashiness.

Thanks!

S
:mrgreen:
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

he only reason that it'd be squashed is if it's not the correct size ... didn't you just switch around the width and the height or something like that ... ?
  • suzie
  • Guru
  • Guru
  • User avatar
  • Posts: 1134
  • Loc: England

Post 3+ Months Ago

Found the problem righteous _trespasser,

I found the size in the CSS which was 200 and mine 500.
Thanks

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 69 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.