Jump to content
Leonel57

Imagens ao lado do menu lateral

Recommended Posts

Prezados,

Fiz um menu lateral mas ao colocar várias imagens ao lado elas ficam na parte de baixo.

Ele é um menu de produtos.

Poderiam me ajudar?

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title></title>
  <style type="text/css">
   .container {
      border: 1px solid gray;
      display: inline-block;
      float: right;
      margin-right: 150px;
      margin-left: 300px;
     border-spacing: 5px;
     padding: :5px;
     
    }

    p {
      text-align:center;
    }
    .menulateral{
      background-color:#5F9EA0;
      width: 250px;
      height: 1000px;
      
    }

      ul{
        list-style: none;
     }

    ul li a{
        display: block;
        font-size: 18px;
        font-family: 'Arial';
        padding: 10px;
        border-bottom: solid 1px #FFFFF0;
        color: #ccc;
        text-decoration: none; 
        
    }
    ul li span{
        float: right;
        padding-right: 10px;
      }

      ul li a:hover{
        background-color: #5b859a;
    }
    .conteudo{
      display: table;

    }

  </style>
</head>
<body>
  <nav class = menulateral>
        
            <ul>
                <li><a href="racao-cachorro.html">Ração para Cachorros</a></li>
                <li><a href="">Peticos e Ossos</a></li>
                <li><a href="">Casas e Tocas</a></li>
                <li><a href="">Coleiras</a></li>
                <li><a href="">Tapetes e Fraldas</a></li>
                <li><a href="">Briquendos</a></li>
                <li><a href="">Camas e Cobertores</a></li>
                <li><a href="">Portões</a></li>
                <li><a href="">Grades</a></li>
            </ul>

            <ul>
                  <li><a href="petisco-gato.html">Petiscos para Gatos</a></li>
                  <li><a href="areia-gato.html">Areia</a></li>
                  <li><a href="">Beleza e Limpeza</a></li>
                  <li><a href="">Arranhadores e Brinquedos</a></li>
                  <li><a href="">Coleiras e Peitorais</a></li>
                  <li><a href="">Roupas</a></li>
            </ul>

            <ul>
                  <li><a href="alimentacao-passaro.html">Alimentacao</a></li>
                  <li><a href="gaiola-passaro.html">Gaiolas</a></li>
                  <li><a href="">Puleiro</a></li>
                  <li><a href="">Acessorios</a></li>
                  <li><a href="">Farmácia</a></li>
            </ul>

            <ul>
                  <li><a href="alimentacao-peixe.html">Alimentacao</a></li>
                  <li><a href="aquario-peixe.html">Aquários</a></li>
                  <li><a href="">Decoração</a></li>
            </ul>

          </nav>

          <nav class = "conteudo">
              <div class="container">
                  <img src="imagem/areiagato.png" height="100" width="100"  />
                   <p>This is image 1</p>
              </div>
  <div class="container">
    <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100"  />
    <p>This is image 2</p>
  </div>
  <div class="container">
    <img src="imagem/quatree.png" height="100" width="100"  />
    <p>This is image 3</p>
  </div>
  <div class="container">
    <img src="imagem/areiagato.png" height="100" width="100"  />
    <p>This is image 1</p>
  </div>
  <div class="container">
    <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100"  />
    <p>This is image 2</p>
  </div>
  <div class="container">
    <img src="imagem/quatree.png" height="100" width="100"  />
    <p>This is image 3</p>
  </div>
  <div class="container">
    <img src="imagem/areiagato.png" height="100" width="100"  />
    <p>This is image 1</p>
  </div>
  <div class="container">
    <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" />
    <p>This is image 2</p>
  </div>
  <div class="container">
    <img src="imagem/quatree.png" height="100" width="100"  />
    <p>This is image 3</p>
  </div>
</div>
</nav>
</body>
</html>

 

areiagato.png

bravecto.png

quatree.png

Share this post


Link to post
Share on other sites

Primeiro: Faça correções na estrutura do HTML "está com erro", de cara vejo isso, mas pode haver mais outros tipos se levar isso em consideração.

23 horas atrás, Leonel57 disse:

<nav class = menulateral>

 

Segundo: Cuidado com definições levianas no CSS

23 horas atrás, Leonel57 disse:

p { text-align:center; }

 

