Problema para centrar web!

maximilianojcelis · #1 (**permalink**) 18/06/2011, 18:59

Que tal.. estoy haciendo una web.. a la cual pude centrar perfectamente mediante el siguiente codigo siempre y cuando el navegador este maximizado..

<div id="contenedor"></div>
#contenedor {width: 1000px; height: auto; position:absolute; margin-left: -500px; left: 50%}

El problema es cuando el navegador lo pongo en un tamaño mas chico.. es decir lo restauro.. que ocupe la mitad de la pantalla.. ahi es cuando la web me sale cortada en el lado izquierdo.. Casi la mitad izquierda de la web no se ve.. La barra de desplazamiento solo va hasta alli, de la mitad hasta la derecha.. que puedo hacer? En donde esta el problema? Saludos gente..

DoPeY-BBS · #2 (**permalink**) 18/06/2011, 19:21

#contenedor {
width:750px;
margin:0 auto;
}
Por ejemplo puede dar un margin de cero a lo alto y bajo y poner en horizontal centrada la pagina

maximilianojcelis · #3 (**permalink**) 18/06/2011, 19:24

Me interesa solamente centrarla en vertical.. probe mil veces con el margin: 0 auto pero no pasa nada.. es mas no queda centrada.. supongo que es por el tamaño de width: 1000px que no la centra bien..

cristian_cena · #4 (**permalink**) 18/06/2011, 19:25

Hola maxi:
Este truco de centrado de capas absolutas la verdad que lo he usado una vez pero no tiene sentido, porque:

si pones la capa absoluta dentro de una capa relativa con margin:0 auto; se centra la capa padre y con ello también la capa absoluta.
si no es imprescindible la posicion absoluta, directamente no la usas.
si es imprescindible y el ancho es mayor que su capa padre relativa basta con poner overflow:visible; y problema solucionado.

Cuando una capa absoluta es hija de una capa relativa sus cotas o distancia top-left-right-bottom dependen del eje de coordenadas 0,0 (esquina superior izquierda) de la capa relativa.
Cuando una capa absoluta no encuentra ancestro relativo se posiciona de acuerdo al 0,0 de <body>

Saludos.

cristian_cena · #5 (**permalink**) 18/06/2011, 19:30

justo escribieron mientras yo redactaba la respuesta, sin saber lo del centrado vertical.
Para el centrado vertical te será util ver las siguientes propiedades:
display:table;
display:inline; junto a line-height;
Sobre los 1000px de ancho, seguro, si tienes un monitor de 1024px de ancho a penas notarás el efecto. Personalmente y no siempre pero por lo general tomo 960px como ancho standard.

saludos

maximilianojcelis · #6 (**permalink**) 18/06/2011, 19:32

Y entonces cristian? El tema es que yo cree esa capa pero no esta dentro de ninguna otra.. Esta capa envuelve toda mi web..

maximilianojcelis · #7 (**permalink**) 18/06/2011, 19:35

Pasa que me pidieron una web de esa medida.. aparte porque tiene un iframe de ese tamaño.. sino normalmente las hago de 960 tambien ;)

DoPeY-BBS · #8 (**permalink**) 18/06/2011, 20:11

Yo no soy experto en css asi que te dejo esto a ver si te ayuda

http://www.csslab.cl/2007/01/12/cent...tical-con-css/

cristian_cena · #9 (**permalink**) 18/06/2011, 21:00

maxi, bueno igual no importa el tamaño. sobre el ¿y entonces? no crees que ya te di la respuesta? si tu capa es la padre de todas pues añade otra que sea padre de esta XD.
aca te dejo un código que tomé de un usuario del foro: http://jsfiddle.net/cristian_cena/MtGGS/
saludos

ArturoGallegos · #10 (**permalink**) 19/06/2011, 01:56

Cita:

Iniciado por maximilianojcelis

Me interesa solamente centrarla en vertical.. probe mil veces con el margin: 0 auto pero no pasa nada.. es mas no queda centrada.. supongo que es por el tamaño de width: 1000px que no la centra bien..

De que navegador estamos hablando?

margin:0 auto; tiende a no funcionar cuando no has declarado un doctype valido... ese es tu caso? de ser el caso solo declarado y si no es el caso publica un enlace a tu sitio o coloca el código html + css en cuestión