Foros del Web » Creando para Internet » CSS »

Problema para centrar web!

Estas en el tema de Problema para centrar web! en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 18/06/2011, 18:59
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 125
Antigüedad: 7 años
Puntos: 11
Problema para centrar web!

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..
  #2 (permalink)  
Antiguo 18/06/2011, 19:21
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años
Puntos: 12
Respuesta: Problema para centrar web!

#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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #3 (permalink)  
Antiguo 18/06/2011, 19:24
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 125
Antigüedad: 7 años
Puntos: 11
Respuesta: Problema para centrar web!

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..
  #4 (permalink)  
Antiguo 18/06/2011, 19:25
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 4 meses
Puntos: 269
Respuesta: Problema para centrar web!

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.
  #5 (permalink)  
Antiguo 18/06/2011, 19:30
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 4 meses
Puntos: 269
Respuesta: Problema para centrar web!

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
  #6 (permalink)  
Antiguo 18/06/2011, 19:32
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 125
Antigüedad: 7 años
Puntos: 11
Respuesta: Problema para centrar web!

Y entonces cristian? El tema es que yo cree esa capa pero no esta dentro de ninguna otra.. Esta capa envuelve toda mi web..
  #7 (permalink)  
Antiguo 18/06/2011, 19:35
 
Fecha de Ingreso: octubre-2010
Ubicación: Buenos Aires
Mensajes: 125
Antigüedad: 7 años
Puntos: 11
Respuesta: Problema para centrar web!

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 ;)
  #8 (permalink)  
Antiguo 18/06/2011, 20:11
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años
Puntos: 12
Respuesta: Problema para centrar web!

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/
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #9 (permalink)  
Antiguo 18/06/2011, 21:00
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 4 meses
Puntos: 269
Respuesta: Problema para centrar web!

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

Última edición por cristian_cena; 18/06/2011 a las 21:09
  #10 (permalink)  
Antiguo 19/06/2011, 01:56
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.784
Antigüedad: 9 años, 7 meses
Puntos: 936
Respuesta: Problema para centrar web!

Cita:
Iniciado por maximilianojcelis Ver Mensaje
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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: firefox, left
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:06.