Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

leandrosv

galeria de imagens

Por , em Desenvolvimento frontend

Recommended Posts

leandrosv    0

leandrosv
Postado

Boa noite pessoal!

Estou aprendendo html e css e estou tentando fazer um site para testar meus conhecimentos e publicar ele para mim.

Estou tentando fazer uma galeria de fotos. A primeira linha consegui normal, porém não consigo colocar segunda e terceira linha e assim por diante. Não sei se já tem esse tópico, se puderem me ajudar agradeço. Segue o codificação abaixo html e css:

 

<!DOCTYPE HTML5>
<html lang="PT-BR">
<head>
<title> ... </title>
<meta charset="UTF-8" />
<link href="css\mobile.css" rel="stylesheet" />
</head>
<body>
<div class="conteudo">
<div class="galeria">
<div class="img">
<a href="#"><img src=""></a>
</div>
<div class="img">
<a href="#"><img src=""></a>
</div>
<div class="img">
<a href="#"><img src=""></a>
</div>
</div>
</div>
</body>
</html>

 

 

/*CSS*/
body{
font-family: "Arial", "Helvetica", sans-serif;
}
div.conteudo{
position: relative;
left: 50%;
width: 960px;
margin: 0 0 0 -480px;
border: 1px solid black;
}
div.galeria{
margin-top: 50px;
}
div.img{
margin: 2px;
float: left;
width: 253px;
height: 199;
}
div.img img {
width: 100%;
background: url(../img/1.jpg);
}
div.img img:hover{
border:1px solid black;
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Leandro,

Sua dúvida está bem confusa. Se você quiser que exista mais de uma linha de elementos, é só adicionar mais elementos. Você pode criar uma <div> pai para essa nova linha de fotos e colocar sua propriedade CSS como display: block; - assim ela não vai atrapalhar a anterior.

Veja:

<div class="linha">
   <!-- Aqui vão suas imagens -->
   <div class="imagem">
      <header>Título</header>
      <img src="#">
   </div>

   <div class="imagem">
      <header>Título</header>
      <img src="#">
   </div>
</div>

<div class="linha">
   <!-- Mesma coisa -->
</div>

CSS:

.linha {
   display: block;
   position: relative;
   width: 100%;
}

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito