Hang on, there are a couple of other spots that have those same rules. I removed the bottom row of thumbnails from the demo code and set it up like yours.
You also need to adjust the #container a.pics:active span and the #container a.pics:focus span
I'll high-light everything I changed below.
(The heights that I changed were just for the demo code below, you may not need to change yours)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
a, a:visited, a:hover {
}
#container {
position: relative;
width: 600px;
height: 550px;/*was 700px*/
background: #888;
border: 1px solid #000;
margin: 10px auto;
font-family: verdana, arial, sans-serif;
font-size: 12px;
}
#container a.pics {
float: left;
padding: 7px 21px;
display: inline;
color: #000;
text-decoration: none;
width: 75px;
height: 75px;
cursor: default;
}
#container a.pics img.thumb {
display: block;
border: 1px solid #000;
}
#container a.pics span {
display: none;
border: 0;
width: 580px;
background: #bbb;
border: 1px solid #fff;
text-align: center;
}
#container a.pics span img {
margin: 10px auto;
border: 1px solid #000;
}
#container a.pics:hover {
white-space: normal;
}
#container a.pics:hover img.thumb {
border: 1px solid #fff;
}
#container a.pics:hover span {
display: block;
position: absolute;
left: 9px;
top: 100px;/*was 192px*/
z-index: 10;
height: 350px;/*was 500px*/
}
#container a.pics:active img.thumb {
border: 1px solid #fc0;
}
#container a.pics:active span {
display: block;
position: absolute;
left: 9px;
top: 100px;/*was 192px*/
z-index: 5;
height: 350px;/*was 500px*/
}
#container a.pics:focus {
outline: 0;
}
#container a.pics:focus img.thumb {
border: 1px solid #fc0
}
#container a.pics:focus span {
display: block;
position: absolute;
left: 9px;
top: 100px;/*was 192px*/
z-index: 5;
outline: 0;
height: 350px;/*was 500px*/
}
#container span.info {
clear: left;
display: block;
text-align: center;
line-height: 20px;
margin: 0;
padding: 200px 0 0 0;
width: 600px;
text-align: center;
color: #eee;
z-index: 1;
}
#container span.info a {
color: #000;
}
#container span.info a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph1.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph2.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh2.jpg" alt="Wheels" title="Wheels" /><br />Wheels</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph3.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Urban Squirrel</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph4.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="http://www.cssplay.co.uk/menu/spole/sph5.jpg" alt="" />
<span><img src="http://www.cssplay.co.uk/menu/spole/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span>
</a>
<span class="info">Photographs<br />by kind permission of<br /><a href="http://www.simon-pole.co.uk/">Simon Pole</a></span>
</div>
</body>
</html>
moving an element in my photo gallery
Originally Posted by Kuczek
Bookmarks