Enfim, se eu entendi você que as imagens uma ao lado da outra certo?

Nesse caso esqueça das imagens olhe para a estrutura HTML como ela é! Blocos dentro de blocos etc, esse é o segredo de fazer qualquer layout com facilidade...

Citar

Então devo ter um bloco pai que abriga blocos filhos alinhados uns ao lado do outro.

Assim sendo posso adicionar o que quiser dentro dos filhos que esses herdarão a arquitetura de seus parentes.

 

<style>
    * {margin: 0; padding: 0; box-sizing: border-box}

    .lugar_das_images {
        text-align: center
    }
    .imagem_aqui {
        display: inline-block
    }
    .imagem_aqui > img {
        width: 100%;
        max-height: 250px /* Qual é altura máxima que a imagem pode ter? Isso influenciará em sua largura */
    }
</style>

<div class="lugar_das_images">
    <div class="imagem_aqui">
        <img src="????????.???" alt="Exemplo" />
        <p>Imagem em linha</p>
    </div>
    <div class="imagem_aqui">
        <img src="????????.???" alt="Exemplo" />
        <p>Imagem em linha</p>
    </div>
    <div class="imagem_aqui">
        <img src="????????.???" alt="Exemplo" />
        <p>Imagem em linha</p>
    </div>
</div>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By PedroHRLeite
      Estou querendo deixar um rodapé fixo no topo a medida que o mesmo alcança o topo da página, porém estou encontrando dificuldades ao utilizar position: sticky, segue o código completo, se eu colocar a configuração de sticky na classe .side-column funciona bem, porém quero apenas no footer, alguém saber como resolver?
      <!DOCTYPE html> <html> <head> <style> .wideBody .side-column { float: right; order: 2; width: 300px; } .wideBody .side-column footer { position: sticky; position: -webkit-sticky; top: 0; } .wideBody .main-column { align-self: flex-start; float: left; width: 500px; border: 2px solid #4CAF50; } .resultados { border: 2px solid #4CAF50; margin-bottom:25px; position:relative; } footer { border: 2px solid #4CAF50; } </style> </head> <body class="wideBody"> <main> <div> <div class="main-column"> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> </div> <aside class="side-column"> coluna auxiliar <div class="resultados"> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> </div> <footer> rodape fixo </footer> </aside> </div> </main> </body> </html>  
    • By Juan Carlos PT
      Olá, eu quero poder pegar um vídeo do meu canal na Nimo TV e deixar ele em sites parceiros para fortalecer a minha divulgação. Só que não consigo capturar o código <video></video> do html5 do site na Nimo TV. Eles não mostram o formato do vídeo:
       

      Se alguém souber me ajudar, terei enorme gratidão!
       
      OBS: Perdão se alguém postou algo parecido aqui no site, não vi!

    • By Roberto S. Santos
      Bom dia.
      Eu gostaria de postar uma foto do meu computador no facebok usando VB.NET com login automático.
      Teria como fazer em VB.net ou HTML ?
      Obrigado.
    • By Carlos Longo
      Srs Bom dia,
       
      fiz inumeras tentativas para mostrar a imagem com link em:
       <script type="text/javascript"> var imagens =  new Array( '1.jpg', '2.jpg', '3.jpg','4.jpg', '5.jpg', '6.jpg'); var num_img = 6; var img_atual =0; function ChangeImg() { if (img_atual < (num_img - 1) ) { img_atual = img_atual + 1; } else { img_atual = 0; } document["img_apoio"].src = "http://www.ficasimples.com.br/calcfal/prop/" + imagens[img_atual]; var x = setTimeout ("ChangeImg()", 2000); }   </script>  
      ela posteriormente é chamada assim:
      queria que ao clicar na figura fosse chamado o link da figura especifica conforme valor da variavel  imagens[img_atual]/////
      <img name="img_apoio" src="http://www.ficasimples.com.br/calcfal/prop/1.jpg" alt="" border="0"width="190px" height="210px" align="center">  
       
      poderiam me ajudar??
       
      grato
       
      Carlos
    • By RPM13
      Boa tarde, senhores(as)!
      Estou a procura de algum profissional para desenvolver um website para mim.
      Entro mais detalhes no privado.
      Interessados chamar por aqui.
      Obrigado!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.