PDA

View Full Version : Problem with... Creating an Photograph Gallery using CSS


paulprice85
12-27-2009, 10:53 PM
Hello all, hope you all had a nice Xmas!

Just one niggling thing spoiling the fun for me at the moment. I'm by no means a programmer so i'll include the code for you to see where I might be going wrong. My problem 'I think' lies in the part of the code that hides the images in a 1x1px 'span' (as I'm creating them to only be displayed when rolled over). Iv'e entered the code, and looked at a couple of different tutorials and can't see what I'm doing wrong... because it's not working! It's not putting the images in the 1x1 pixel box, they're still all displayed, one after the other!

So here it goes... cheers guys. Paul

///////////////////////////////////////////////////////

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}
body {
background-color: #FFFFFF;
background-repeat: repeat;
}

#container {
height: 450px;
width: 550px;
}

#container ul
{
padding:0;
margin:0;
list-style-type:none;
}

#container a.gallery span { ///////////////////// is it in the wrong place? or maybe just written wrong?
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden
background:#fff;
}

-->
</style>

</head>

<body>
<div id="container">
<ul>
<li>
<a class="gallery photoa" href="#">
<img src="Jpg's/Harveys.jpg" alt="Harvey's Cafe Bar" width="550" height="450" title="Harvey's Cafe Bar" /><br/>
</li>

<li>
<a class="gallery photob" href="#">
<img src="Jpg's/Hayes.jpg" alt="Hayes" width="550" height="450" title="Hayes" /><br/>
</li>

<li>
<a class="gallery photoc" href="#">
<img src="Jpg's/Hooping.jpg" alt="Hooping Rocks" width="550" height="450" title="Hooping Rocks" /><br/>
</li>

<li>
<a class="gallery photod" href="#">
<img src="Jpg's/zest.jpg" alt="Parmaris Zest" width="550" height="450" title="Parmaris Zest" /><br/>
</li>

<li>
<a class="gallery photoe" href="#">
<img src="Jpg's/hoopPic.jpg" alt="Hooping Rocks Creative Photo" width="550" height="450" title="Hooping Rocks Creative Photo" /><br/>
</li>

<li>
<a class="gallery photof" href="#">
<img src="Jpg's/ParmPic.jpg" alt="In Situ Product Photo" width="550" height="450" title="Life Jacket Photo" /><br/>
</li>

<li>
<a class="gallery photog" href="#">
<img src="Jpg's/JacketPic.jpg" alt="Life Jacket Photo in Studio" width="550" height="450" title="Life Jacket Photo in Studio" /><br/>
</li>

</ul></div>
</body>
</html>

/////////////////////////////////////

sitewidecf
01-04-2010, 03:14 PM
not sure what you are trying to achieve, but your html does not contain any span tags in order for your css to even work on them. Could you explain your design in detail more or a link to an example site or effect?

paulprice85
01-05-2010, 01:30 AM
Hey, thanks very much for that. Got it sorted, realized what span tags were! Very new to this so all is a learning curve. Thanks again