Skip navigation
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:


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:special-offer-work.jpg

























Please strong suit is design not development.


Thanks very much,


  • Currently Being Moderated
    Apr 13, 2012 1:57 PM   in reply to sally_g

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



    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!



    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 2:04 PM   in reply to sally_g

    See CSS3 transform:rotate


    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.




    #DivName {

    width: xxxpx;

    height: xxxpx;



    top: xxxpx;

    left: xxxpx;






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



    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points