Jump to content
alisonalves

Layout com coluna da direita fixa

Recommended Posts

Olá pessoal. Tenho uma dúvida que sei que é bem básica mas não estou conseguindo aprender sozinho. Antigamente usava o Dreamweaver e nele temos a opção de montar o template e definir quais as áreas do site serão editáveis, ou seja, o menu e a coluna direita aparecem em todas as páginas mas o conteúdo da esquerda é editável. Agora como estou aprendendo sobre layout responsivo, grids e tal gostaria de saber. Sem utilizar o dreamweaver como faço para deixar o menu e a coluna da direita fixas e poder editar apenas a coluna da esquerda? Como eu faço para mostrar para todas as paginas que a coluna da direita vai mostrar o mesmo conteúdo. Assim quando eu atualizar a coluna da direita já atualiza em todas as páginas. Obrigado pela força

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 lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
    • By Jack Oliveira
      Ola boa noite
       
      Galera preciso de uma ajuda de vocês aqui..
       
      Estou tentando deixa a imagem de fundo do header com uma mascara negra transparente porem fica até a logo do site transparente e com mascara branca
      que não é o meu objetivo..
       
      e deixa apenas a imagem de fundo transparente e negra
       
      Fiz no css da seguinte forma.
       
      <style> .bg-img{ background-image: url('assets/bg/banner-fundo.png'); background-size: cover; position:relative; background-color: rgba(242,17,125,0.91); filter:opacity(alpha=60); -moz-opacity:0.9; opacity:0.6; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); transition: 0.3s; } </style> A parte do html esta assim
       
      <header class="bg-img"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-4"> <a href="./" class="logo" style="border: 5px solid #ffffff; background-color: rgba(242,17,125,0.91)"> <img src="assets/logo/minha-logo.png" alt="" title=""> </a> </div> <div class="col-lg-9 col-md-8 dados"> <h1 id="wa7_font">Minha Empresa</h1> <h2 id="wa7_font">Minha Categoria</h2> <br> <div class="telefones"> <a href="tel:556699999999" class="fixo"> <i class="fas fa-phone-volume"></i> <span>(66) 9999-9999</span> </a> <a href="tel:5566999999999" class="celular"> <i class="fas fa-mobile-alt"></i> <span>(66) 9.9999-9999</span> </a> </div> <div class="endereco" id="wa7_font_letra"> <p> <i class="fas fa-map-marker-alt"></i> Rua: Palmas, 2345, Centro - Sorriso/MT </p> </div> </div> </div> </div> </header> Fico no guardo da ajuda ai
    • By Carcleo
      Estou a um tempo tentando criar um slider personalizado.
      De fato, eu até consegui e coloquei no codepen. https://codepen.io/carcleo/pen/yLVOxMv
       
      Mas uma implementação não estou conseguindo fazer.
       
      Nos sliders prontos que pegamos na web, ao redimencionar manualmente o navegador,   a UL que abriga as LI's com os Slides, se redimenciona junto e isso não acontece com o meu, Isto é, ao diminuir a janela do navegador, as imagens acompanham o tamanho das LIs, mas como não consigo redimencinar a UL junto os slides acabam se mostrando de forma errada. 
       
      Não consegui uma forma de fazer o CSS fazer esse serviço. Só consegui com JS.
       
      Se alguém puder ajudar?
       
      Obs.: não quero copiar da internet, meu objetivo é entender a logica da coisa
    • 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 Vanderson Bilck Barbosa
      Boa tarde;
      Busco ajuda com um assunto não muito comum e que já esta me tirando o sono a 2 dias....
      Estou gerando PDFs com o DOMPDF, porém alguns itens que são cadastrados no banco via TextArea não se alinham conforme o restante dos demais.
       
      *** Ressalto que já tentei todas as formas de alinhamento CSS possíveis, tanto diretamente no item quanto no css integrado, limpei os itens no textarea (https://summernote.org/) que são adicionados automático (exemplo: <p></p> ).
       
      1 - Arquivo que busca o arquivo já renderizado .php.
      <?php
      use Dompdf\Dompdf;
      $dompdf = new Dompdf(["enable_remote" => true]);
      $dompdf->setPaper('A4', 'portrait');
      ob_start();
      require "views/adm/ordemdeproducao.php";
      $dompdf->loadHtml(ob_get_clean());
      $datagera = date('dmY-His');
      $dompdf->render();
      $dompdf->stream("OrdemProducao_$datagera.pdf", array("Attachment" => false));
       
      2 - trecho do Arquivo que é chamado pelo anterior
                                 <tr style="background-color: #FFFFFF;">
                                      <td>
                                          <table>
                                              <tr>
                                                  <td class="bglaranja1 th titReceita">
                                                      <b>RECEITA:</b> <i><?php echo $receita->gettitulo(); ?></i>
                                                  </td>
                                              </tr>
                                          </table>
                                          <table>
                                              <thead>
                                                  <tr>
                                                      <th class="th" width="60">ITEM</th>
                                                      <th class="th">PRODUTO</th>
                                                      <th class="th" width="60">UN</th>
                                                      <th class="th" width="60">QTDE</th>
                                                  </tr>
                                              </thead>
                                              <tbody>
                                                  <?php
                                                  $receitaItem = new Receita();
                                                  $itensReceita = $receitaItem->getProdutoReceita(array($receita->gettoken()));
                                                  foreach ($itensReceita as $itemCalc) {
                                                  ?>
                                                      <tr class="small">
                                                          <td class="text-center td"><?php echo $itemCalc["id_produto"]; ?></td>
                                                          <td class="td"><?php echo $itemCalc["nome_produto"]; ?></td>
                                                          <td class="text-center td"><?php echo $itemCalc["um_produto"]; ?></td>
                                                          <td class="text-center td"><?php echo number_format(intval($valueCardapio["quantidade"]) * floatval($itemCalc["quantidade"]), 0, '', '.'); ?></td>
                                                      </tr>
                                                  <?php } ?>
                                              </tbody>
                                          </table>
                                          <table style="background-color: #FFFFFF;">
                                              <tr>
                                                  <td class="td small" valign="top">
                                                      <p style="left: 0; text-align: left; margin-left: 0; border: 1px solid #FF0000;">
                                                          <b>MATERIAIS DA RECEITA</b><br />
                                                          <?php echo $receita->getmateriais(); ?>  //item que não se alinha (left) como os demais
                                                      </p>
                                                  </td>
                                              </tr>
                                          </table>
                                          <table>
                                              <tr>
                                                  <td class="td small" valign="top" style="background-color: #FFFFFF;">
                                                      <p style="left: 0; text-align: left; margin-left: 0; border: 1px solid #FF0000;">
                                                          <b>MODO DE PREPARO</b><br />
                                                          <?php echo $receita->getmodo_preparo(); ?> //item que não se alinha (left) como os demais
                                                      </p>
                                                  </td>
                                                  <td class="td small" valign="top" style="background-color: #FFFFFF; width: 160px;">
                                                      <b>FOTO DA RECEITA</b><br />
                                                      <?php if ($receita->gettoken_img() == null) { ?>
                                                          <div class="image_receita" style="background-image: url('<? echo $urlFora;?>/views/adm/res/img/noimage-300.jpg')"></div>
                                                      <?php } else { ?>
                                                          <div class="image_receita" style="background-image: url('<? echo $urlFora;?>/img/<?php echo $receita->gettoken_img(); ?>/0/1')"></div>
                                                      <?php } ?>
                                                  </td>
                                              </tr>
                                          </table>
                                          <table class="mb-1">
                                              <tr>
                                                  <td class="td small">
                                                      <b>Tempo de Preparo:</b> <?php echo $receita->gettempo_preparo(); ?> Minutos</td>
                                                  <td class="td small">
                                                      <b>Rendimento:</b> <?php echo $receita->getrendimento(); ?>
                                                  </td>
                                              </tr>
                                              <tr>
                                                  <td class="td small">
                                                      <b>Tipo da Porção:</b>
                                                      <?php
                                                      $porcao = new Porcao();
                                                      $porcao->loadByIdAtivo($receita->gettb_porcao_id());
                                                      echo $porcao->getmedida_caseira();
                                                      ?>
                                                  </td>
                                                  <td class="td small">
                                                      <b>Medida da Porção (gramas): <?php echo $receita->getvalor_porcao(); ?></b>
                                                  </td>
                                              </tr>
                                          </table>
                                      </td>
                                  </tr>
       
      3 - arquivo gerado em pdf (Imagem Anexo) - Itens vermelhos, são os mesmos comentados no fonte acima //item que não se alinha (left) como os demais

       
×

Important Information

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