Foros del Web » Creando para Internet » CSS »

Ayuda con estas capas

Estas en el tema de Ayuda con estas capas en el foro de CSS en Foros del Web. Amigos quiero hacer mi página con esta pero mi CSS no funciona este es mi CSS Código PHP: . contentLayout {    margin - bottom ...
  #1 (permalink)  
Antiguo 31/03/2010, 11:13
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.044
Antigüedad: 18 años, 9 meses
Puntos: 8
De acuerdo Ayuda con estas capas

Amigos quiero hacer mi página con esta pero mi CSS no funciona



este es mi CSS

Código PHP:
.contentLayout
{
  
margin-bottom4px;
  
width898px;
  
positionrelative;
}

.
contentLayout .Capa0
{
  
positionrelative;
  
margin0;
  
padding0;
  
border0;
  
floatleft;
  
overflowhidden;
  
width672px;
}

.
contentLayout .Capa1
{
  
positionrelative;
  
margin0;
  
padding0;
  
border0;
  
floatleft;
  
overflowhidden;
  
width224px;
}

.
contentLayout .Capa2
{
  
positionrelative;
  
margin0;
  
padding0;
  
border0;
  
floatleft;
  
overflowhidden;
  
width224px;

Y así lo llamo

Código PHP:
<div class="contentLayout">
      <
div class="Capa0">
           
Contenido
       
</div>
      <
div class="Capa2">
          ... 
Contenido
       
</div>
      <
div class="Capa1">
          .. 
Contenido
       
</div>
      <
div class="Capa1">
          ... 
Contenido
       
</div>
      <
div class="Capa1">
          .... 
Contenido
       
</div>
</
div
Algo me falla, no funciona como debe.
  #2 (permalink)  
Antiguo 31/03/2010, 12:12
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 15 años, 4 meses
Puntos: 2
Respuesta: Ayuda con estas capas

No te funciona porque a la clase contentLayout le estás cambiando los estilos, empieza con width:898px y acaba con 224px

Prueba a hacerlo de esta forma
Código HTML:
Ver original
  1. <div id="pagina">
  2.  
  3.     <div id="cabecera">
  4.     </div>
  5.    
  6.     <div id="contenido">
  7.         <div id="capa0">
  8.         </div>
  9.         <div class="capa1">
  10.         </div>
  11.         <div class="capa1">
  12.         </div>
  13.         <div class="capa1">
  14.         </div>
  15.     </div>
  16.    
  17.    
  18.     <div id="capa2">
  19.     </div>
  20.  
  21. </div>

El html es parecido al tuyo, sólo que aquí creo una capa que contiene a capa0 y capa1. Ahora el css

Código CSS:
Ver original
  1. * {
  2.     margin:0;
  3.     padding:0; /*Resetear margin y padding para todos los navegadores*/
  4. }
  5.  
  6. #pagina { /*Contiene la página completa*/
  7.     width:800px; /*El ancho que queremos que tenga*/
  8.     margin:auto; /*Para centrarla*/
  9. }
  10.  
  11. #cabecera {
  12.     height:200px;
  13.     background-color:#09F;
  14. }
  15.  
  16. #contenido { /*Dentro estará capa0 y las capa1*/
  17.     width:600px;
  18.     height:500px;
  19.     float:left;
  20. }
  21.  
  22. #capa0 {
  23.     width:600px;
  24.     height:500px;
  25.     background-color:#099;
  26.     float:right;
  27. }
  28.  
  29. .capa1 {
  30.     width:200px;
  31.     height:100px;
  32.     background-color:#096;
  33.     float:left;
  34. }
  35.  
  36. #capa2 {
  37.     width:200px;
  38.     height:600px;
  39.     background-color:#06F;
  40.     float:right;
  41. }

Cuando les añadas contenido puedes quitar la altura de las capas, ahora como no tiene contenido se la he puesto para que se vean. Espero que pueda ayudarte
  #3 (permalink)  
Antiguo 01/04/2010, 07:18
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.044
Antigüedad: 18 años, 9 meses
Puntos: 8
Respuesta: Ayuda con estas capas

Excelente solución amigo, funcionando en Firefox y Opera pero en mi IE no anda, la capa 2 se posiciona por debajo de las capas 1......
  #4 (permalink)  
Antiguo 01/04/2010, 07:32
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.044
Antigüedad: 18 años, 9 meses
Puntos: 8
Respuesta: Ayuda con estas capas

Ah, perdón ya lo logré en todos los navegadores, me faltaba agregar el float a la capa contenedora, muchas gracias.
  #5 (permalink)  
Antiguo 01/04/2010, 08:24
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 15 años, 4 meses
Puntos: 2
Respuesta: Ayuda con estas capas

de nada hombre

Etiquetas: capas
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 19:32.