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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

Thanks very much,

SG

 
Replies
  • 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;

     

    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
    Apr 13, 2012 2:04 PM   in reply to sally_g

    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:

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