Dos css

rapuig · #1 (**permalink**) 11/09/2011, 16:57

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>

RafaRG · #2 (**permalink**) 12/09/2011, 16:28

prueba a poner la position:absolute; del "top" de esta manera position:absolute; top:0%; left:0%;

_cronos2 · #3 (**permalink**) 12/09/2011, 17:07

Cita:

Iniciado por RafaRG

prueba a poner la position:absolute; del "top" de esta manera position:absolute; top:0%; left:0%;

Pregunta: ¿Por qué 0%? ¿No es más fácil 0 a secas?
Saludos (:

sauljps · #4 (**permalink**) 12/09/2011, 18:53

Oye no puedes poner el link del sitio web? Porque a mi no me da ningún problema ese código, el div se queda pegado arriba

Una pregunta, porque lo pusiste de height 35 y despues le pones un margin top negativo de 15px? Porque no quitar el margin top y ponerle la altura en 20? Jeje, te ahorra una linea de código ahí

Y si ya tienes el

Código CSS:

Ver original*{
margin:0px;
padding:0px;
}

No necesitas ponerselo al Body, te ahorras otro par de lineas de código ahí :)

RafaRG · #5 (**permalink**) 13/09/2011, 04:54

Cita:

Iniciado por _cronos2

Pregunta: ¿Por qué 0%? ¿No es más fácil 0 a secas?
Saludos (:

sí, también podrías poner 0 a secas. pero te arriesgas a tener problemas con ordenadores que tengan resoluciones distintas. con 0% te aseguras de que estará situado arriba en cualquier resolución.

rapuig · #6 (**permalink**) 13/09/2011, 05:13

Gracias chic@s, con el top: 0% me funciono, pero me ahora me pasa con los divs mas abajo del div "top", voy a ver como lo soluciono, de todos modos gracias por sus consejos.

@sauljps Disculpa que no ponga el link del sitio por acá, es que es de un hotel y me parece que no queda correcto poner el link en una web de ayuda, no estoy desmereciendo a "Foros de la web" sino que quizás en el futuro alguien haga una búsqueda mediante el nombre de tal hotel y aparezca capáz primero el link a esta pagina que a la web del Hotel.

Saludos :)

IsaBelM · #7 (**permalink**) 13/09/2011, 05:18

Cita:

Iniciado por RafaRG

sí, también podrías poner 0 a secas. pero te arriesgas a tener problemas con ordenadores que tengan resoluciones distintas. con 0% te aseguras de que estará situado arriba en cualquier resolución.

puedes mostrarnos alguna referencia donde se documente tal comportamiento?? yo soy de letras, pero sé que 0 kilos de hierro ocupa lo mismo que 0 kilos de paja

RafaRG · #8 (**permalink**) 13/09/2011, 11:47

yo no soy de letras... pero no hace falta serlo para saber que 1kg de paja ocupa más que 1kg de hierro =P
es por eso lo de los porcentajes. claro que da igual poner 0px que 0%. pero no da igual poner 1px que 1%.

sauljps · #9 (**permalink**) 13/09/2011, 12:04

@rapuig te entiendo, bueno la unica solucion que veo es que pongas un screenshot, pero te entiendo, yo también trabajo cno Clientes y no me gustaría estar poniendo el link por ahí a lo feliz

Con lo del porcentaje o no, yo solo voy a decir que SIEMPRE pongo simplemente 0 :D y SIEMPRE me funciona perfecto jajaja en TODOS los sistemas y navegadores :)

IsaBelM · #10 (**permalink**) 13/09/2011, 12:22

Cita:

Iniciado por RafaRG

yo no soy de letras... pero no hace falta serlo para saber que 1kg de paja ocupa más que 1kg de hierro =P
es por eso lo de los porcentajes. claro que da igual poner 0px que 0%. pero no da igual poner 1px que 1%.

veo que no has entendido, o no has querido entender, la coña

con respecto al otro asunto, el caso es que estamos hablando de 0 no de 1, por cual es indistinto usar px, em, %, cm, ...... por que 0 es 0

te reitero mi pregunta, puedes mostrarnos alguna referencia donde se documente tal comportamiento??

RafaRG · #11 (**permalink**) 13/09/2011, 12:30

claro que no puedo. como tú has dicho, el 0 es 0 y da igual poner porcentajes, píxeles, etc.

_cronos2 · #12 (**permalink**) 13/09/2011, 18:09

Cita:

Iniciado por RafaRG

claro que no puedo. como tú has dicho, el 0 es 0 y da igual poner porcentajes, píxeles, etc.

Yo ya lo doy por perdido, o no le entiendo yo o no nos entiende a nosotros, pero esto es una conversación de besugos

Saludos :D