Im looking to make a css photo gallery. Very simple that can fit on one page, and has no javascript or anything fancy. It's for a school project and all we have learned is CSS and HTML coding.

Creating a photo gallery in CSS without table:

I have received several emails recently about creating galleries with CSS. Most people still use tables to create your basic image gallery in CSS. There is a much simpler way to do this with a list and some very easy CSS. Depending on what you want to do with your photo gallery you may want to have a caption or more information available on the page. This simple method can be expanded for use on staff pages or real estate sites to list houses for sale.


The methodology is to put each image and subsequent text into an <li> and then manage the text inside just as you would any other HTML structure. The important part is getting the CSS to manipulate your list to the image gallery form.

The simple HTML to structure the photo gallery

<ul class="gallery">
<li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
<br />Image Caption</li>
<li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
<br />Image Caption</li>
<li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
<br />Image Caption</li>
<li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
<br />Image Caption</li>
<li><a href="/images/image.jpg"><img src="/images/image_tn.jpg" alt="image" /></a>
<br />Image Caption</li>
</ul>
The simple CSS to style the gallery’s HTML
.gallery li {
display: inline;
list-style: none;
width: 150px;
min-height: 175px;
float: left;
margin: 0 10px 10px 0;
text-align: center;
}
Now with all of the code working together

Image Caption
Image Caption
Image Caption
Image Caption
Image Caption


Other ways to style your image gallery without tables
You can also use a div to create your photo gallery instead of using a list. It works much in the same way that using a list does, some prefer this method over using a list. I will typically use a list because I feel it is more semantically correct than using a div. Anyone else use a different method to create a photo gallery than these two methods

I don't know if an unordered list is the best way to go for this.

I would do something like this:

<div id="gallery">
  <div class="imagebox">
    image in here
  </div>
  <div class="imagebox">
    image in here
  </div>
  <div class="imagebox">
    image in here
  </div>
</div>

And apply a style like this:

#gallery { width: 600px; }
.imagebox { float: left; width: 180px; margin-right: 20px; }

have a play with that, remember to clear your floats.

Here is a CSS3 animated gallery

http://www.cssplay.co.uk/menu/css3-photo-slide.html

CSSplay has a lot of others, too... check it out

Why reinvent the wheel?? http://www.webmaster-talk.com/websit...galleries.html

You can easily accomplish this by making each picture the background of whatever your gallery is going to be. For example, if there is a <div> for the frame of the gallery, then make a picture the background to that <div>. If you want a "Next" and "Back" option, then have the hyperlink take the user to a new page where that <div>'s background is a different picture.

Thanks for the help !

CSS code

<style type="text/css">
/* ********************************************* 
* This notice MUST stay intact for legal use.
* This script was created for FREE CSS Menus.
* Visit: www.freecssmenus.co.uk for more CSS. 
* Also visit our Free online menu creator.
************************************************ */ 
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul { list-style:none;
  padding:0;
  margin:0;
  width:180px;
  position:relative;
  float:left;
}
#pg ul li { display:inline;
  width:52px;
  height:52px;
  float:left;
  margin:0 0 8px 8px;
}
#pg ul li a { display:block;
  width:50px;
  height:50px;
  text-decoration:none;
  border:1px solid #000;
}
#pg ul li a img { display:block;
  width:50px;
  height:50px;
  border:0;
}
#pg ul li a:hover { white-space:normal;
  border-color:#336600;
background-color:#AABB33;
}
#pg ul li a:hover img { position:absolute;
  left:190px;
 top:0;
  width:auto;
  height:110px;
  border:1px solid #000;
}
#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
  left:5px;
  top:130px;
  width:350px;
  height:auto;
font-size:12px;
color:#999999;
}

</style>

HTML code

<div id="pg">
  <ul>
  <li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />
<span>
<strong>
CSS Map.</strong>
 CSS Image swap on rollover/hover. This simple display of CSS shows the  versatility of Cascading Style Sheets. Remember this animation is 100%  User Accessible.</span>
</a>
</li>
  <li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />
<span>
<strong>
CSS Big Button.</strong>
 Css buttons can be as large and as extravagant as you like. Using one  image you can create simple css buttons like this. This button is still a  hyperlink not just an image.</span>
</a>
</li>
  <li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="Css Opacity" />
<span>
<strong>
CSS Opacity Menu.</strong>
  you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. </span>
</a>
</li>
  <li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />
<span>
<strong>
Unborn Records </strong>
Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists</span>
</a>
</li>
  <li>
<a href="#">
<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />
<span>
<strong>
Cat And Two Dogs </strong>
 Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.</span>
</a>
</li>
  <li>
<a href="#">
<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />
<span>
<strong>
A swirl of colours. </strong>
 This is just a picture of colours in a swirl effect.</span>
</a>
</li>
  </ul>
</div>