New to CSS; Stacking with DIV Tags over simple gallery.

**metall5468** · 08-03-2010, 01:57 AM

Hello All,

I am hoping someone can help me. I am new to the simple gallery and new to css. I was wondering how I can get a image stacked on top of the simple gallery to the left.

Here is the site: empireairways.com

the image I would like to go on top to the left of the simple gallery is on page http://empireairways.com/about/empire.html it says "empire airways flights at your schedule to meet your needs. Schedule here." the image dir is: ../images/schedule.jpg.

Any help would be greatly appreciated.

Thanks,

Steve

**Beverleyh** · 08-03-2010, 04:31 PM

Aside from the positioning problem, you really need to address the size of the images you use in your gallery - especially as its the home page.

I've been sat for over 30 seconds on a broadband connection waiting patiently for your home page and slideshow to load - it gets so far then skips to the next image and again I wait...
Then I downloaded some of your images and realised why - they are HUGE - the "citation3.jpg" image for example is 234kb alone (and there are 19 of them), which isnt necessary for something of those physical dimensions.

Using the image optimiser here on DD: http://tools.dynamicdrive.com/imageoptimizer/
you can reduce your "citation3.jpg" image from 234kb to 46kb (at quality 60) - an 80% saving with hardly any visual loss in quality.

Please optimise them all before you launch the site officially otherwise you'll scare your customers away

**metall5468** · 08-03-2010, 04:42 PM

Thanks Beverleyh,

I appreciate the heads up, however those r just temp images until my friend gives me the ones he wants on his site. They will all be coming down in a few weeks before we launch the site. I hope.

Thanks,

Steve

**Beverleyh** · 08-03-2010, 04:51 PM

Phew. Can you substitute in some smaller ones during development as well? I just downloaded 3.7MB worth of images from your home page and that amount of waiting might scare away DD forum helpers too.

**metall5468** · 08-03-2010, 10:20 PM

Ok I kept the images but lowered the quality. I don't want to make anyone upset nor do I want anyone to have to wait for the images to load. However i am still wondering how to stack the image to the left on top of the simple gallery. See Post 1. Any one know?

Thanks,

Steve

**azoomer** · 08-03-2010, 11:18 PM

Hi it looks like you could do something like this:
immediately after
<div id="simplegallery1"></div>
you can add
<div id="stackedimage"><img src="http://empireairways.com/images/schedule.jpg" width="200" height="300" /></div>
making it look like this

Code:

<td valign="top"><!-- InstanceBeginEditable name="Main_Content" -->
<div id="simplegallery1"></div>
<div id="stackedimage"><img src="http://empireairways.com/images/schedule.jpg" width="200" height="300" /></div>
<!-- InstanceEndEditable --></td>

and then use some css like this

Code:

#stackedimage {
	position: absolute; left:50%; margin-left:-440px; margin-top:-350px; z-index:2000;
}

Give it a try and edit it to your needs.

**metall5468** · 08-04-2010, 03:05 AM

Azoomer You Rock! You saved the day again. Thank You so Much.

I had to drop the z-index down because the scheduler image was coming up over the scheduling form ( when u click on the image) but it is working great. Thanks A Million.

Thanks again,

Steve