Hello,
I have a nice photo gallery with a block of thumbnails on the left side and a
display block on the right. My problem is that some of my images are big and
display very large and go off the page. Some are horizontal and some are
vertical. How can I get it so that onhover and click they auto fit in the box.
My container is 1020px w x 600px H.all the pics have the same W measurement:
675px.. so I'm not sure why this is happening.. When I right click the
thumbnail... it is the size it should be.. but when I hover over it, the
horizontal images are huge. All the vertical pics display properly.
I don't have it online yet...
Thank you for your help!
Best,
Pam
Here is my code ...
<style type="text/css">
#gallery {
width:1020px;
height:600px;
padding:10px;
border:1px solid #333;
background: #9EAFC3;
position:relative;
margin-bottom:20px;
}
#gallery b.default {
position:absolute;
right:15px;
top:18px;
width:548px;
height:380px;
text-align:center;
}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px
solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#fff; font-family:verdana, arial,
sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul {list-style:none; padding:0; margin:0; width:240px;
position:relative; float:left;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0
0px 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none;
border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333;
background:#777;}
#gallery ul li a:hover b {position:absolute; right:-548px; top:0; width:auto;
height:380px; text-align:center; background:#9EAFC3; z-index:20;}
#gallery ul li a:hover span {display:block; color:#fff; font-family:verdana,
arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0
auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:524px;
border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery ul li a:active, #gallery ul li a:focus {white-space:normal;
border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute;
right:-548px; top:0; width:548px; height:380px; text-align:center;
background:#9EAFC3; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block;
color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal;
font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px
auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd
#eee #333;}
body,td,th {
font-family: Papyrus;
}
body {
background-color: #9EAFC3;
}
</style>
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
