Page 1 of 1

[SOLVED] Promo Tag over images CSS

Posted: Thu Nov 14, 2013 12:37 am
by dynozor
Hello

I try to add a tag over the thumbs in the bestseller modul or any other moduls but for the moment I have this problem

see picture. I wanted to be like on picture 2 but I have it like on picture 4 thanks for your help

testseller.tpl

Code: Select all

<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-product">
      <?php foreach ($products as $product) { ?>
      <div itemscope itemtype="http://schema.org/Product">
        
		<?php if ($product['special']) { ?>
			<div id="over"><img itemprop="image" src="../image/data/ruban_promo.png" alt="Promo" /></div>
		<?php } ?>
		
		<?php if ($product['thumb']) { ?>
			<div class="image"><a href="<?php echo $product['href']; ?>"><img itemprop="image" src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
		<?php } ?>
		
        <div class="name"><a href="<?php echo $product['href']; ?>"><span itemprop="name"><?php echo $product['name']; ?></span></a></div>
        <?php if ($product['price']) { ?>
        <div class="price">
          <?php if (!$product['special']) { ?>
          <span itemprop="price"><?php echo $product['price']; ?></span>
          <?php } else { ?>
          <span class="price-old"><?php echo $product['price']; ?></span><br /><span itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="price-new"><span itemprop="price"><?php echo $product['special']; ?></span></span>
          <?php } ?>
        </div>
        <?php } ?>
      </div>
      <?php } ?>
    </div>
  </div>
</div>

stylsheet.css
#over {
float: left;
display: block;
position: relative;
top: -5px;
left: -5px;
}

...
.box-product .image {
position: relative;
margin-bottom: 0px;
margin-top: 5px;
}
.box-product .image img {
padding: 0px;
border: 1px solid #000000;
}
...
for more help see http://www.moto-dynozor.com the bestseller are on rnd so they may not be all the time reload to see them

thanks

Re: Promo Tag over images CSS

Posted: Fri Nov 15, 2013 5:04 am
by florinsith
See below the code, the over class modified (first change from id to class in the tpl) plus a new piece of code that needs added

Code: Select all

.over {
 float: left;
 display: block;
 position: absolute;
 z-index: 1;
 top: -5px;
 left: -5px;
}
.box-product > div {
 position: relative;
}

Re: Promo Tag over images CSS

Posted: Fri Nov 15, 2013 2:16 pm
by dynozor
YYYYYYYYEEEEEEEEEEEEEEEEEEEEEEEEES!!!!!!!!!!!!!!

thanks man