logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 12-27-2009, 10:53 PM   #1
paulprice85
 
Join Date: Dec 2009
Posts: 60
Default Problem with... Creating an Photograph Gallery using CSS

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>

/////////////////////////////////////
paulprice85 is offline   Reply With Quote
Old 01-04-2010, 03:14 PM   #2
sitewidecf
 
Join Date: Dec 2009
Posts: 16
Default

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?
sitewidecf is offline   Reply With Quote
Old 01-05-2010, 01:30 AM   #3
paulprice85
 
Join Date: Dec 2009
Posts: 60
Default

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
paulprice85 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:57 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com