Foros del Web » Creando para Internet » CSS »

alineando 3 divs relativamente.

Estas en el tema de alineando 3 divs relativamente. en el foro de CSS en Foros del Web. Hola amigos. Mire, quiero lograr algo como la siguiente imagen: http://i52.tinypic.com/10frz0l.jpg y he utilizado el siguiente codigo, pero el 3 div, no logro alinearlo relativamente ...
  #1 (permalink)  
Antiguo 04/12/2010, 13:02
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 13 años, 3 meses
Puntos: 3
Pregunta alineando 3 divs relativamente.

Hola amigos.
Mire, quiero lograr algo como la siguiente imagen:
http://i52.tinypic.com/10frz0l.jpg

y he utilizado el siguiente codigo, pero el 3 div, no logro alinearlo relativamente con los otros dos.
queda abajo, como si tuviera un <br />, pero no lo tengo.

Aqi les dejo el code:

Código HTML:
<html>
<head>
<title>Portgaz</title>
<style type="text/css">

body {
background:#D8D8D8;
}

#bodo {
background:#8181F7;
margin:auto;
width:90%;
height:500px;
}

#div1 {
background:#0B0B61;
width:25%;
height:500px;
float:left;
z-index:1;
}

#div2 {
background:#0B0B61;
margin-left:auto;
margin-right:auto;
width:35%;
height:500px;
z-index:2;
}

#div3 {
background:#0B0B61;
width:25%;
height:500px;
float:right;
z-index:3;
}

</style>
</head>
<body>

<div id="bodo">

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</div>

</body>
</html> 
Espero su ayuda, Gracias.
  #2 (permalink)  
Antiguo 04/12/2010, 14:02
 
Fecha de Ingreso: diciembre-2010
Ubicación: Argentina
Mensajes: 42
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: alineando 3 divs relativamente.

Cita:
<head>
<title>Portgaz</title>
<style type="text/css">

body {
background:#D8D8D8;
}

#bodo {
background:#8181F7;
margin:auto;
width:90%;
height:500px;
}

#div1 {
background:#0B0B61;
width:25%;
height:500px;
float:left;
z-index:1;
}

#div2 {
background:#0B0B61;
margin-left:5%;
float:left;
width:35%;
height:500px;
}

#div3 {
background:#0B0B61;
margin-left:5%;
width:30%;
height:500px;
float:right;

}

</style>
</head>
<body>

<div id="bodo">

<div id="div1">&nbsp;</div>
<div id="div2">&nbsp;</div>
<div id="div3">&nbsp;</div>
</div>

</body>
  #3 (permalink)  
Antiguo 04/12/2010, 14:58
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 13 años, 3 meses
Puntos: 3
Respuesta: alineando 3 divs relativamente.

Como mola!! Anotadorcom.
Muchisimas Gracias.

Nomas que cuando minimizo la ventana mas pequeña o hay otro monitor mas pequeño, los divs se enconjen.

Y lo solucione dandole un ancho fijo (en px) al sub body (#bodo).
Y en los divs hijos, utilize proporciones en % para que se ajustara bien y no se salieran de el div padre (#bodo) y ahora ya todo me jala bien.

La unida dudita es, por que solo pusiste z-index:1 en el primero, y en los demas no.
y sin unas position relative, se han ajustado relativamente.

Es lo unico que no logro entender.

Gracias

Etiquetas: Ninguno
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 09:53.