SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot chrissie76's Avatar
    Join Date
    Sep 2007
    Location
    plymouth, devon, uk
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool how can i overlay one image on top of another using css realtive positioning

    Hi,
    I am designing a website for an (real) estate agent. when a property is sold i want to place a sold banner over the image (top left hand corner). i have managed to sit one image on top of the other but it makes the <div> that expand so that it would be big enough to accommodate one on top of the other. absolute positioning wouldn't be appropriate, as the images would change position depending on where the sold property was returned in teh query and length of summary details etc etc.
    any thoughts as how to collapse the <div> or another way to skin this css cat would be appreciated. i have searched the web and my css books and this seems to be undocumented, although i have seen it done on sites before. Many Thanks

  2. #2
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Roscoe, IL
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure how much effort this would take on your part as I've not seen your site / code, but my solution would be to place the original property image as a background image in the div.

    Once it's sold, place the 'SOLD' image inside the div.

    Hope that helps.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to assign a z-index to the image. However, in this case, I'd add "sold" to the image itself so that those without CSS know the home has been sold (since it's a content image, rather than a presentational one).

  4. #4
    SitePoint Zealot chrissie76's Avatar
    Join Date
    Sep 2007
    Location
    plymouth, devon, uk
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your reply, i cant put the property image as a background image as it is db generated code, and i already have a drop shadow background on it.

    i have set the z-index, the image sits on top but the container stays way too big, the code that i am referring to
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    <!--
    #options{
    	width:100%;
    	margin:auto;
    	display:inline-table;
    border:1px solid #CCCCCC;
    display:block;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #999999;
    	text-decoration: none;
     
    }
    	img.sold {
    	position:relative;
    	top:200px; 
    	right:0px;
    	border:none;
    	z-index:1;
    	background:none;}
     
    .details-shadow {
      background: url(/images/shadow.png) no-repeat bottom right !important;
      background: url(/images/shadow.jpg) no-repeat bottom right;
      margin: 10px 0 0 0px !important;
      margin: 10px 0 0 5px;
     float:left;
     width:561px;
     margin-left:0px; 
     border:thin #000000 solid;
      }
    .details-shadow img {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #CCCCCC;
      margin: -6px 6px 6px -6px;
      padding: 7px;
      } 
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Relative Positioning</title>
    </head>
     
    <body>
    <div id="options">
     
    <div class='details-shadow'><img src ="images/soldbanner.png" class="sold"/><img src="images/bluebox.png"/></a></div>
    </div>
    </body>
    </html>

    for reference the blue box is about 600px by 500 and the banner is about 100 by 100px;
    to see the code in action:
    http://www.aglobalaudience.com/test/
    any help is appreciated.
    i really need the img-shadow div to collapse back down and then i think i have it..
    cheers
    chrissie

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Give IE layout and clear the floats in FF OP , 100&#37; width's cant have left right borders, position relative on images ? for overlay ? z-index ? .details-shadow img, forces to cascade css for class sold

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    <style type="text/css">
    
    #options{
    margin:auto;
    border:1px solid #CCCCCC;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #999999;
    min-height:1%;
    overflow:hidden;
    }
    * html #options{height:1%;}
    
    .details-shadow .sold{
    position:absolute;
    top:200px;
    right:0px;
    border:none;
    margin:0;
    }
    
    .details-shadow {
    position:relative;
    background: url(/images/shadow.jpg) no-repeat bottom right;
    margin: 10px 0 0 0px;
    float:left;
    width:561px;
    border:thin #000000 solid;
    }
    
    .details-shadow img {
    background: #fff;
    border:1px solid #CCCCCC;
    margin: -6px 6px 6px -6px;
    padding: 7px;
    }
    
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Relative Positioning</title>
    </head>
    
    <body>
    <div id="options">
    
    <div class='details-shadow'><img src ="images/soldbanner.png" class="sold"/><img src="images/bluebox.png"/></a></div>
    </div>
    </body>
    
    </html>

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They can have them if you apply negative margins to the left and right sides (enough to accomodate for the borders), but that's beside the point.

    Off Topic:

    Ben, thank you for covering me here - I'm not at home right now, and will be reinstalling XP either tonight or tomorrow. Enjoy your weekend, I know I'm not.

  7. #7
    SitePoint Zealot chrissie76's Avatar
    Join Date
    Sep 2007
    Location
    plymouth, devon, uk
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Thanks!

    Dear All4nerds,
    Thanks very much for your help, I have been trying to hack away at this for 2 days and it has been driving me crazy!
    it looks like i can fix it up how i want it now.
    thanks again, Chrissie76

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes Dan you are right , but it would hardly be useful here, and it needs 2 or 3 parameters, maintenance ( 100&#37; width margin L R) and kills the best property of a div that of auto-width

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah, I know. That's why I said it was beside the point. It can be done, but it's not necessarily appropriate in all situations.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •