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
Post a Comment