Foros del Web » Creando para Internet » CSS »

Poner capa a lado de otra

Estas en el tema de Poner capa a lado de otra en el foro de CSS en Foros del Web. Saludos maestros, me ando inciando en esto del CSS y estoy practicando un esquema pero por más vueltas que le doy simple y sencillamente no ...
  #1 (permalink)  
Antiguo 23/03/2008, 00:41
 
Fecha de Ingreso: enero-2002
Mensajes: 4.156
Antigüedad: 15 años, 10 meses
Puntos: 21
Poner capa a lado de otra

Saludos maestros, me ando inciando en esto del CSS y estoy practicando un esquema pero por más vueltas que le doy simple y sencillamente no se le da la gana de quedar, he aquí mi cuestión:

En el centro de la página deseo que aparezca un layer de 800 pixeles de ancho y debajo de est otros dos de 400 pixeles de ancho cada uno, tal y como se muestra en la siguiente ilustración:



A continuación los estilos:

Cita:
.arriba{
position: relative;
width:800px;
height:90px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid #788DA2;
background-color : #788DA2;
margin: 0px;

}

.izquierda{
position: relative;
width:400px;
height:400px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid white;
color:#FFFFFF;
background-color: red;}

.derecha{
position: relative;
width:400px;
height:400px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid white;
color:#FFFFFF;
background-color: blue;}
Y el HTML

Cita:
<center>
<div id="cabeza" class="arriba"></div>
<div id="izquierda" class="izquierda"></div>
<div id="derecha" class="derecha"></div>

</center>
Pero a lo más que he logradio es que quede así :



Alguien me podría hechar una manita? agradezco desde ahora cualquier ayuda.

Saludos.
  #2 (permalink)  
Antiguo 23/03/2008, 05:00
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Poner capa a lado de otra

Sí ponle al izquierda y al derecha un float: left; y agrega una cosa al final. Queda así:
Código:
body{
text-align: center;
}

#contenedor{
margin: 0 auto;
text-align: left;
}

.arriba{
position: relative;
width:800px;
height:90px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid #788DA2;
background-color : #788DA2;
margin: 0px;

}

.izquierda{
float: left; 
position: relative;
width:400px;
height:400px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid white;
color:#FFFFFF;
background-color: red;}

.derecha{
float: left; 
position: relative;
width:400px;
height:400px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid white;
color:#FFFFFF;
background-color: blue;}
Código HTML:
<div id="contenedor">
<div id="cabeza" class="arriba"></div>
<div id="izquierda" class="izquierda"></div>
<div id="derecha" class="derecha"></div>
<div style="clear: both"></div>
</div> 
Por cierto, no te recomiendo usar el <center>, está desaprobado. Sería mejor como te lo he puesto ahora: con un div contenedor.

Y no hace falta que pongas id="cabeza" y luego class="arriba". Puedes quitar el class="arriba" y sustituir .arriba con #cabeza. Y así también con los demás.
  #3 (permalink)  
Antiguo 23/03/2008, 07:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Poner capa a lado de otra

Hola, Raulmmmm.

Creo que ha salido varias veces la misma cuestión en pocos días: basta con ponerle el float: left sólo al de la izquierda, y de esa manera te ahorras hacer el corte abajo para que crezca el contenedor. Este código es algo más económico:

Cita:
<!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=iso-8859-1" />
<title>RealState Argentina</title>
<style>
#contenedor {
width:800px;
margin: 0 auto;
}
.arriba{
height: 90px;
border: 1px solid #788DA2;
background-color: #788DA2;
}
.izquierda, .derecha{
height:400px;
border: solid 1px white;
color:#FFFFFF;
}
.izquierda{
float: left;
width:400px;
background-color: red;
}
.derecha{
background-color: blue;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="arriba"></div>
<div class="izquierda"></div>
<div class="derecha"></div>
</div></body>
</html>
Mikel.
  #4 (permalink)  
Antiguo 23/03/2008, 12:17
 
Fecha de Ingreso: enero-2002
Mensajes: 4.156
Antigüedad: 15 años, 10 meses
Puntos: 21
Re: Poner capa a lado de otra

Muchísismas grácias Raulmmmm y Mikmoro ya quedó.

Saludos.
  #5 (permalink)  
Antiguo 23/03/2008, 13:22
 
Fecha de Ingreso: enero-2002
Mensajes: 4.156
Antigüedad: 15 años, 10 meses
Puntos: 21
Re: Poner capa a lado de otra

Abusando de tu generosidad Mikmoro una preguntita.

¿Cómo es que el contenerdor queda centrado si no se especifica eso en ningún lado?

Saludos.
  #6 (permalink)  
Antiguo 23/03/2008, 13:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Poner capa a lado de otra

Sí, se especifica en la css:

#contenedor {
width:800px;
margin: 0 auto;
}

La línea margin: 0 auto; significa 0 pixels de margen arriba y abajo, y auto a los lados, lo que hace que se centre.

Mikel.
  #7 (permalink)  
Antiguo 23/03/2008, 19:59
 
Fecha de Ingreso: enero-2002
Mensajes: 4.156
Antigüedad: 15 años, 10 meses
Puntos: 21
Re: Poner capa a lado de otra

Ah ok, muchas grácias nuevamente Mikmoro.

Saludos.
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 13:28.