Centrar varios div al ancho pantalla

kripal6 · #1 (**permalink**) 06/03/2012, 16:35

Buenas, pues despues de mirar más de un sitio, no encuentro respuesta.

El problema que tengo es; que quiero centrar un <div> al ancho de la pantalla, pero a su vez ese <div> tiene posicionadas otras capas mediante position:absolute. Y por eso no puedo centrar la capa grande sin afectar a las pequeñas. Adjunto el código para más información.

Código HTML:

 <div id="imagen" style="position:absolute; left: 151px; top: 15px;"><img src="inicio2.png"/></div>
  <div id="capaini" style="position:absolute; top:109px; left:349px"> <a href="home.php">inicio</a></div>
  <div id="capapro" style="position:absolute; top:109px; left:434px"> <a href="productos.php">productos</a></div> 
  <div id="capaenc" style="position:absolute; top:109px; left:551px"> <a href="encuentranos.php">encuentranos</div>
  <div id="capacon" style="position:absolute; top:109px; left:701px"> <a href="contacto.php">contacto</div>

herzbazi · #2 (**permalink**) 06/03/2012, 17:24

ok realmente no entiendo cual es el objetivo de centrar una unicamente. puedes explicarte mejor .

segun entiendo por el codigo es de un menu?

lo primero que tienes que hacer es crear un div contenedor. dentro de este debes crear los otros divs

luego para centrar el div a cualquier resolucion usas el css.

http://www.librosweb.es/ verifica la direccion (estudialo de ayudara)

el codigo html quedaria algo asi.. puede variar

<div id=contenedor>

<div id="imagen" style="position:absolute; left: 151px; top: 15px;"><img src="inicio2.png"/></div>
<div id="capaini" style="position:absolute; top:109px; left:349px"> <a href="home.php">inicio</a></div>
<div id="capapro" style="position:absolute; top:109px; left:434px"> <a href="productos.php">productos</a></div>
<div id="capaenc" style="position:absolute; top:109px; left:551px"> <a href="encuentranos.php">encuentranos</div>
<div id="capacon" style="position:absolute; top:109px; left:701px"> <a href="contacto.php">contacto</div>

</div>

luego css

#contenedor {
position:absolute;
width:1020px; ancho contenedor
height:1020; altura contenedor
z-index:1; posicion que se muestra
left: 50%; centra el div contenedor a la mitad
top: 0px; posicion vertical
margin-left:-510; sirve para centrar el div
}

IGUAL ESTOY COMO QUE ADIVINANDO POR QUE NO HAS EXPLICADO BIEN

kripal6 · #3 (**permalink**) 06/03/2012, 19:57

Digamos que lo tengo así :

y si intento centrar la capa donde tengo el fondo blanco con la barra me queda algo parecido a esto:

Los links son capas y no tienen nada solo cada link con cada capa

Si centro la capa blanca se me descuadran las demas capas (enlaces) ya que como estan alineados con position absolute a la capa blanca y con un centrado automatico de ésta se descuadran...

Mejor no se si me podría explicar xd

P.D : herzbazi te agradezco tu respuesta pero probando lo que me has dicho no he conseguido nada, y además eso serviria para cualquier tamaño de pantalla ? o solo para una anchura de 1200px ? porque yo tengo más resolución en mi pc, o menos si entro en la pagina con el movil

herzbazi · #4 (**permalink**) 06/03/2012, 22:23

lo que queres es centrar el div1 y que el menu este centrado al div1 y que ademas se vean en cualquier resolcion , desde dispositivos moviles hasta , pantallas de las mas grandes,,

es lo que te digo ...

te voy a poner un ejemplo ,,,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#contenedor {

position:absolute;
width:90%;
height:40%;
z-index:1;
left: 50%;
top: 0px;
margin-left:-45%;

}
#menu {
position:absolute;
width:40%;
height:30px;
z-index:2;
top:7%;
left: 50%;
margin-left:-20%;
}
#lista li
{
list-style:none;
float:left;
padding:10px;
}

</style>
</head>

<body>
<div id="contenedor">
<div id="menu">
<ul id="lista">
<li>inicio</li>
<li> productos </li>
<li>encuentranos</li>
<li>contacto</li>
</ul>
</div>
</div>
</body>
</html>