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 RukasuNiiChan
      ========== Meu Projeto ==========
      * Introdução
      Bem , eu estou no ultimo ano do E.M , e com essa pandemia , algumas adaptações foram tomadas , como todos sabem , a AULA ONLINE , porem , na minha escola não se utiliza a verificação de presença ( Chamada ) por Vídeo , através de um WebCam , e sim a confirmação por digitalização , todos os alunos devem escrever " ok " quando o respectivo professor digitar " chamada " no chat:
      Exemplo 1: https://prnt.sc/uiw9jy
      * Ideia
      Então o que eu pensei , A Ideia Inicial era criar um BOT para identificar a palavra " Chamada " no chat , e então , automaticamente , ele escrevesse " ok " ou " Presente " para assim automatizar o processo e facilitar a minha vida.
      Porem eu descobri uma funcionalidade no Google que são as extensões para o Google Meet que até então eu não sabia que existiam
      Entretanto se alguém que não tem experiencia em extensões mas tem em engenharia de software , me ajudaria da mesma forma
      * Conclusão
      Enfim , a minha ideia é automatizar o processo de " Responder a chamada " durante a aula online ,  como sou um estudante de programação queria muito a ajuda de vocês pra isso , pois meu conhecimento é leigo , qualquer duvida sobre o projeto , podem responder a este tópico pois , irei responder dentro de 24 horas , ou se o interesse nele for grande , me chamem na DM do Discord ( Rukasu#7321 ) 
      ===============================
       
    • By emmanuelsiqueira30
      Pessoal boa tarde.
      Gostaria de saber como posso pegar os valores da linha na tabela <table> que eu clicar no link visualizar dados na coluna opções e aparecer dados do banco daquela linha.
       
       
       
       
    • By daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
    • By joelsonoliveirasouza
      Boa noite pessoal, estou com um problema no momento de buscar os itens dos pedidos, estou utilizando o carregamento de templates Smarty onde no arquivo TPL tenho uma pagina chamada clientes_pedidos.tpl onde contem {foreach from=$PEDIDOS item=P} buscando os dados do pedido e dentro desse foreach preciso ter outro foreach para que possa buscar os itens do pedido para apresentar na pagina clientes_pedidos.tpl, vou anexar algumas imagens. quando insiro foreach dentro do outro ele mostra somente o primeiro dados buscado do banco (ele mostra o mesmo dado em todos os pedidos). Desde já agradeço pela atenção de todos.
       
      Arquivo: clientes_pedidos.tpl
       
      <div class="main-panel" >
          <div class="content">
          {foreach from=$PEDIDOS item=P}
              <div class="container-fluid" style="background: white;">
                  <section class="invoice">
                <!-- title row -->
                <div class="row">
                  <div class="col-xs-12">
                    <h2 class="page-header">
                      <i class="fa fa-globe"></i><i>
                          {if $P.ped_pag_status == 'NAO'} 
                           <td style="width: 15%"><span class="label label-danger">{$P.ped_pag_status}</span></td>
                          {elseif $P.ped_pag_status == 'Pago'}
                            <td style="width: 15%"><span class="label label-success">{$P.ped_pag_status}</span></td>
                          {elseif $P.ped_pag_status == ''}
                            <td style="width: 15%"><span class="label label-danger">Erro no pagamento</span></td>
                          {else}                      
                            <td style="width: 15%"><span class="label label-info">{$P.ped_pag_status}</span></td>
                          {/if}
                      </i>
                      <small class="pull-right">Data: {$P.ped_data}</small>
                    </h2>
                  </div><!-- /.col -->
                </div>
                <!-- info row -->
                <div class="row invoice-info">
                  <div class="col-sm-4 invoice-col">
                    <b>Informações</b><br/>
                    <br/>
                    <b>Codigo Pedido:</b> {$P.ped_id}<br/>
                    <b>Forma Pagamento:</b> {$P.ped_pag_forma}<br/>
                    <b>Nota Fiscal: </b> <a>Baixar</a>
                  </div>
                  <div class="col-sm-4 invoice-col">
                    <b>Dados Entrega</b><br/>
                    <br/>
                      Rua Hebreus, 849, Canaã<br>
                      Ipatinga-Mg, 35.164-170<br>
                  </div><!-- /.col -->
                  <div class="col-sm-4 invoice-col">
                      <b>Dados Contato</b><br/>
                    <br/>
                      Contato: (31) 9 9964-2340<br/>
                      Email: essence@hotmail.com.br<br>
                  </div><!-- /.col -->
                  
                </div><!-- /.row -->
                <br>
                <!-- Table row -->
                <div class="row">
                  <div class="col-xs-12 table-responsive">
                    <table class="table table-striped">
                      <thead>
                        <tr>
                          <th>IMAGEM</th>
                          <th>ITEM</th>
                          <th>QUANTIDADE</th>
                          <th>VALOR</th>
                          <th>DETALHES</th>
                        </tr>
                      </thead>
                      <tbody>                
                          {foreach from=$ITENSPEDIDO item=I}
                            <tr>
                                <td>{$I.1.ped_cod}</td>
                                <td>Call of Duty</td>
                                <td>3</td>
                                <td>R$ 64,50</td>
                                <form name="itens" method="post" action="{$PAG_ITENS}">
                                  <input type="hidden" name="cod_pedido" id="cod_pedido" value="{$P.ped_cod}">
                                  <td><button>Detalhes</button></td>
                                </form>
                            </tr>
                          {/foreach}
                      </tbody>
                    </table>
                  </div><!-- /.col -->
                </div><!-- /.row -->
                <div class="row">
                  <!-- accepted payments column -->
                  <div class="col-xs-6">
                      <br>
                    <p class="lead">Informações Adicionais</p>
                    <p class="text-muted well well-sm no-shadow" style="margin-top: 10px;">
                      Todos os produtos essence são devidamentes embalados, adotando todas as medidas de segurança que seu produto chegue com 100% de sua integridade.
                    </p>
                  </div><!-- /.col -->
                  <div class="col-xs-6">
                      <br>
                    <p class="lead">Data do Pedido 20/06/2020</p>
                    <div class="table-responsive">
                      <table class="table">
                        <tr>
                          <th style="width:50%">Subtotal:</th>
                          <td>R$250,30</td>
                        </tr>
                        <tr>
                          <th>Frete</th>
                          <td>R$10,34</td>
                        </tr>
                        <tr>
                          <th>Desconto</th>
                          <td>R$3,00</td>
                        </tr>
                        <tr>
                          <th>Total:</th>
                          <td>R$363,64</td>
                        </tr>
                      </table>
                    </div>
                  </div><!-- /.col -->
                </div><!-- /.row -->
                <!-- this row will not appear when printing -->
                <div class="row no-print">
                  <div class="col-xs-12">
                    <a href="invoice-print.html" target="_blank" class="btn btn-default"><i class="fa fa-print"></i> TROCA OU DEVOLUÇÃO</a>
                    <button class="btn btn-success pull-right"><i class="fa fa-credit-card"></i> CONFIRMAR RECEBIMENTO</button>
                    <button class="btn btn-primary pull-right" style="margin-right: 5px;"><i class="fa fa-download"></i> AJUDA</button>
                  </div>
                </div>
              </section>
              </div>  
              <div style="width: 100%; height: 20px; background: transparent;"></div>
              {/foreach}
          </div>
      </div>
      </div>
       
      Arquivo: clientes_pedidos.php
       
      <?php 
      $smarty = new Template();
      Login::MenuCliente();
      $pedidos = new Pedidos();
      $pedidos->GetPedidosCliente($_SESSION['CLI']['cli_id']);
      $smarty->assign('PEDIDOS', $pedidos->GetItens());
      $smarty->assign('PAG_ITENS', Rotas::pag_ClienteItens());
      $arrayNumeroPedido = $pedidos->GetItens();
      foreach ($arrayNumeroPedido as $key) {
          $itens = new Itens();
          $pedido = filter_var($key['ped_cod'], FILTER_SANITIZE_STRING);
          $itens->GetItensPedido($pedido);
          $array = array($itens->GetItens());
          $smarty->assign('ITENSPEDIDO', $array);
          
          $smarty->assign('TOTAL', $itens->GetTotal());
      }
      $smarty->display('clientes_pedidos.tpl');
       ?>


    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
×

Important Information

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