View Full Version : Position: absolute problem for gallery window in dynamic php page

10-26-2010, 01:28 AM
I have an image gallery I found at > http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails. Code for the whole thing I've set below.The main image display window is set w/ a fixed position w/ this CSS code:

#jgal li img { position: absolute; top: 20px; left: 220px; display: none; }

I want to use it on dynamic php pages that have constantly changing content. I cannot w/ the fixed position. I need it to float correctly to the right of the thumb sidebar images. I've set it into my .tpl pages & it works well w/ no apparant css conflicts. But the main window is still fixed while the thumbs show wherever I place their code. Any ideas how I can float it all as a unit? Example working not in the php page, just regular HTML > http://www.easysavannah.com/gallerytest4.html
The large image window on the right is fixed in position in the page. I need it to have a fixed position right where it's at now in relationship to the sidebar on the left. No matter where I place it's code. Thanks, Gene

PLEASE HELP ME :) I have an inline css tester that I built w/ help from W3Schools.com's CSS examples. > http://www.easysavannah.com/pmdinlinecsslinks.html Maybe this will help someone here.

Whole page HTML below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Lightweight Image Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<style media="screen,projection" type="text/css">

/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }

/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }


<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
this.className = 'active';
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);

gal.addEvent(window,'load', function() {
<ul id="gallery">
<li><img src="http://monc.se/kitchen/stew/gallery/images/je_1.jpg" alt="Josef &amp; Erika 1"></li>
<li><img src="http://monc.se/kitchen/stew/gallery/images/roland_ads_2.jpg" alt="Roland Ads"></li>
<li><img src="http://monc.se/kitchen/stew/gallery/images/cd_2.jpg" alt="CD Cover 2"></li>
<li><img src="http://monc.se/kitchen/stew/gallery/images/cd_1.jpg" alt="CD Cover 1"></li>
<li><img src="http://monc.se/kitchen/stew/gallery/images/je_3.jpg" alt="Josef &amp; Erika 3"></li>
<li><img src="http://monc.se/kitchen/stew/gallery/images/je_2.jpg" alt="Josef &amp; Erika 2"></li>
<li><img src="http://monc.se/kitchen/stew/gallery/images/lktrd_poster1.jpg" alt="LKTRD Poster"></li>
<li><img src="http://monc.se/kitchen/stew/gallery/images/je_4.jpg" alt="Josef &amp; Erika 4"></li>
<li><img src="http://monc.se/kitchen/stew/gallery/images/inside_1.jpg" alt="Inside Magazine"></li>
<li><img src="http://monc.se/kitchen/stew/gallery/images/oceanen_4.jpg" alt="Oceanen"></li>

<p style="clear: both; padding-top: 2em;">Link back to article: <a href="http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a>.</p>
It looks better just checking it at > http://www.easysavannah.com/gallerytest4.html
Any ideas? Thanks again, Gene

10-26-2010, 11:19 AM
Sorry i dont fully understand what it is you are after?
if you are able to give me a better idea that i will try to help as much as i can.

Also you said you wanted it implemented into your php but the links you posted were html???

sorry might just be me its been a weird day.

10-26-2010, 11:30 AM
I think you're stuck with using position:absolute without rebuilding how the gallery works. However, at the moment the large image is positioned absolutely with respect to the page, so wherever you move the ul to, the big image remains in the same place - which I think is your problem.

You can amend this by making the following changes:

#jgal {
list-style:none outside none;

#jgal li img {

Setting position:relative on the ul #jgal means the large image will then be positioned absolutely with respect the the ul, 220px to the right of it, wherever it is. The amended top on the image just aligns it with the top of the ul.