I am fairly new to web design and CSS. I have attempted (for the first time) a picture gallery. The gallery is centered on the page. The touble is, I have not been able to figure out how to center the hover images. Instead of the thumbnails enlarging on top of the centered background image, they are opening relative to the thumbnails, further and further to the right. Here is the applicable code:
In HEAD section I have:
<link rel="stylesheet" media="all" type="text/css" href="styles.css" />
<style type="text/css">
#holder {
position: relative;
background: transparent url(gallery/gallery1.jpg) no-repeat center;
margin-bottom: 10px;
z-index: 1;
}
#scrollbox {
width: 600px;
height: 80px;
background: #f4f4f4;
overflow: auto;
border: 1px solid #aaa;
margin-left: auto;
float: inherit;
margin-right: auto;
}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; margin:3px; float:left; font-size:11px;}
a.slidea {background:url(gallery/gallery1_small.jpg);}
a.slideb {background:url(gallery/gallery2_small.jpg);}
a.slidec {background:url(gallery/gallery3_small.jpg);}
a.slided {background:url(gallery/gallery4_small.jpg);}
a.slidee {background:url(gallery/gallery5_small.jpg);}
a.slidef {background:url(gallery/gallery6_small.jpg);}
a.slideg {background:url(gallery/gallery7_small.jpg);}
a.slideh {background:url(gallery/gallery8_small.jpg);}
a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec; z-index:100; font-size:11px;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}
a.gallery:hover span {
display: block;
position: absolute;
width: 600px;
height: 403px;
top: 49px;
left: auto;
right: auto;
padding: 5px;
font-style: italic;
color: #000;
background: #fff;
z-index: 100;
font-size: 11px;
}
a.gallery:active {border:1px solid #eee;}
a.gallery:active span, a.gallery:focus span {
display: block;
position: absolute;
width: 600px;
height: 403px;
top: 49px;
left: auto;
right: auto;
padding: 5px;
font-style: italic;
color: #000;
background: #fff;
z-index: 50;
}
#thumbs {
margin-left: auto;
margin-right: auto;
margin: 0 auto 0 auto;
width: 100%;
height: 60px;
float: left;
}
#pad {
margin-left: auto;
margin-right: auto;
margin: 0 auto 0 auto;
height: 467px;
width: 100px;
float: none;
}
</style>
<!--[if IE 7]>
<style type="text/css">
a.gallery span {display:block; position:absolute; width:600px; height:403px; top:49px; left:-99999px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:100; font-size:11px;}
a.gallery span img {border:1px solid #000;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}
a.gallery:hover span {left:auto; right:auto; z-index:100;}
a.gallery:hover span img {border:1px solid #000;}
a.gallery:active span, a.gallery:focus span {left:auto; right:auto; z-index:50;}
</style>
<![endif]-->
IN BODY SECTION I HAVE:
<div id="info">
<div id="holder" style="margin-left: auto; margin-right: auto; margin: 0 auto 0 auto; left: 0px; top: 0px; width: 100%; position: relative;">
<div id="pad"></div>
<div id="scrollbox">
<div id="thumbs">
<a class="gallery slidea" href="#nogo" title="Kitchen"><span><img src="gallery/gallery1.jpg" alt="Kitchen Design" title="Kitchen" /></span></a>
<a class="gallery slideb" href="#nogo" title="Bedroom"><span><img src="gallery/gallery2.jpg" alt="Bedroom Design" title="Bedroom" /></span></a>
<a class="gallery slidec" href="#nogo" title="Living Room"><span><img src="gallery/gallery3.jpg" alt="Living Room Design" title="Living Room Design" /></span></a>
<a class="gallery slided" href="#nogo" title="Bathroom"><span><img src="gallery/gallery4.jpg" alt="Bathroom Design" title="Bathroom Design" /></span></a>
<a class="gallery slidee" href="#nogo" title="Living Room"><span><img src="gallery/gallery5.jpg" alt="Living Room Design" title="Living Room Design" /></span></a>
<a class="gallery slidef" href="#nogo" title="Dining Room"><span><img src="gallery/gallery6.jpg" alt="Dining Room Design" title="Dining Room Design" /></span></a>
<a class="gallery slideg" href="#nogo" title="Kitchen"><span><img src="gallery/gallery7.jpg" alt="Kitchen Design" title="Kitchen Design" /></span></a>
<a class="gallery slideh" href="#nogo" title="Living Room"><span><img src="gallery/gallery8.jpg" alt="Living Room Design" title="Living Room Design" /></span></a>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated as it is driving me insane!!!! Thank you!!!