...

View Full Version : How do i make a css photo gallery?



getbestproduct
10-25-2010, 11:29 AM
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.

wojo1086
10-26-2010, 12:53 AM
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.

DrDOS
10-26-2010, 01:58 AM
Here's a way that I did it. I took twelve images, sized them to 100px height and absolutely positioned them on the left and right sides of a div. Then I made the css for the images so that when you hovered over one it completely filled the div. It made a nice show but did not work in older versions of IE, so I later rewrote it in javascript and also made it work as a slide show.

getbestproduct
10-26-2010, 02:49 AM
Thanks,I will have a try.

sujithpr
10-26-2010, 06:59 AM
Try this


<html>
<head>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

effpeetee
10-26-2010, 02:41 PM
Is this what you mean (http://www.exitfegs.co.uk/ninea.html)?


Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum