Foros del Web » Creando para Internet » CSS »

Como alinear las capas

Estas en el tema de Como alinear las capas en el foro de CSS en Foros del Web. Hola a todos, estoy haciendo una pagina la que he maquetado solo con capas, al comienzo me funcionó bien pero tuve que agregar cuatro capas ...
  #1 (permalink)  
Antiguo 24/08/2011, 09:32
 
Fecha de Ingreso: agosto-2008
Mensajes: 38
Antigüedad: 15 años, 8 meses
Puntos: 0
Como alinear las capas

Hola a todos, estoy haciendo una pagina la que he maquetado solo con capas, al comienzo me funcionó bien pero tuve que agregar cuatro capas mas pequeñas donde voy a colocar cuatro imagenes y se me desordeno todo.

La idea es que quede como a continuacion:

tengo:
-una capa para la cabecera
-una capa lateral izquierdo para un menu
-una capa en el centro donde voy a colocar una imagen grande
-cuatro capas mas pequeñas debajo del del centro para cuatro fotos pequeñas
- una capa al lado derecho para colocar texto

En comienzo no tenia las cuatro capas mas pequeñas, pero cuando las agregue se me desordeno el esquema que tenia

asi esta lel archivo .css

#cabecera_cat { background: #FF9900;
margin:0px;
padding: inherit;
width:100%;
height:80px;
font-family: georgia, "times new roman", times, serif;
font-size: 0.9em;
line-height: 1.5;
}
#pie_cat { background:#FF9900;
width:100%;
height:40px;
clear:left;
color: blue;
font-family: georgia, sans-serif;
padding-top:12px;
clear: left;
}
#lateral_cat { background: #3399FF;
float:left;
width:200px;
height:500px;
margin: 0px;
padding:0px;
}
#cuerpo_cat { background: #FFFFFF;
float:left;
width:500px;
height:400px;
margin:0px auto;
padding:0px;
}
#cuerpo_img1 { background: #FFFFCC;
float:left;
width:100px;
height:100px;
margin:0px auto;
padding:0px;
}
#cuerpo_img2 { background: #FFFFCC;
width:100px;
height:100px;
margin:0px auto;
padding:0px;
}
#cuerpo_img3 { background: #FFFFCC;
width:100px;
height:100px;
margin:0px auto;
padding:0px;
}

#derecha_cat { background: #FFCC99;
float: none;
width: auto;
height:480px;
margin:0px;
padding:0px;
}
  #2 (permalink)  
Antiguo 24/08/2011, 11:37
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Como alinear las capas

en primera no es necesario agregar un div para las imágenes puedes colocarlas directamente en #cuerpo_cat

y por lo que veo me imagino que tu problema se origina por los float que utilizas

lo que necesitas es limpiarlos y para esto tienes dos opciones

Cita:
#cuerpo_cat { background: #FFFFFF;
float:left;
width:500px;
height:400px;
margin:0px auto;
padding:0px;
overflow:hidden;
}

o tu segunda opción: (código ilustrativo, no esta completo)
Cita:
<div>
<div></div>
<img />
<img />
<img />
<div style="clear:both;"></div>
</div>
  #3 (permalink)  
Antiguo 24/08/2011, 12:31
 
Fecha de Ingreso: agosto-2008
Mensajes: 38
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Como alinear las capas

OK gracias por responder, pero no me resulto, voy a seguir investigando!!!!

Etiquetas: alinear, capas, fondo
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 08:50.