Ir para conteúdo

Meireles Hugo

Members
  • Total de itens

    3
  • Registro em

  • Última visita

Reputação

0 Comum

Sobre Meireles Hugo

  1. Posição de conteúdo

    Resolvido obrigada.
  2. Posição de conteúdo

    Sou tuga e nos usamos para grupos, peço desculpa do "ola malta". vou ver se resulta obrigada.
  3. Posição de conteúdo

    ola malta. será que alguém me pode ajudar a resolver um problema de posição passo a explicar. Tenho esta estrutura: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Slide</title> </head> <body> <section id="works"> <div id="esq">&#60;</div> <div id="dir">&#62;</div> <div class="wrap-slide"> <div class="col"> <img src="img/work.png" alt=""> <div class="conteudo"> <h2>Titulo</h2> <p>Tecnologias utilizadas:HTML + CSS + JAVASCRIPT</p> <p>Descrição</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis eos sapiente unde repellendus, fugiat eius itaque dolorem perspiciatis sunt eaque. </p> </div> </div> <div class="col reverse"> <img src="img/work.png" alt=""> <div class="conteudo"> <h2>Titulo</h2> <p>Tecnologias utilizadas:HTML + CSS + JAVASCRIPT</p> <p>Descrição</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis eos sapiente unde repellendus, fugiat eius itaque dolorem perspiciatis sunt eaque. </p> </div> </div> <div class="col"> <img src="img/work.png" alt=""> <div class="conteudo"> <h2>Titulo</h2> <p>Tecnologias utilizadas:HTML + CSS + JAVASCRIPT</p> <p>Descrição</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis eos sapiente unde repellendus, fugiat eius itaque dolorem perspiciatis sunt eaque. </p> </div> </div> </div> </section> <section id="texto"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi minus fuga totam animi quae tempore sapiente, voluptates excepturi laudantium iusto dicta dolores facere ut, obcaecati cupiditate aut, odio unde eaque explicabo quisquam? Cum possimus doloribus numquam eius. Voluptatum impedit recusandae necessitatibus dolorem itaque at reprehenderit, soluta hic praesentium, libero architecto ut sint corrupti non voluptatem! Consequuntur, maxime blanditiis. Voluptatem accusantium, harum consequatur ipsa libero perspiciatis quisquam nesciunt numquam in eveniet corrupti iure quas odio mollitia voluptatum molestiae, veniam recusandae suscipit inventore vel hic! Totam eveniet dolorem reiciendis cum, nam doloribus itaque id maxime repellendus deserunt, inventore quis vero. Aut vitae nesciunt minima sit officia enim! Laborum placeat incidunt, aliquam nemo, quas eaque porro obcaecati cum totam nisi excepturi illo quos magnam sit quis officiis fugiat exercitationem voluptas rem sequi, officia accusantium quo velit! Libero tenetur, iusto dolorum magni aspernatur in nesciunt fugit laboriosam consequatur reiciendis illum nulla ullam accusamus dolor cum est assumenda. Molestias tenetur quod, vitae ducimus voluptates deserunt ipsa ipsum dignissimos facere sint! Harum possimus repudiandae impedit earum sequi qui voluptas debitis officiis iste, ratione, quas quisquam veritatis maiores sapiente neque numquam inventore commodi natus, consectetur amet exercitationem ipsa. At, ipsam impedit aliquid in tenetur doloribus molestiae vero!</p> </section> </body> </html> e este o css: <style> *{box-sizing: border-box;} html, body {margin: 0; padding: 0;} img {max-width: 100%;} #works {max-width:400px; position: relative; margin: 0 auto;} .col { position: absolute; top:0; } .conteudo {max-width: 300px;} #texto {position: relative;} </style> Então o meu problema é ao colocar a .col em posição absolute a section com o texto sobe e fica por cima da imagem a ideia é dar absolute para poder fazer slide com as 3 .col por isso dou absolute . alguem me pode ajudar como resolvo o problema para o texto ficar por baixo da section works ? de modo fluido sem ser fazer top: xx px; agradeço ajuda.
×

Informação importante

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