Ir para conteúdo

Recommended Posts

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

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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

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