|
First, I want to say thanks for creating such a simple script. I’ve had problems with it, but have been able to resolve them to my satisfaction for my site. However, there is one problem I can’t seem to get past.
Anytime I resize the browser window the image window moves out of position. on my site, the menus are to the right of the page and they stay in place when i resize the browser, but the image window moves to cover the menus.
I’ve included two screen shots. the first one is what it looks like with the window at the maximum, which is fine:
http://img357.imageshack.us/img357/5619/maximum.jpg
the second is when i resize it and you can see the image window now covering the menus:
http://img21.imageshack.us/img21/3234/resizedota.jpg
is there anything I can do to get it to stay in place no matter what size the browser? I am using e2.css. I fi can provide any more information, let me know.
Any help is greatly appreciated.
|
E2
|
I’m not sure how you’re embedding the gallery into you page. Are you using Div’s only or tables? You’ve modified the gallery to fit into your page, so It’s hard to say what your code looks like or what you’ve done to the css to get it to fit within your page. My guess is you’re either floating the gallery or you table isn’t big enough to fit the gallery and your side navigation so it ends up overflowing over your navigation.
|
|
Hi, thanks for responding. my menus are in tables, but when i tried to put the imagebox into its own table, I couldn’t get it in the position I wanted it in. So it’s just div’s only for the imagebox. Anyway, here’s a look at my css code. This is my first time attempting this so I appreciate you taking the time to help me out:
/* CSS Document */
.e2_photo_gallery {
width:650px;
margin:0px auto;
min-width:650px;
color:#fff;
}
.e2_photo_gallery .hd .c,
.e2_photo_gallery .ft .c {
font-size:1px; /* ensure minimum height */
height:13px;
}
.e2_photo_gallery .ft .c {
height:14px;
}
.e2_photo_gallery .hd {
background:transparent url(../designs/e2/tl.gif) no-repeat 0px 0px;
}
.e2_photo_gallery .hd .c {
background:#000 no-repeat right 0px;
}
.e2_photo_gallery .bd {
background:#000 repeat-y 0px 0px;
}
.e2_photo_gallery .bd .c {
background:#000 repeat-y right 0px;
}
.e2_photo_gallery .bd .c .s {
margin:0px 8px 0px 100px;
background:#000 repeat-x 0px 0px;
padding:1em;
}
.e2_photo_gallery .ft {
background:#000 no-repeat 0px 0px;
}
.e2_photo_gallery .ft .c {
background:#000 no-repeat right 0px;
}
/* content-specific */
.e2_photo_gallery h1 {
/* header */
font-size:2em;
margin:0px;
padding:0px;
margin-top:-0.6em;
}
.e2_photo_gallery p {
margin:0.5em 0px 0px 0px;
padding:0px;
font:0.95em/1.5em arial,tahoma,"sans serif";
}
html>body .e2_photo_gallery pre {
font-size:1.1em;
}
body{background:#000;}
#main_image_wrapper{
position:fixed;
border:.5px solid #CCC;
width:700px;
height:525px;
background: #FFFFFF url(../rsrc/loading_image.gif) no-repeat 50% 50%;
}
#imgloader{text-align:center;vertical-align:middle;}
#more{
position:fixed;
top:0;
right:0;
z-index:1001;
}
.morelink:hover{font-size:11px;color:#FFF;text-decoration:underline;}
#thumbgall{position:absolute;left:0;top:0;white-space:nowrap;z-index:1000;}
#widthbox{position:relative;display:inline;left:0;top:0;padding:1px;}
#imgbox{width:80px;height:80px;display:inline;position:absolute;text-align:center;}
#iptc_btn{width:100%;text-align:right;position:absolute;left:0;top:0;z-index:999;}
#iptc_info{position:absolute;bottom:0;left:0;height:auto;width:100%;background-color:#000;color:#CCC;font-size:10px;line-height:140%;text-align:left;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
.iptc_left{float:left;text-align:right;width:18%;color:#000;padding:0 0 0 2%;}
.iptc_right{float:right;text-align:left;width:79%;}
.spacing{padding:1px;}
.morelink:link,.morelink:visited{font-size:11px;color:#FFF;text-decoration:none;}
#rightmore,#leftmore{color:#333;height:115px;width:32px;padding:0;}
#rightmore ul,#leftmore ul{list-style:none;border:none;height:115px;margin:0;padding:0;}
#rightmore li,#leftmore li{height:115px;margin:0;}
html>body #rightmore li a,html>body #leftmore li a{width:auto;}
#pn_overlay{position:absolute; top:0; left:0; width:100%; height:100%; z-index:998;}
#prev, #next{
width: 10%;
height: 100%;
background: transparent url(../rsrc/blank.gif) no-repeat; /* Trick IE into showing hover */
outline:none;
}
#prev { left: 0; float: left; outline: none; -moz-outline: none; visibility:hidden;}
#next { right: 0; float: right; outline: none; -moz-outline: none;}
#prev:hover, #prev:visited:hover { background: url(../rsrc/prev.gif) left 50% no-repeat; }
#next:hover, #next:visited:hover { background: url(../rsrc/next.gif) right 50% no-repeat; }
#imgtitle{width:600px; font-size:.8em; text-align:center; color:#FFF; display:block}
#imgtitle h2{font-size:1.3em; margin:0; padding:0}
#thumbtoggler {
text-align: right;
float: right;
width: 48%;
right:0;
z-index:1100;
}
#thumbdisplay {
width: 700px;
}
.clear{clear:both;}
#e2link {font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
padding:5px 0;
color: #FFFFFF;
text-align:left;}
#e2link a {
color: #FFFFFF;
text-decoration:none
}
.tooltip {
color: #fff;
width: 150px;
z-index: 15000;
text-align:left;
}
.tooltip h4 {
font-weight: bold;
font-size: 12px;
margin: 0px;
padding: 8px 8px 2px;
background:#000;
}
.tooltip p {
font-size: 11px;
padding: 1px 8px 8px;
margin:0px;
background: #000;
}#thumbhide {
position: absolute;
}
|
