Aligning Photo Gallery in all resolutions.
Hello,
I am stuck on properly aligning my photo gallery pictures in all resolutions.
I am using VisualLightBox 4.4 to generate the galleries. I then open the index in dreamweaver.
I have a base background and buttons that I set in behind the gallery. I set all my buttons as
AP Divs and centre align them with css:
left:50% ;
margin-left: (number)px;
And this works to centre and align the added buttons and background properly with all screen resolutions. Now centering and aligning the pictures in the gallery is another thing. VisualLightBox generates the script , and I do not know enough CSS to pin point which scripts I should change to get the pictures to act like my buttons do. Persay if you visit:
bomb-test generated by VisualLightBox.com
If you restore down the page, the banner and buttons move in unicen.
The pictures of the gallery remain in the same spot.
Pulling and shrinking the page you can see this.
I will post the script in hopes some one knows what to change to get these centre aligning with all resolutions. If not, what I'm looking for is a lightbox gallery that I can centre align with all resolutions. If there is an easier one to use to accomplish this it would be much appreciated.
-Andy
This is my source script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>bomb-test generated by VisualLightBox.com</title>
<style type="text/css">
<!--
a img { border:none;}
#wrapper {
position:absolute;
width:864px;
height:856px;
z-index:1;
left:50%;
margin-left:-430px;
background-color: #000000;
top: 4px;
}
body {
background-color: #333;
}
}
.style1 {color: #FFFFFF}
#photo-butt {
position:absolute;
width:136px;
height:34px;
z-index:2;
left: 50%;
top: 82px;
margin-left:-426px;
}
#o-a-butt {
position:absolute;
width:136px;
height:34px;
z-index:3;
left: 50%;
top: 82px;
margin-left:-282px;
}
#pastel-butt {
position:absolute;
width:136px;
height:34px;
z-index:4;
left: 50%;
top: 82px;
margin-left:-140px;
}
#wc-butt {
position:absolute;
width:136px;
height:34px;
z-index:5;
left: 50%;
top: 82px;
margin-left:3px;
}
#res-butt {
position:absolute;
width:136px;
height:34px;
z-index:6;
left: 50%;
top: 82px;
margin-left:148px;
}
#mm-butt {
position:absolute;
width:136px;
height:34px;
z-index:7;
left: 50%;
top: 82px;
margin-left:290px;
}
#test {
position:absolute;
width:805px;
height:759px;
z-index:8;
left: 107px;
top: 133px;
}
-->
</style>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="bomb-test, VisualLightBox, LightBox, Photo Gallery, Lightbox Gallery2, Lightbox Image Viewer" />
<meta name="description" content="bomb-test created with VisualLightBox, a free wizard program that helps you easily generate beautiful Lightbox-style web photo galleries" />
<link rel="shortcut icon" href="favicon.ico" />
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<script src="engine/js/vlbdata.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
</head>
<body>
<div id="wrapper"><img src="../../backgrounds/HQ-PG-BG-base2.jpg" width="864" height="949" /></div>
<label></label>
<div style="width: 790px;height: 600px;overflow:-moz-scrollbars-vertical;overflow-y:auto;
margin-left:23%;
margin-top:170px;">
<div id="photo-butt"><em> </em><img src="../../backgrounds/buttons/gal-gal-buttons/photo-butt.jpg" width="136" height="34" /></div>
<div id="o-a-butt"><img src="../../backgrounds/buttons/gal-gal-buttons/o&a-button.jpg" width="136" height="34" /></div>
<div id="pastel-butt"><img src="../../backgrounds/buttons/gal-gal-buttons/pastels-button.jpg" width="136" height="34" /></div>
<div id="wc-butt"><img src="../../backgrounds/buttons/gal-gal-buttons/watercolour-button.jpg" width="136" height="34" /></div>
<div id="res-butt"><img src="../../backgrounds/buttons/gal-gal-buttons/resources-button.jpg" width="136" height="34" /></div>
<div id="mm-butt"><img src="../../backgrounds/buttons/gal-gal-buttons/mm-button.jpg" width="136" height="34" /></div>
<div id="test"></div>
<!-- Start VisualLightBox.com BODY section id=1 -->
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/_igp6217_5_6.jpg" title="_IGP6217_5_6"><img src="data/thumbnails1/_igp6217_5_6.jpg" alt="_IGP6217_5_6"/></a>
<a class="vlightbox1" href="data/images1/_igp5354.jpg" title="_IGP5354"><img src="data/thumbnails1/_igp5354.jpg" alt="_IGP5354"/></a>
<a class="vlightbox1" href="data/images1/_igp5366.jpg" title="_IGP5366"><img src="data/thumbnails1/_igp5366.jpg" alt="_IGP5366"/></a>
<a class="vlightbox1" href="data/images1/_igp5402.jpg" title="_IGP5402"><img src="data/thumbnails1/_igp5402.jpg" alt="_IGP5402"/></a>
<a class="vlightbox1" href="data/images1/_igp5417.jpg" title="_IGP5417"><img src="data/thumbnails1/_igp5417.jpg" alt="_IGP5417"/></a>
<a class="vlightbox1" href="data/images1/_igp5418.jpg" title="_IGP5418"><img src="data/thumbnails1/_igp5418.jpg" alt="_IGP5418"/></a>
<a class="vlightbox1" href="data/images1/_igp5483_acopy_2and2more.jpg" title="_IGP5483 acopy 2And2more"><img src="data/thumbnails1/_igp5483_acopy_2and2more.jpg" alt="_IGP5483 acopy 2And2more"/></a>
<a class="vlightbox1" href="data/images1/_igp5528.jpg" title="_IGP5528"><img src="data/thumbnails1/_igp5528.jpg" alt="_IGP5528"/></a>
<a class="vlightbox1" href="data/images1/_igp5536aa.jpg" title="_IGP5536aa"><img src="data/thumbnails1/_igp5536aa.jpg" alt="_IGP5536aa"/></a>
<a class="vlightbox1" href="data/images1/_igp5562a.jpg" title="_IGP5562a"><img src="data/thumbnails1/_igp5562a.jpg" alt="_IGP5562a"/></a><a class="vlb" style="display:none" href="http://visuallightbox.com">Free Slideshow Script by VisualLightBox.com v4.4</a>
</div>
<!-- End VisualLightBox.com BODY section -->
</body>
</html>
This is the vlightbox1.css script:
#vlightbox1 {
width:100%;
zoom:1;
left:50%;
}
#vlightbox1 .vlightbox1 {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:5px;
width:160px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
opacity:0.87;
z-index:20;
}
#vlightbox1 .vlightbox1 a{
margin:0;
}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
opacity:1;
}
#vlightbox1 .vlightbox1 img{
display:block;
border:none;
margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}
I have the visuallightbox.css script but I believe that only applies to the lightbox itself.
CSS Codes
Reply With Quote
Bookmarks