Ir para conteúdo

POWERED BY:

Arquivado

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

Trevor_rs

Galeria de imagens

Por , em Desenvolvimento frontend

Recommended Posts

Trevor_rs    0

Trevor_rs
Postado

Olá, eu estou aqui pedindo ajuda de vocês pois não consigo fazer uma galeria de imagens do estilo desse site: www.deviantart.com, com algumas modificações todas as imagens do mesmo tamanho e não passando da div "pe" e não saindo do local, independente da resolução.

Se poderem comentar acrescentar ou criticar algo do meu layout será de grande ajuda.

Obrigado a todos!

Aqui está meu html e css:

 

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload de imagens</title>
<style type="text/css">
*{
margin:0 auto;
padding:0 auto;
}  
body{
background:#e7e7e7;
}
#linhatop{
position:absolute;
width:100%;
height:263px;
top: 1px;
background:#151515;
}
#lingua {
	position:absolute;
	background:#141414;
	top:1px;
	left:2%;
	width:125px;
    height:30px;
	border-bottom-left-radius:7px;
    border-bottom-right-radius:7px;		
	border-bottom:1px solid #353535;
	border-right:1px solid #353535;
	box-shadow:1px 0 5px black inset;
	z-index:1;
}
#conteudolingua{
font-family: Geneva, Arial, Helvetica, sans-serif; 
font-size:14px;
font-weight:700;
color:#4eb3e7;
z-index:2;
padding-top:6px;
}
#logo {
top:55px;
left:190px;
position:absolute;
z-index:999;
width:100px;
height:100px;
}
#nome{
font:Arial, Helvetica, sans-serif;
font-size:50px;
font-weight:700;
top:70px;
left:240px;
position:absolute;
color:#FFF;
}
#frase{
font-size:15px;
margin-left:85px;
padding-left:85px;
}
#divisoria{
background:black;
position:absolute;
height:1px;
top: 264px;
width:100%;
}
.menu {
width: 100%;
float: left;
font-family:"Arial", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:14px; 
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
z-index:1;
position:absolute;
top:235px;

}
.menu li{
float:left;
padding:0px;
}
.menu li a{
color:#4eb3e7; 
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;

}
.menu li a:hover, .menu ul li:hover a {
background: white; 
color:#333333; 
text-decoration:none;
border-bottom:1px solid #CCC;
}
.menu li ul {
background:white; 
display:none;
height:auto;
padding:-205px 0 0;
margin:-205px 0 0;
position:absolute;
width:200px; 
z-index:100;
box-shadow: 1px 1px 4px black;
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#151515;
color:#ffffff;
text-decoration:none;

}
#galeria {
top: 300px;
width:100%;
height:832px;
position:absolute;	
}
#pe {
position:relative;
margin-top:1099px;
width:100%;
height:200px;
border-top:1px solid #dfdfdf;
background-color:#333333;
box-shadow:inset 1px 1px 5px;
}
   </style>
</head>
<body>
<div id="lingua">
<div id="conteudolingua" align="center">Brasil <img src="2.png" width="15" height="10">
</div> 
</div>
<div id="logo">
</div>
<div id="linhatop">
</div>

<div class='menu'>
<ul>
<li><a href="URL">Home</a></li>
<li><a href="#">Menu</a>
<ul>
<li><a href="URL">Casa 2.1</a></li>
<li><a href="URL">Casa 2.2</a></li>
<li><a href="URL">Casa 2.3</a></li>
<li><a href="URL">Casa 2.4</a></li>
</ul>
</li>
<li><a href="#">Contato</a>
<ul>
<li><a href="URL">Casa 3.1</a></li>
<li><a href="URL">Casa 3.2</a></li>
<li><a href="URL">Casa 3.3</a></li>
<li><a href="URL">Casa 3.4</a></li>
</ul>
</li>

</ul>
</div>

</div>
<div id="divisoria">
</div>
<div id="nome">DeviantART
<div id="frase">where ART meets application!
</div>
</div>

<div id="galeria">

aqui está o que eu não consigo fazer, a galeria de imagens do estilo desse site: www.deviantart.com, com algumas modificações todas as imagens do mesmo tamanho e não passando  da div "pe" e não saindo do local, independente da resolução. 

</div>
<div id="pe">




</div>
</body>
</html>

 

 

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