Jump to content
Fórum Script Brasil
  • 0

Ajustar imagem com o texto


bruno.ssilva
 Share

Question

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">
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/ie8.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css"><![endif]-->
</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:[email protected] </div>
        </div>
      </div>
    </div>
  </div>
  
     
  
      
  
</div>
</body>
</html>

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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;

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...