Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Então eu resolvi fazer uma galeria de imagens usando Lightbox, só que ele está empurrando o rodapé da página para baixo, além de alterar a cor de fundo do body para preto quando você clica nas fotos para vê-las.
seguem os códigos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<title></title>
<!-- Importando os arquivos .css -->
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/fotos.css" type="text/css" />
<!-- Importando os arquivos .js -->
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.smooth-scroll.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div> <!-- fecha o div header -->
<div id="content">
<div id="light">
<ul>
<li><a rel="lightbox[roadtrip]" href="imgs/foto1.jpg"><img width="100" height="100" src="imgs/foto1.jpg" alt="" /></a></li>
<li><a rel="lightbox[roadtrip]" href="imgs/foto2.jpg"><img width="100" height="100" src="imgs/foto2.jpg" alt="" /></a></li>
<li><a rel="lightbox[roadtrip]" href="imgs/foto3.jpg"><img width="100" height="100" src="imgs/foto3.jpg" alt="" /></a></li>
</ul>
</div> <!-- fecha o div light -->
</div> <!-- fecha o div content -->
<div id="footer">
<p>
</p>
</div> <!-- fecha o div footer -->
</div> <!-- fecha o div wrapper -->
</body>
</html>
@charset "utf-8";#light{
width:400px;
height:370px;
margin:0 auto;
padding-top:30px;
} margin:0;
padding:0;
list-style:none;
} float:left;
display:inline;
margin-right:10px;
} border: 5px #FFF solid;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}#light ul li a img:hover{
border: 5px #F00 solid;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
@charset "utf-8";*{
margin:0;
padding:0;
}body{
text-align:center;
background-color:#F00;
}
#wrapper{
width: 1250px;
height: 800px;
background-image:url(../imgs/wrapper.jpg);
background-repeat:repeat-x;
margin: 0 auto;
}
#header{
width: 1250px;
height: 182px;
background-image:url(../imgs/header.jpg);
background-repeat:repeat-x;
margin: 0 auto;
padding-top:20px;
}
#content{
width: 800px;
height: 555px;
background-image:url(../imgs/content.jpg);
background-repeat:repeat-x;
margin: 0 auto;
text-align:left;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
text-align:left; /*volta o alinhamento padrão*/
}
#footer{
width: 1250px;
height: 58px;
background-image:url(../imgs/footer.jpg);
background-repeat:repeat-x;
clear: both;
padding-top:20px;
}#footer p{
font-family:Arial, Helvetica, sans-serif;
color:#F7F7F7;
font-size:16px;
margin: 0 auto;
}Desde já eu agradeço pela atenção.
Carregando comentários...