CODEWITHSUNDEEP
phphtmlcss
gator
gator

Reputation: 3523

Overlay two images: keep positioning

I'm trying to make an image overlay another if an item is out of stock for a website. Here's some sample code:

<html>
    <head>
        <style type="text/css">
            .box {
                display: inline-block;
                vertical-align: top;
                text-align: center;
                min-width: 200px;
                max-width: 200px;
                min-height: 200px;
                max-height: 400px;
                margin-bottom: 5px;
                margin-right: 5px;
                margin-top: 5px;
                margin-left: 5px;
            }
            .prod {
                position: absolute;
                height: 120px;
                width: 200px;
            }
            .out {
                position: relative;
                height: 120px;
                width: 200px;
                z-index: 1;
            }
            .prodex {
                height: 120px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <?php
            for ($i = 1; $i <= 10; $i++) {
                echo "<div class='box'>";
                echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />";
                if ($i == 4 || $i == 7) {
                    echo "<img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />";
                }
                echo "<br/>";
                echo "lorem ipsum etc etc";
                echo "</div>";
                if ($i == 5) {
                    echo "<br/>";
                }
            }
            echo "<br/><br/><br/><br/>";
            echo "<div class='box'>";
            echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prodex' />";
            echo "<br/>";
            echo "lorem ipsum etc etc";
        ?>
    </body>
</html>

Here's output:

overlay

(as a side note, is there a fiddle for PHP? I feel kind of wrong copy/pasting entire code like this)

For the first two rows of images, items 4 and 7 are sold out, and the overlay works properly. However, for anything else nothing is aligned correctly. For the third row at the bottom, I've displayed it properly using a third CSS class.

I'm not too good at relative/absolute/etc positioning, it's something to do with that I'm sure. How do I get it such that items not out of stock display like the third row, but items in stock display like the correct ones in the first two?

I could do the below, but I'd rather not use a third class (just the first two).

if ($i == 4 || $i == 7) {
    echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />";
    echo "<img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />";
} else {
    echo "<img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prodex' />";
}

This provides the following output:

overlay2

The problem is I don't want to use an if/else complex and a third CSS class.

Upvotes: 0

Views: 104

Answers (2)

dippas
dippas

Reputation: 60573

With a few changes, I think this is what you are looking for:

added position:relative to .box , deleted position:relative from .prod and changed .out , with adding position:absolute & left:0

EDIT: Since you don't want to use an IF your PHP file, I added a nth-child selector CSS, because you mention items 4 and 7 only to be Sold Out.

see snippet below:

.box {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  min-width: 200px;
  max-width: 200px;
  min-height: 200px;
  max-height: 400px;
  margin-bottom: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-left: 5px;
  position: relative;
}
.prod {
  height: 120px;
  width: 200px;
}
.out {
  position: absolute;
  height: 120px;
  width: 200px;
  left: 0;
  z-index: 1;
  display:none;
}

.box:nth-child(4) .out, .box:nth-child(7) .out{
  display: inline
}
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>
<div class='box'>
  <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
  <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
  <br/>lorem ipsum etc etc</div>

Upvotes: 1

Miguel
Miguel

Reputation: 20633

Position absolute will be relative to the parent container with position relative.

  .box {
      position: relative; /* make relative */
      display: inline-block;
      vertical-align: top;
      text-align: center;
      min-width: 200px;
      max-width: 200px;
      min-height: 200px;
      max-height: 400px;
      margin-bottom: 5px;
      margin-right: 5px;
      margin-top: 5px;
      margin-left: 5px;
  }
  .prod {
      height: 120px;
      width: 200px;
  }
  .out {
      position: absolute; /* make absolute */
      top: 0;
      left: 0;
      height: 120px;
      width: 200px;
      z-index: 1;
  }
  .prodex {
      height: 120px;
      width: 200px;
  }
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <br/>lorem ipsum etc etc</div>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <br/>lorem ipsum etc etc</div>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <br/>lorem ipsum etc etc</div>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <br/>lorem ipsum etc etc</div>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prod' />
    <img src='http://i.imgur.com/tZky0kp.png' alt='' class='out' />
    <br/>lorem ipsum etc etc</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class='box'>
    <img src='http://stylonica.com/wp-content/uploads/2014/03/cute-dog-baby-wallpaper-hd-32.jpg' alt='' class='prodex' />
    <br/>lorem ipsum etc etc

Upvotes: 1

Related Questions