Skip navigation

Dreamweaver

sally_g Calculating status...

Currently Being Moderated

What is the best way to place a div on top of a javascript slideshow?

Apr 13, 2012 1:38 PM

Tags: #image #div #dreamweaver #css

Here is my live homepage to which I want to add the div: http://tinyurl.com/d8mro4o

I want to place a diagonal graphic of a red ribbon with a special offer on it in the top left corner overlaying the photos in the slideshow. Not sure how to go about this - as in exactly where to place the div code in the source code and how to position it so it won't move, and the photos will change beneath it.

Can anyone offer a good solution? Size as yet undetermined, but something like this:

Please advise...my strong suit is design not development.

Thanks very much,

417 Views 3 Replies Latest reply: sally_g, Apr 15, 2012 11:28 AM

Replies

Currently Being Moderated

1. martcol,

Apr 13, 2012 1:57 PM in reply to sally_g

Report

I think that this is a situation that calls for position:absolute;

http://www.w3schools.com/cssref/pr_class_position.asp

Make your ribbon and place it in a containing div. Maybe, div.signature or div.banner

give the image position: absolute in your css and a top left postiion.

div.container img {
postion: absolute;
top: number of pixels;
left: number of pixels;
}

And make suer the container div has position: relative:

div.container {
postion: relative;
}

Fingers crossed!

Martin

|
Mark as:
Currently Being Moderated

2. Nancy O.,

Apr 13, 2012 2:04 PM in reply to sally_g

Report

See CSS3 transform:rotate
http://alt-web.com/DEMOS/CSS-Sold-Out-Text-over-image.shtml

Or, create a graphic in Photoshop or Fireworks with a transparent background (denoted by a checkerboard in the workspace).
Save for Web & Devices as a PNG24 with alpha-transparency.

In DW, create an APDiv with a z-index of 1000. Tweak the top and left values until it sits on top of your slideshow.

CSS:

#DivName {
width: xxxpx;
height: xxxpx;
position:absolute;
z-index:1000;
top: xxxpx;
left: xxxpx;
}

HTML:

<div id="DivName"> -- insert your image here -- </div>

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as:
Currently Being Moderated

3. sally_g,

Apr 15, 2012 11:28 AM in reply to Nancy O.

Report

Nancy, thank you so much...I worked with your solution and just had to make the container div relative to make the image stick in place.
Much appreciated!
Sally

|
Mark as: