No replies
nicholasg
Offline
Regular
Last seen: 10 years 28 weeks ago
Joined: 2005-01-16
Posts: 20
Points: 0

I realise this is prob the right place for this problem. I've included images. Im almost there, I think, just having a few issues. Only 1 image appears when I rollover thumbs and the other images appear in the frame but they are under the image?

Ive also got an alignment prob

hELP!......please...please

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<!-- turn off the image toolbar in IE -->
<title>Disco Volante</title>
<link href="../disco.css" rel="stylesheet" type="text/css" />
</head>
<body>
<body bgcolor="#333333">
<div id="container">

<div id="header">
<h1><img src="../images/sitewide/linklogo.gif" width="192" height="80" /></span></h1>
<ul>
<li><a href="../index.htm" title="you are here">home</a></li>
<li><a href="../about/about.htm" title="event and skill base">about</a></li>
<li><a href="index.html" title="event design and decortation">portfolio</a></li>
<li><a href="mailto:[email protected]">contact</a></li>
</ul>
<p>*event design *decoration *print design *entertainment design</p>
<h2><span><img src="../images/imageheads/portfolioh1.jpg" width="760" height="94" /></span></h2>
</div>

<div id="content">
<div id="pad">

<div id="thumbs">
<a class="gallery slidea" href="#" title="cj"><span><img src="../images/imagesp/CJBOLLAND.jpg" alt="cjbolland" width="400" height="220" title="cjbolland"/><br/>
</span></a><a class="gallery slideb" href="#" title="dkred"><span><img src="../images/imagesp/dkred.jpg" alt="dkred" width="400" height="220" title="dkred"/><br/>
</span></a><a class="gallery slidec" href="#" Title="egy1jpg"><span><img src="../images/imagesp/egy1jpg.jpg" alt="egy1jpg" width="400" height="220" title="egy1jpg"/><br/>
</span></a><a class="gallery slided" href="#" Title="egyptset"><span><img src="../images/imagesp/egyptset.jpg" alt="egyptset" width="400" height="220" title="egyptset"/><br/>
</span></a><a class="gallery slidee" href="#" title="exhib"><span><img src="../images/imagesp/exhib.jpg" alt="exhib" width="400" height="220" title="exhib"/><br/>
</span></a><a class="gallery slidef" href="#" title="mg1"><span><img src="../images/imagesp/mg1.jpg" alt="mg1" width="400" height="220" title="mg1"/><br/>
</span></a><a class="gallery slideg" href="#" title="power1"><span><img src="../images/imagesp/power1.jpg" alt="power1" width="400" height="220" title="power1"/><br/>
</span></a><a class="gallery slideh" href="#" title="RHI"><span><img src="RHI.jpg" alt="RHI" width="400" height="220" title="power1"/><br />
</span></a><a class="gallery slidei" href="#" title="shakes"><span><img src="../images/imagesp/planets.jpg" alt="shakes" width="400" height="220" title="shakes"/><br/>
</span></a><a class="gallery slidej" href="#" title="shakes"><span><img src="../images/imagesp/planets.jpg" alt="shakes" width="400" height="220" title="shakes"/><br/>
</span></a><a class="gallery slidek" href="#" title="shakes"><span><img src="../images/imagesp/slidek.gif" alt="shakes" width="400" height="220" title="shakes"/><br/></span></a> </div>
</div>
</div>
</div>

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

CSS

body {
margin: 10px 30px;
font: 14px verdana;
line-height: 20px;
background-color: #333333;
color: #333333;
text-align: center;
}
#container {
width: 760px;
margin: auto;
text-align: left;
margin: auto;
background: #999999;
}
#header {
height: 180px;
padding: 0 0 0 30px;
font: 700 12px verdana;
color: #333;
}
#header a {
text-decoration: none;
color: #fff;
}
h1 {
float: right;
width: 192px;
height: 80px;
margin: 0;
background:background: rgb(153,153,153) url(../images/sitewide/linklogo.gif) no-repeat top right;
}
h1 span {
display:none;
}
#header ul {
list-style-type: none;
background-color: #39f;
padding: 0;
margin: 0;
}
#header ul li {
float: left;
margin: 20px 80px 20px 0;
font: bold normal 12px/normal Verdana;
text-decoration: none;
color: #FFFFFF;
}
#header p {
clear: left;
}
h2 {
float: right;
width: 760px;
height: 94px;
margin: 0;
background: url(images/imageheads/headerbar.jpg);

}
h2 span {
display:none;
}
#content {
border-top: 2px solid #999999;
padding: 70px 70px 70px 30px;
background-color: #666;
font: bold normal 12px Verdana;
color: #FFFFFF;
text-decoration: none;
margin-left: auto;
margin-top: auto;
display: block;
height: 200px;

}
a:link {
font: bold normal 12px/normal Verdana;
color: #FFFFFF;
text-decoration: none;
background: #999999;
}
a:visited {
font: bold normal 12px/normal Verdana;
color: #FFFFFF;
text-decoration: none;
background: #FF00FF;
}
a:hover {
font: bold normal 12px/normal Verdana;
color: #FFFFFF;
text-decoration: none;
background: #FF00FF;
}
a:active {
font: bold normal 12px/normal Verdana;
color: #FF00FF;
text-decoration: none;
background: #999999;
}
h3 {
font: bold normal 12px/22px Verdana;
color: #FFFFFF;
text-decoration: none;
}
a.gallery, a.gallery:visited {
display:block;
color:#000;
text-decoration: none;
border:1px solid #000;
width:75px;
height:47px;
margin:3px;
float:left;
}
a.slidea {background:url(images/imagesp/CJBOLLAND.jpg);}
a.slideb {background:url(images/imagesp/dkred.jpg);}
a.slidec {background:url(images/imagesp/egy1jpg.jpg);}
a.slided {background:url(images/imagesp/egyptset.jpg);}
a.slidee {background:url(images/imagesp/exhib.jpg);}
a.slidef {background:url(images/imagesp/mg1.jpg);}
a.slideg {background:url(images/imagesp/power1.jpg);}
a.slideh {background:url(images/imagesp/RHI.jpg);}
a.slidei {background:url(images/imagesp/shakes.jpg);}
a.slidej {background:url(images/imagesp/vis.jpg);}

.slidek {
display:block;
position:absolute;
width:400px;
height:220px;
top:240px;
left:420px;
padding:0;
border:1px solid #FF00FF;

solid #000;
background: url(images/imagesp/slidek.gif);
visibility: visible;
overflow: hidden;

}

a.gallery span {
display:block;
position:absolute;
left:420px;
top:240px;
width:400px;
height:220px;
overflow: hidden;
}
a.gallery:hover {
white-space:normal;
border:1px solid #fff;

}
a.gallery:hover img, a.gallery:active img, a.gallery:focus img {border:1px solid #000;}
a.gallery:hover span, a.gallery:active span, a.gallery:focus span {
display:block;
position:absolute;
width:400px;
height:220px;
top:240px;
left:420px;
font-style:italic;
padding:5px;
colour:#000;
background: #FFFFFF;
}
#thumbs {
width:310px;
height:200px;
padding-top: 1px;
padding-left: 1px;
margin: 0px;
left: 20px;
top: 90px;
}
#pad {
height:1px;
width:1px;
}