Ir para conteúdo
  • ×   Você colou conteúdo com formatação.   Remover formatação

      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.

  • Conteúdo Similar

    • Por Sapinn
      Opa galera tudo beleza? Então criei um layout de um dashboard com css grid e eu gostaria de fixar o menu lateral na esquerda e a barra que está em cima e quando eu rolasse para baixo a unica coisa que mexesse fosse o conteúdo da direita. Já tentei usar o position fixed mas ele quebra a página, tentei usar o position: sticky mas ele não funciona. Alguém sabe como resolver isso ?
    • Por Artur Mendonça
      Olá amigos.
      espero que estejam todos bem.
       
      Estou tentando criar uma galeria de imagens e colocar nestas um botão para votação (Gosto como no Facebook).

      Já consegui criar a galeria e colocar o Like nas imagens, mas acontece que quando  as imagens passam para a linha de baixo o botão Like não acompanha a imagem.
       
      Junto uma imagem para exemplificar como está e como deveria ser.
       
      O CSS está assim
      h1 { text-align: center; color: forestgreen; margin: 30px 0 50px; } .container h2 { text-align: center; color: rgb(8, 8, 8); margin: 30px 0 50px; } .gallery { margin: 10px 50px; padding-right: 0px; padding-left: 0px; } .gallery img { width: 230px; padding: 0px; opacity: 0.5; filter: grayscale(10%); transition: 1s; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; margin-right: 0px; border: 2px solid #ccc; border-radius: 10%; } .ilike { display: grid; border-radius: 10%; box-sizing: border-box; text-align: left; padding: 15px; font-size: 20px; vertical-align: top; position: absolute; z-index: 1000; margin-top: 10px; margin-left: 10px; overflow: hidden; color: white; } O código da página da galeria de fotos está assim:
      <div class="gallery"> <?php $sql = "SELECT * FROM tbl_gallery where aid=$aid"; $num_rows = mysqli_num_rows(mysqli_query($conectar, $sql)); $result = mysqli_query($conectar, $sql); while ($row = mysqli_fetch_array($result)) { $gimage = $row['gimages']; $fotoid = $row['gid']; $likes = $row['likes']; ?> <a href="páginapararegistarovoto" ?> "><i class="far fa-thumbs-up ilike" alt="Vote"> <?php echo $likes; ?> </i></a> <i class="inum" > <?php echo "Foto " . $fotoid; ?> </i> <?php echo "<a href='../fotos/$gimage' data-lightbox='mygallery' data-title='Foto n.º: $fotoid'><img src='../thumbnails/$gimage' class='pic'></a>"; } ?> </div>  
       
       

    • Por Sherlock02
      Olá!
       
      Eu estou tentando fazer um layout de postagem em que o primeiro ocupa a largura de 100%. Os demais são dispostos em grid, dois posts.
      (Vou anexar uma imagem para exemplificar o que desejo).
       
      Segue o código:
      .post:first-child{width:100%;position:relative;} .post{margin-bottom:60px;width:48.8%;float:left;background:#eee} .post:nth-child(2n+2){margin-right:30px;}  
      <div  id='mainwrapper'> <div class="post">   <div class="post-entry">        1 Post com width 100%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        2. Post com width 48%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        3. Post com width 48%. Here goes my post.   </div> </div>   </div><!-- mainwrapper--> Esse código que fiz não me satisfez por completo porque o post da direita não "gruda" no canto, então está ficando desigual o primeiro e os demais.
       
      Eu gostaria de saber se não existe uma forma mais prática de fazer esse código.
      Obrigada!

    • Por marcelobbt
      Estava tentando criar um leiaute com o formato GRID, mas me deparei com um problema. Não consigo colocar DIV dentro de uma DIV do leiaute do GRID.
       
      Queria saber como faço isso. Abaixo segue exemplo onde no div "col2" queria colocar duas div, uma do lado da outra:
       
      CSS
      .gridcontainer { display: grid; justify-content: center; grid-template-columns: 1fr 3fr 3fr 3fr 1fr; grid-gap: 3px; } .gridcontainer > div { /*text-align: center;*/ padding: 10px; /*font-size: 20px;*/ } .esquerda { grid-row: 1 / 5; } .direita { grid-row: 1 / 5; grid-column: 5 / 5; } .principal { grid-column: 2 / 5; background-color: #ffffff; padding-left: 10px; } HTML
      <div class="gridcontainer"> <div class="principal"> <p>texto</p> </div> <div class="col1"> <p>texto</p> </div> <div class="col2"> <div class="esquerda"> <img src="..."> <p>Imagem legenda</p> </div> <div class="direita"> <p>Texto</p> </div> </div> </div>  
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.