Ajustar imagem com o texto

bruno.ssilva · May 2, 2016

pessoal preciso fazer com que a imagem do bolo fique do lado direito e o texto do lado esquerdo mas não to conseguindo de jeito nenhum, me ajudem por favor.

<!DOCTYPE html>
<html>
<head>
<title>Cake Delights | Product</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">



</head>
<body>
<div id="header">
<div>
<div>
<div id="logo"> <a href="#"><img src="" width="235" height="150"></a> </div>
<div> </div>
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li class="current"><a href="product.html">Bolos</a></li>
<li><a href="about.html">Tortas</a></li>
<li><a href="services.html">Doces Diversos</a></li>
<li><a href="blog.html">Quem Somos</a></li>
<li><a href="contact.html">Contato</a></li>
</ul>
<div class="section1"> <a href="#"></a> </div>
</div>
</div>

<div id="content">
<div>
<h1>The Pastry shop</h1>
<ul>
<li>
<div>
<div>
<h2><a href="#">Titulo do Doce</a></h2>\
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</p>
</div>


<a href="images/bolos/bolo1.jpg"><img src="images/bolos/bolo1.1.jpg"width="350" height="250" ></a> </div>

</li>
<li>
<div>
<div>
<h2><a href="#">Titulo do Doce</a></h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
</div>
<a href="images/bolos/bolo2.jpg"><img src="images/bolos/bolo2.2.jpg"width="450" height="250"></a> </div>
</li>
<li>
<div>
<div>
<h2><a href="#">Titulo do Doce</a></h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
</div>
<a href="images/bolos/bolo3.jpg"><img src="images/bolos/bolo3.3.jpg"width="450" height="250"></a> </div>
</li>
<li>
<div>
<div>
<h2><a href="#">Titulo do Doce</a></h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
</div>
<a href="images/bolos/bolo4.jpg"><img src="images/bolos/bolo4.4.jpg"width="250" height="210"></a> </div>
</li>
<li>
<div>
<div>
<h2><a href="#">Titulo do Doce</a></h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
</div>
<a href="images/bolos/bolo5.jpg"><img src="images/bolos/bolo5.5.jpg"width="450" height="250"></a> </div>
</li>
<li>
<div>
<div>
<h2><a href="#">Titulo do Doce</a></h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
</div>
<a href="#"><img src="images/bolos/bolo6.6.jpg"width="450" height="250"></a> </div>
</li>


<li>
<div>
<div>
<h2><a href="#">Titulo do Doce</a></h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
</div>
<a href="#"><img src="images/Nova pasta/doce0.1.jpg" alt="" width="450" height="250"></a> </div>
</li>

<li>
<div>
<div>
<h2><a href="#">Titulo do Doce</a></h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
</div>
<a href="#"><img src="images/Nova pasta/doce13.1.jpg" alt="" width="450" height="250"></a> </div>
</li>


</ul>
</div>

</div>
<div id="footer">
<div class="home">
<div>
<div class="aside"> <br>
<br>
<br>
<br>
<br>
<div class="connect"> <span>Redes sociais</span> <br>
<img src="images/logoface.png" width="50" height="47"> <img src="images/Instagram.png" width="50" height="47"> <img src="images/twitter-round-icon.png" width="50" height="47"> <br>
<br>
<div class="connect"> <span>Contato</span> Telefone:(11)5827-4617 <br>
Endereço: Rua Maestro Von Karajan N°4 <br>
Email:brunocontato_27@yahoo.combr </div>
</div>
</div>
</div>
</div>





</div>
</body>
</html>

thiagoquevedo · May 12, 2016

Olá Bruno, tudo certo?

Tem algumas div's desnecessárias no teu código, mas enfim.

Para alinhar do jeito que você quer, você pode utilizar "float" dos elementos e definir o "a" com "display:block; float:right;".

Ficaria +/- assim:

#content li div div {float:left;width:tamanho_desejado;}

#content li div a {float:right;width:tamanho_desejado; dispaly:block}

Mas sugiro que você refaça essa estrutura, para algo assim:

<li>  
  <div class="img_texto">            
    <h2><a href="#">Titulo do Doce</a></h2>          
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </p>
  </div>
  <div class="img_bolo"><a href="images/bolos/bolo1.jpg"><img src="images/bolos/bolo1.1.jpg"width="350" height="250" ></a></div>
</li>

Qualquer dúvida me avise.

Abraço;

Sign In

Ajustar imagem com o texto

Question

bruno.ssilva

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

thiagoquevedo

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity