Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia,
estou desenvolvendo um projeto e nele tenho um banner animado por jquery bxSlider.
O problema é que algo está acontecendo de errado no layout da div do banner
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.casaarteecia.com.br/imagens/layout_fire.jpg&key=408b2ce8a1e865fad8ce21547c283ce162d371caa98d37fbcb32ed4c6ea850a7" alt="layout_fire.jpg" />
Como podem ver na imagem, a imagem não fica bem posicionada na div #banner, as bordas da div .slides-banner ficam empurrando a imagem para baixo.
Tenho pouca experiência por isso solicito o auxílio de vocês.
Vamos ao código
> <body><div id="geral">
<?php include_once("configuracoes/funcoes_php.php");
include_once("configuracoes/topo.php"); ?>
<div id="banner">
<div class="slides-banner"><div style="width:100%;position:relative;margin:0;overflow:hidden" class="bxslider_container">
<ul id="slides-banner">
<?php $sql_img=mysql_query("SELECT tb_produtos.produto_id,tb_produtos.imagem as imagem_produto,tb_produtos.produto,tb_produtos_banner.imagem_id,tb_produtos_banner.imagem FROM tb_produtos INNER JOIN tb_produtos_banner ON tb_produtos.produto_id=tb_produtos_banner.produto_id ORDER BY RAND() LIMIT 5") or die (mysql_error());
if(mysql_num_rows($sql_img)!=0) {?>
<?php while($row=mysql_fetch_array($sql_img)){?>
<li><a href="#"><img src="<?php print $path;?>/imagens/banner/<?php print $row["imagem"];?>" alt="<?php print $row["oferta"];?>" title="<?php print $row["oferta"];?>"/></a>
</li>
<?php } #while
} #if?>
</ul>
</div>
</div><!-- slides-banner -->
</div><!-- banner -->
<div id="categorias">
<ul>
<li class="light"><h1>Teste 1</h1></li>
<li class="dark"><h1>Teste 2</h1></li>
<li class="light"><h1>Teste 3</h1></li>
<li class="dark"><h1>Teste 4</h1></li>
</ul>
</div><!-- categorias -->CSS
body{background:#000;font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif}#geral{width:980px;height:410px;height:auto !important;min-height:410px;margin:0 auto;background:none}
/CONTEÚDO/
#conteudo{width:100%;height:410px;height:auto !important;min-height:410px;margin:0;background:#FFF}
/banner/
#banner{width:980px;height:310px;margin:5px 0 0 0;background-color:#FFF;border:solid 1px #99CC00}
.slides-banner {width:980px;height:310px;padding:0;margin:0;border:solid 1px #FFCC00}/div anterior a ul/
#slides-banner {height:980px;overflow:hidden}/ul/
#slides-banner .slide-content {width:980px;height:310px;margin:0}
#slides-banner li {width:980px;margin-left:2px}
/ categorias inicial /
#categorias{width:100%;height:200px;margin:10px 0 0 0;font:bold 14px;color:#000;background:#FFF}
#categorias h1{line-height:30px;text-align:center;font:bold 14px;margin:0;color:#FFF;clear:left;background:#A8252A;text-transform:uppercase}
#categorias ul {margin:5px 0;padding:0;list-style:none;white-space:normal}
#categorias ul li {width:242px;height:150px;display:inline-block;padding:0;background:none;vertical-align:top}
Carregando comentários...