CSS - two divs "floating" right absolute in div relative -


the puzzle i'm trying solve today requires post div, inside post thumbnail. on top of (layered over) thumb image, based on php queries (that work great) need 2 icons align right behind each other. 'behind' mean x-axis, because right due position:absolute stack on z-axis 1 hidden. is post can have veriety of illustrated car icons (that align right), in cases, trailer icon needed. trailer needs follow behind car. trick is, each of cars , each of trailers has different picture width. here's have far, works except trailer hidden behind car.

.post {margin:0; padding:12px; border:1px solid #fff; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; position: relative;}  .carortrailer {display:block; position:absolute; right: 0; height:32px; margin-top:130px; margin-right: 4px; padding:0; z-index:990; }  .car {background:url("images/ico-car.png") no-repeat scroll right; width: 70px;}  .trailer {background:url("images/ico-trailer.png") no-repeat scroll right; width: 66px;} 

php

<div class="post-block"> <?php if (($post->cp_pvs) == 'trailer') echo '<div class="carortrailer trailer"></div>'; else if... ?> <?php if (($post->cp_car) == 'car') echo '<div class="carortrailer car"></div>'; else if... ?> <div class="thumb"><?php if ( $opt->images ) thumbnail(); ?></div> </div> 

btw: understand easy if without icons on thumb, that's requirement unfortunately. making icons of car+trailer possible have 1 car div, although there many combinations of car+trailer, don't idea much. appreciated ;)


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -