Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
galera tenho um lista de promoções e fiz essa lista em <ul> <li> veja em baixo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://4.bp.blogspot.com/-ZKICIxxMhp4/UCKZXp6lJ_I/AAAAAAAAAMM/WfbcY-EmRwA/s1600/img.png&key=3219985bc9c99b40496591b7bffce71b85f7b05cf1e5382e8dc75255f6890579" alt="img.png" />
só que eu queria, que a parte da li aonde tem o desenho veja a oferta em verde sempre fique colado em baixo veja um exemplo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://1.bp.blogspot.com/-lKagR_Wb1bU/UCKZcu1ZkBI/AAAAAAAAAMU/E3aDoh8qW1c/s1600/img2.png&key=1f94eabd1f3d7fdc43c007afb372e3863c5f1344c312d6ddd9b081c05b17c4cb" alt="img2.png" />
veja o codigo
CSS
#promotion-list{width:668px;height:auto;}/ background-color:; /
.promotion{width:668px;height:auto;padding:12px 0 12px 0;display:inline-block;border-bottom: 1px dotted #D1D1D1;z-index:9999;}
#promotion-list .promotion ul,#promotion-list .promotion ul li{width:539px;height:100%;display:inline-block;}/ background-color:; /
.bg-promotion{background:url(img/icons/bg-promotion.jpg) no-repeat;}
#promotion-list .promotion img{width: 119px;height:119px;margin-right:8px;border: 1px solid #D1D1D1;}
#promotion-list,#promotion-list .promotion img , #promotion-list .promotion ul,#promotion-list .promotion ul .info div{float:left;}
#promotion-list .promotion ul .info div{height: 16px;padding-right: 4px;padding-top: 5px;padding-left: 4px;font-size: 11px;color: #666;text-transform: uppercase;}
#promotion-list .promotion ul .info .address{border-right: 1px dotted #D1D1D1;z-index:9999;padding-left:0;}
#promotion-list .promotion ul .info .user-name span{background-position:0px -28px;width: 10px;height:13px;float:left;margin-right:3px;}
#promotion-list .promotion ul .info .address span{width: 8px;height:12px;background-position:-17px -28px;float:left;margin-right:3px;}
#promotion-list .promotion .title h2 a{font-size: 18px;color: black;text-decoration: none;text-transform: uppercase;}
#promotion-list .promotion .description{font-family: Tahoma, Arial, Verdana;font-size: 11px;line-height: 16px;color: #7F7F7F;padding-top:4px;}
.view-deal{padding-top:5px;}
.view-deal a{width:126px;height:24px;text-decoration:none;display:inline-block;}
HTML
<div id="promotion-list">
<div class="promotion">
<a href="#" title=""><img src="img/links/small/show_box_Untitled-5.jpg" width="119" height="119" alt="" title="" /></a>
<ul>
<li class="title"><h2><a href="#" title="#">Titulo</a></h2></li>
<li class="info"><div class="address" ><span class="bg-promotion"></span>Brasilia-df</div><div class="user-name"><span class="bg-promotion"></span>Padaria_londe</div></li>
<li class="description"><p>Descrição da promoção </p></li>
<li class="view-deal"><a href="#" title="" class='bg-promotion'></a></li>
</ul>
</div>
</div>Carregando comentários...