No replies
poporacer
Offline
newbie
Last seen: 13 years 22 weeks ago
Timezone: GMT-8
Joined: 2009-02-02
Posts: 1
Points: 0

I have a photo gallery that I have almost finished but can't quite get two things figured out. I am using DIV to format the page ant that part works fine with the exception of the background image not working in IE. If I have to I can work around that. My biggest problem is that I want the thumbnails to be in the right DIV and a vertical scroll bar. I am able to get the gallery to work if the image table and thumbnails are in the same DIV but there are more thumbnails than will fit on a page so the picture is not visible when you click on it. Is there a way to put the thumbnails in the seperate DIV with a verticle scroll bar, or a way when you hover for the picture to be centered in the DIV?

Thanks for your help!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Dr. Claw Tattoo pictures</title>
 
<style type="text/css">
body
a#anchor1 {
display: block;
width: 150px;
height: 50px;
margin: 0px;
text-decoration: none;
background-image: url(images/tattoobtn.gif);
}
a:hover {
background-position: 0px -50px;
} a#anchor2 {
display: block;
width: 150px;
height: 50px;
margin: 0px;
text-decoration: none;
background-image: url(images/clawbtn.gif);
}
a#anchor3 {
display: block;
width: 150px;
height: 50px;
margin: 0px;
text-decoration: none;
background-image: url(images/artbtn.gif);
}
a#anchor4 {
display: block;
height: 50px;
margin: 0px;
text-decoration: none;
background-image: url(images/linkbtn.gif);
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; max-height: 100%; }
#framecontentLeft, #framecontentRight{
position: absolute; top: 0; left: 0; width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}
#framecontentRight{
left: auto;
right: 0; width: 150px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}
#framecontentTop{
position: absolute;
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
width: auto;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
}
#container{
background:#000 url(images/background.jpg)75px 10px no-repeat; position: fixed; top: 50px; /*Set top value to HeightOfTopFrameDiv*/
left: 100px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto; }
.innertube{
margin: 2px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0px 150px 0 125px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}
* html #container{ /*IE6 hack*/
height: 100%; width: 100%; }
* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}
#container {position:relative; width:800px; height:550px; margin:0px auto 0 auto; border:0px solid #aaa;}
/* Removing the list bullets and indentation */
/* set the size of the unordered list to neatly house the thumbnails */ /* move the thumbnails into the correct position */ #container ul {padding-right:0px; padding-left: 0px;float:right;padding-bottom: 0px; margin:5px; width: 198px; padding-top:0px; list-style-type:none;height: 586px}
#container LI {
float: left
}
/* Remove the images and text from sight */
#container a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#fff;}
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:1px 2px 1px 2px; text-align:left; cursor:default;}
#container a.slide1 {background:url(thumbnails/tattoo%281%29.jpg); height:100px; width:134px;}
#container a.slide2 {background:url(thumbnails/tattoo%282%29.jpg); height:100px; width:75px;}
#container a.slide3 {background:url(thumbnails/tattoo%283%29.jpg); height:100px; width:75px;}
#container a.slide4 {background:url(thumbnails/tattoo%284%29.jpg); height:100px; width:75px;}
#container a.slide5 {background:url(thumbnails/tattoo%285%29.jpg); height:100px; width:75px;}
#container a.slide6 {background:url(thumbnails/tattoo%286%29.jpg); height:100px; width:75px;}
#container a.slide7 {background:url(thumbnails/tattoo%287%29.jpg); height:100px; width:134px;}
#container a.slide8 {background:url(thumbnails/tattoo%288%29.jpg); height:100px; width:75px;}
#container a.slide9 {background:url(thumbnails/tattoo%289%29.jpg); height:100px; width:75px;}
#container a.slide10 {background:url(thumbnails/tattoo%2810%29.jpg); height:100px; width:75px;}
#container a.slide11 {background:url(thumbnails/tattoo%2811%29.jpg); height:100px; width:75px;}
#container a.slide12 {background:url(thumbnails/tattoo%2812%29.jpg); height:100px; width:75px;}
#container a.slide13 {background:url(thumbnails/tattoo%2813%29.jpg); height:100px; width:75px;}
#container a.slide14 {background:url(thumbnails/tattoo%2814%29.jpg); height:100px; width:75px;}
#container a.slide15 {background:url(thumbnails/tattoo%2815%29.jpg); height:100px; width:75px;}
#container a.slide16 {background:url(thumbnails/tattoo%2816%29.jpg); height:100px; width:75px;}
#container a.slide17 {background:url(thumbnails/tattoo%2817%29.jpg); height:100px; width:75px;}
#container a.slide18 {background:url(thumbnails/tattoo%2818%29.jpg); height:100px; width:75px;}
#container a.slide19 {background:url(thumbnails/tattoo%2819%29.jpg); height:100px; width:134px;}
#container a.slide20 {background:url(thumbnails/tattoo%2820%29.jpg); height:100px; width:75px;}
#container a.slide21 {background:url(thumbnails/tattoo%2821%29.jpg); height:100px; width:75px;}
#container a.slide22 {background:url(thumbnails/tattoo%2822%29.jpg); height:100px; width:75px;}
/* change the thumbnail border color */ #container a.gallery:hover { border:1px solid #fff; } /* styling the :hover span */ #container A.gallery:hover SPAN {BACKGROUND: #000; LEFT: 75px; WIDTH: 500px; COLOR: #000; POSITION: absolute; TOP: 10px; HEIGHT: 500px
}
</style>
</head>
<body style="color: rgb(0, 0, 0); background-color: black;" alink="#000099" link="#000099" vlink="#990099">
<div style="top: 0px; height: 604px; left: 0px; width: 157px;" id="framecontentLeft">
<div class="innertube">
<div><img src="images/greyribbonsm.gif" style="width: 150px; height: 15px;" alt="Oriental tattoo"></div>
<div><img src="images/dragonhead.gif" style="width: 150px; height: 196px;" alt=""></div>
<div><img src="images/greyribbonsm.gif" style="width: 150px; height: 15px;" alt=""></div>
<div style="height: 50px;"><a href="tattoo.html" id="anchor1">&nbsp;</a>
</div>
<div><img src="images/greyribbonsm.gif" style="width: 150px; height: 15px;" alt=""></div>
<div style="height: 50px;"><a href="drclaw.html" id="anchor2">&nbsp;</a>
</div>
<div><img src="images/greyribbonsm.gif" style="width: 150px; height: 15px;" alt=""></div>
<div style="height: 50px;"><a href="artwork.html" id="anchor3">&nbsp;</a>
</div>
<div><img src="images/greyribbonsm.gif" style="width: 150px; height: 15px;" alt=""></div>
<div style="height: 50px;"><a href="links.html" id="anchor4">&nbsp;</a>
</div>
<div style="height: 120px;"><img src="images/greyribbonsm.gif" style="width: 150px; top: 473px; height: 130px;" alt=""></div>
</div>
</div>
<div style="top: 0px; height: 58px; left: 166px; width: 657px;" id="framecontentTop">
<div style="text-align: center;"></div>
<div class="innertube">
<div style="text-align: center;"></div>
<h1 style="margin-left: 0px; width: 540px; text-align: center; margin-top: 0px; height: 73px;">CLAWTATTOO.COM</h1>
</div>
</div>
<div id="container">
<ul>
<li><a class="gallery slide1" href="#nogo"><span>
<img src="images/tattoo%281%29.jpg" alt="" title=""></span></a></li>
<li><a class="gallery slide2" href="#nogo"><span><img src="images/tattoo%282%29.jpg" alt="" title="">
</span></a></li>
<li><a class="gallery slide3" href="#nogo"><span><img src="images/tattoo%283%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide4" href="#nogo"><span><img src="images/tattoo%284%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide5" href="#nogo"><span><img src="images/tattoo%285%29.jpg" alt="" title=""><br>
<br>
g</span></a></li>
<li><a class="gallery slide6" href="#nogo"><span><img src="images/tattoo%286%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide7" href="#nogo"><span><img src="images/tattoo%287%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide8" href="#nogo"><span><img src="images/tattoo%288%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide9" href="#nogo"><span><img src="images/tattoo%289%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide10" href="#nogo"><span><img src="images/tattoo%2810%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide11" href="#nogo"><span><img src="images/tattoo%2811%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide12" href="#nogo"><span><img src="images/tattoo%2812%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide13" href="#nogo"><span><img src="images/tattoo%2813%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide14" href="#nogo"><span><img src="images/tattoo%2814%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide15" href="#nogo"><span><img src="images/tattoo%2852%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide16" href="#nogo"><span><img src="images/tattoo%2816%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide17" href="#nogo"><span><img src="images/tattoo%2817%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide18" href="#nogo"><span><img src="images/tattoo%2818%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide19" href="#nogo"><span><img src="images/tattoo%2819%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide20" href="#nogo"><span><img src="images/tattoo%2820%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide21" href="#nogo"><span><img src="images/tattoo%2821%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
<li><a class="gallery slide22" href="#nogo"><span><img src="images/tattoo%2822%29.jpg" alt="" title=""><br>
<br>
</span></a></li>
</ul>
</div>
</body></html>