Tue, 2009-02-03 13:39
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"> </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"> </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"> </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"> </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>
