Hola, me esta pasando lo siguiente:
Tengo el css de mi web y todo funciona barbaro, tuve que hacer una galeria de fotos y puse el famoso visor de Jquery, Lightbox, para su implementacion es necesario de otro css pero la pagina donde utilizo este segundo css me pasa que un div se me corre de lugar, les explico:
CSS de mi sitio
Código:
*{
margin:0px;
padding:0px;
}
body{
margin:0;
padding:0;
background-color:#E3CEB5;
font-size:12pt;
}
#top{
width:100%;
background-color:#46321A;
position:absolute;
margin-top:-15px;
z-index:1 !important;
height:35px;
}
El div top si o si tiene que tener esas propiedades, y como ven esta es un linea pegada arriba. Pero en las paginas que utilizo el otro css me pasa que el div top se baja algunos pixeles y no queda pegada arriba como yo quiero. Aca va el otro css:
Código:
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #E3CEB5; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 50% no-repeat; }
#imageDataContainer{ font: 15px Verdana, Helvetica, sans-serif; background-color: #E3CEB5; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #46321A; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Que puede estar pasando? :S
Les dejo tambien parte del HTML por si sirve de algo. Gracias
HTML
Código HTML:
<head>
<!--ESTILO-->
<link href="estilo.css" rel="stylesheet" type="text/css"/>
<!--ESTILO LIGHTBOX-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div id="top"></div>
</body>