No me funciona centrar div

tH3_fAusT · #1 (**permalink**) 08/06/2010, 23:06

Hola, buenas a todos! Tengo un problema y es el siguiente:
Resulta que tengo un div contenedor con el siguiente css:

.div_contenedorweb {
position: relative;
width: 984px;
margin: 0 auto;
height: 1500px;
margin-top: 12px;
margin-bottom: 12px;
background-color: #13662d;
}

Con esto consigo que me quede centrado a la pantalla, hasta ahi bien! Pero el problema lo tengo cuando quiero centrar ahora otro div dentro de este. Utilizo el siguiente codigo css:

.div_contenidoweb {
position: absolute;
width: 972px;
height: 1488px;
margin: 0 auto;
margin-top: 6px;
background-color: #fff;
}

El codigo html es el siguiente:

<body>
<div class="div_contenedorweb">
<div class="div_esquinastop">
<div class="div_esquinatopleft"></div>
<div class="div_esquinatopright"></div>
</div>
<div class="div_esquinasbottom">
<div class="div_esquinabottomleft"></div>
<div class="div_esquinabottomright"></div>
</div>
<div class="div_contenidoweb"></div>
</div>
</body>

Y no me funciona! Alguien sabe porque?? Si le pongo position relative si se me centra todo, aunque sea a la pantalla y no al contenedor, pero ya no me respeta el margin-top 6px, puesto que me coge ese margen de la pantalla por lo que se me descuadra. Agradeceria de vuestra ayuda, GRACIAS

Los otros divs son para dar mis esquinas redondeadas con unas imagenes y eso funciona perfectamente ...

cristian_cena · #2 (**permalink**) 08/06/2010, 23:16

Hola tH3_fAusT:

cuando trabajas con position absolute o fixed tus margin dejarán de funcionar ya que las distancias pasan a manejarse con las propiedades top-right-bottom-left

Casualmente estoy preparando un demo de un sitio para un cliente en el que centro un menu con position fixed, para lo cual primero incluyo al mismo en un contenedor relativo, centrado con margin: 0 auto;

aquí el enlace, mira el código y si no entiendes algo solo pregúntame, un saludo!

__________________________________________________ _
Como va compa carlangueitor!! te miro desde arriba jaja

Carlangueitor · #3 (**permalink**) 08/06/2010, 23:22

Cambia los css, por esto:

Código CSS:

Ver original.div_contenedorweb {
position: relative;
width: 984px;
margin: 0 auto;
height: 1500px;
margin-top: 12px;
margin-bottom: 12px;
padding: 6px 0px 0px 0px;
background-color: #13662d;
}
 
.div_contenidoweb {
position: relative;
width: 972px;
height: 1488px;
margin: 0 auto;
background-color: #fff;
}

También podrías hacerlo así:

Código CSS:

Ver original.div_contenedorweb {
position: relative;
width: 984px;
margin: 0 auto;
height: 1500px;
margin-top: 12px;
margin-bottom: 12px;
padding: 6px;
background-color: #13662d;
}
 
.div_contenidoweb {
position: relative;
height: 1488px;
background-color: #fff;
}

Te recomiendo que no le pongas altura fija y que mejor crezca según el contenido, tampoco uses divs de más de 960px de ancho, para que quede bien en un monitor de 1024 768px.

Saludos

EDIT: Me tarde en escribir

ya me ganó cristian.

tH3_fAusT · #4 (**permalink**) 08/06/2010, 23:33

Gracias a los dos por contestarme tan rapido!
Cristian de tu aporte no he sacado nada que me valga, nose si porque soy tonto o porque no me vale nada o no me das una respuesta clara jejej
Y sobre ti carlan probe lo tuyo pero no funciona ninguno de los dos, se me descuadran igualmente, que se puede estar haciendo mal? GRACIAS

Por cierto yo aun tengo un monitor de 15pulgadas con una resolucion de 1024 y se me ve perfectamente con ese ancho, incluso aun me sobra! es posible que te refirieras a 800x600? aun asi, eso apenas se lleva ya!

Añadiros tambien que yo antes lo tenia asi:

.div_contenidoweb {
position: absolute;
width: 972px;
margin-left: -486px;
left: 50%;
height: 1488px;
margin-top: 6px;
background-color: #fff;
}

y si que funciona, pero me dijeron que no es la mejor solucion.

cristian_cena · #5 (**permalink**) 08/06/2010, 23:40

Hola, mm, creo fui claro, solo tienes que guardar la pagina que te pase y analizar su código, es muy simple ya que solo incluí imágenes de fondo a las cajas posicionadas en relativo y en fixed.
margin:0 auto; no funcionará si tienes asignada al mismo elemento una posición absoluta o fija.

Para ello utiliza:
top:/*valor que tu quieras*/;
right:/*ej: 10px;*/;
left:/*ej: 25%;*/;
bottom:/*valor que tu quieras*/;

Por ejemplo:

.div_contenidoweb {
position: absolute;
width: 972px;
height: 1488px;
/*margin: 0 auto;
margin-top: 6px;*/
top:6px;
left:...;
right:...;
bottom:...;
background-color: #fff;
}

Ten en cuenta que si quieres que la posicion de un "elemento hijo" dependa del eje de coordenadas 0,0 (esq sup-izq) del "elemento padre" debes dar position:relative; al elemento padre. Si no lo haces, dicho "elemento hijo" dependerá del elemento relativo inmediato (padre, abuelo, bisabuelo XD). Y si no tienes ningun elemento posicionado en relativo, tu "elemento hijo" que esta posicionado de modo absoluto pasará a depender del eje de coordenadas 0,0 de <body>

[+ info sobre posicionamiento]

Espero te sirva, Saludos.

tH3_fAusT · #6 (**permalink**) 08/06/2010, 23:51

Vale, perfecto! ahora si que me funciona, muchisimas gracias!
Pero yo me lie por una cosa, porque al div contenedor al ponerle margin: 0 auto se centra el solo automaticamente, supongo que por la posicion relative claro esta, que nos esta cogiendo de la pantalla del navegador! Tonces no entiendo porque si al div que va dentro de contenedor no se le puede poner magin: 0 auto; y que el solo se quede centrado sin tener que calcular el margin-left. No crees que seria mas facil que se pudiera hacer automatico, como el contenedor??

Y por ultimo que se me olvidaba! Entonces ahora yo todos los divs que meta dentro de mi div_contenido, que realmenta ya va a ser donde va la web, todos van a depender ya de ese mismo div, todos los margenes y demas, siempre que les ponga position: abosulte, claro! Porque si algun div le pongo position relative se me sale del div_contenido, no??

cristian_cena · #7 (**permalink**) 09/06/2010, 00:00

La caja css puede tener cuatro posiciones : static, relative, absolute o fixed
static y relative te tomarán margin:0 auto; O sea, tu div se centra "automáticamente" porque tiene una posicion relativa asignada.
absolute y fixed no te lo tomarán al margin:0 auto; puesto que estas propiedades lo que hacen es quitarte la caja del flujo normal del documento, o lo que puesto en otras palabras sería que hacen que la caja absoluta o fija dependa de la posición de su ancestro más próximo posicionado en relativo, o bien de su primer ancestro static (que es la etiqueta <body>).

Espero haber sido claro, de todos modos puedes consultar el link que te pase donde lo explican en detalle.

Saludos.

tH3_fAusT · #8 (**permalink**) 09/06/2010, 00:07

Aclarado! MUCHISIMAS GRACIAS

cristian_cena · #9 (**permalink**) 09/06/2010, 00:07

Por nada che, un gusto que te sirva, suerte