PDA

View Full Version : How to layer multiple images in one div?


martincregg
04-24-2010, 02:36 PM
Very new to DW and web development. Version=CS4. I have an image in a div that I am using as a side menu bar. I'd like to layer additional images and text links on this image. I tried dragging the second image on the side menu image using this code:

<div id="SideBar"><img src="../Images/facebook_logo-30x30.png" width="30" height="30" /><img src="../Images/LeftBar.png" width="144" height="587" alt="LeftBar" /></div>

This pushed the menu image to the right.

I think I could use an AP div to do this, but have read that this is not the best solution.

I have uploaded the site here so you can see what I mean: www.mcregg.com/ccc (http://www.mcregg.com/ccc)

Can anyone give me advise on the best way to do this?

Thanks,

Martin

DWcourse
04-24-2010, 06:00 PM
Place the first image as a background-image for the div using css. You can then place other content in the div that will overlay the background.

gentleone
04-25-2010, 10:02 PM
or use CSS3 if you don't give a damn about IE :)
http://www.storiesinflight.com/html5/backgrounds.html

domedia
04-26-2010, 01:08 PM
or use CSS3 if you don't give a damn about IE :)
http://www.storiesinflight.com/html5/backgrounds.html
..or any other browser renderer. I think only WebKit currently supports this.

gentleone
04-26-2010, 01:36 PM
..or any other browser renderer. I think only WebKit currently supports this.

I did only see it in Firefox and Safari on my mac, but in the article it says that the latest version of Chrome also will render multiple CSS background images. I don't know about that... no Chrome on my Mac :)

domedia
04-26-2010, 02:54 PM
Webkit is used by both Safari and Chrome.
I did not know that FF/masc supported it.. maybe FF for PC as well?