Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jnejunior

float right não funciona como esperado

Recommended Posts

salve pessoal...

 

tenho uma página, e nessa página tem uma imagem que esta com uma classe que tem float:right, mas que não esta sendo obedecida, alguem pode me ajudar?

 

xhtml

<div class="item-unico"><!-- chamadas/item -->                           
<h2><?php echo $desc; ?></h2>
<p><strong class="valor-destaque" style="background: #fff; padding: 3px 5px;">por R$ <?php echo real($valor); ?></strong></p>
<p><strong class="desc">Marca</strong><?php echo $fabricante; ?></p>
<p><strong class="desc">Descrição</strong> <?php echo $detalhes; ?></p>
<p><strong class="desc">Opções de Parcelamento:</strong></p>
<?php parcela($valor); ?>
<p>* parcela mínima de R$ 5,00</p>
<!-- esta imagem que eu me refiro -->
<img src="imagens/bgformas.gif" alt="formas de pagamentos" class="img-cartao" />
<a href="#" title="clique aqui para comprar" class="btn-comprar canto-arredondado-TL-BL">comprar</a>
</div><!-- fim chamadas/item -->

 

 

 

css da página

#paginas .item-unico {border: none; margin: 0; position: relative; width: 600px;}
#paginas .item-unico .img-unico {border: 4px solid <?php echo $cor['10']; ?>; float: left; margin: 5px 10px 10px 5px;}
#paginas .item-unico h2 {color: <?php echo $cor['10']; ?>; float: left; font: bold 20px <?php echo $fonte['0']; ?>; margin: 5px 0 10px 0;
  width: 275px;}
#paginas .item-unico p {color: <?php echo $cor['10']; ?>; float: right; font: 12px <?php echo $fonte['0']; ?>; margin: 0 0 10px 0;
  width: 275px;}
#paginas .item-unico .desc {border-bottom: 1px dotted <?php echo $cor['10']; ?>; display: block; font: bold 12px Arial;
  line-height: 17px; margin: 10px 0 5px -10px; width: 275px;}
#paginas ul.parcelamento {float: left; margin: -10px 0 10px 4px; width: 275px;}
#paginas ul.parcelamento li {background: #fff; color: #748b8d; float: left; font: 12px Arial; margin: 0 2px 2px 0; padding: 5px 0 5px 2px;
  width: 87px;}
#paginas .img-cartao {background: #fc0; display: block; float: right; height: 81px; width: 252px;}
#paginas .btn-comprar {background: #e8019d;   float: right; margin: 20px 0 10px 0; padding: 5px 10px;}   
#paginas a.btn-comprar {color: #fff; font: 20px Arial; text-decoration: none;}            
#paginas .btn-comprar:hover {text-decoration: underline;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

tenho uma página, e nessa página tem uma imagem que esta com uma classe que tem float:right, mas que não esta sendo obedecida, alguem pode me ajudar?

 

Seja mais específico, o que acontece? O que deveria acontecer? Tem um link? Um print screen que seja?

Assim fica difícil te ajudar cara :P

Compartilhar este post


Link para o post
Compartilhar em outros sites

foi mal amigo...

 

siter.png

 

esta imagem com fundo laranja, dos modos de pagamentos, ela devia ficar a direita, embora esteja com float: right, ela não obedece...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tente colocar um clear: both; nesse box laranja...

não é um bloco é somente imagem com fundo laranja, funcionou o que você me disse, mas as opções de parcelamento que fica acima desta imagem com box laranja é dinâmico, e quando ele mostra menos parcelas a imagem era para subir junto com estas opções, mas fica estático no mesmo lugar

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então você precisa repensar a estrutura:

siter.png

Crie um container para o que está dentro do retângulo azul e o flutue à direita. Retire todos os float's dos elementos dentro dele.

Flutue a imagem à esquerda, dê um clear: both no botão comprar e seja feliz....

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.