Foros del Web » Creando para Internet » CSS »

Como consigo esta estructura de capas?

Estas en el tema de Como consigo esta estructura de capas? en el foro de CSS en Foros del Web. Quiero conseguir mediante CSS una estructura tal que así: El codigo que tengo es este: Código PHP: < div  class= 'tarea' >     < div  class= ...
  #1 (permalink)  
Antiguo 24/01/2012, 09:12
Avatar de silvia_net  
Fecha de Ingreso: enero-2012
Mensajes: 31
Antigüedad: 12 años, 2 meses
Puntos: 0
Como consigo esta estructura de capas?

Quiero conseguir mediante CSS una estructura tal que así:



El codigo que tengo es este:

Código PHP:
<div class='tarea'>
    <
div class='titulo_tarea'>
                
    </
div>
                
    <
div class='fecha_anadida_tarea'>
                
    </
div>
                
    <
div class='fecha_entrega_tarea'>
                
    </
div>
                
    <
div class='ver_tarea'>
                
    </
div>
</
div
Y el CSS:

Código PHP:
.tarea{
    
marginauto;
    
width950px;
    
height:100px;
    
border1px solid #CCC;
    
margin-bottom20px;
    
background-colorwhite;
    
padding-top0px;
    
padding-left15px;
    
padding-right15px;
    
padding-bottom10px;
    
text-alignjustify;
    
    -
moz-border-radius6px;
    -
webkit-border-radius6px;
    
border-radius6px;
}

.
titulo_tarea{
    
height100px;
    
background-colorred;
    
width700px;
    
floatleft;
}

.
fecha_anadida_tarea{
    
height50px;
    
background-colorgreen;
    
width120px;
    
float:left;
}

.
fecha_entrega_tarea{
    
height50px;
    
background-colorblue;
    
width120px;
    
float:left;    
}

.
ver_tarea{
    
height100px;
    
width100px;
    
background-coloryellow;

  #2 (permalink)  
Antiguo 24/01/2012, 10:26
Avatar de silvia_net  
Fecha de Ingreso: enero-2012
Mensajes: 31
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: Como consigo esta estructura de capas?

Alguien sabe? ^^
  #3 (permalink)  
Antiguo 24/01/2012, 10:38
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Como consigo esta estructura de capas?

Prueba con esto:

Código HTML:
Ver original
  1. <div class='tarea'>
  2.     <div class='rojo'>div 1</div>            
  3.     <div class='verde_celeste'>
  4.         <div class='verde'>div 2</div>    
  5.         <div class='celeste'>div 3</div>      
  6.     </div>          
  7.     <div class='amarillo'>div 4</div>
  8. </div>

Código CSS:
Ver original
  1. body{
  2.     font-family: Arial;
  3.     font-size: 14px;
  4. }
  5.     .tarea{
  6.         overflow: hidden;
  7.         width: 700px;
  8.         border: 5px solid #000;
  9.     }
  10.         .tarea div{
  11.             text-align: center;
  12.             text-transform: uppercase;
  13.         }
  14.         .rojo, .verde_celeste, .amarillo{
  15.             float: left;
  16.             height: 200px;
  17.             line-height: 200px;
  18.         }
  19.         .rojo{
  20.             width: 300px;
  21.             background: #ed1c24;
  22.         }
  23.         .verde_celeste{
  24.             width: 190px; /* + (5*2 = 10px) = 200px*/
  25.             overflow: hidden;
  26.             border-left: 5px solid #000;
  27.             border-right: 5px solid #000;
  28.         }
  29.             .verde, .celeste{
  30.                 float: left;
  31.                 line-height: 100px;
  32.             }
  33.             .verde{
  34.                 width: 200px;
  35.                 height: 100px;
  36.                 background: #22b14c;
  37.             }
  38.             .celeste{
  39.                 width: 200px;
  40.                 height: 95px; /* + 5px = 100px */
  41.                 border-top: 5px solid #000;
  42.                 background: #00a2e8;
  43.             }  
  44.         .amarillo{
  45.             width: 200px;
  46.             background: #fff200;
  47.         }

Luego le das las medidas acorde a tus necesidades.

demo: http://jsfiddle.net/cristian_cena/9HQHm/
float: http://www.librosweb.es/css/capitulo...nto_float.html
limpiar los float: http://www.librosweb.es/css_avanzado...ar_floats.html

Espero te sea útil.
Saludos.

pd:/ No sirve que pongas "Alguien sabe? ^^". Lo único que logras con eso es que den ganas de saltear tu tema.
  #4 (permalink)  
Antiguo 24/01/2012, 14:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Como consigo esta estructura de capas?

Por lo que se desprende del marcado html no estaremos ante unos bonitos datos presentados de forma estructurada en una matriz común y similar para el total de ellos?
Vamos, lo que siempre se llamó tabla.
Si es así, estaría totalmente justificado (y sería lo correcto) utilizar una tabla.

N.B.: suscribo la observación de Cristian sobre el "Alguien sabe? ^^"
  #5 (permalink)  
Antiguo 24/01/2012, 14:26
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Como consigo esta estructura de capas?

totalmente de acuerdo, a los datos tabulares tablas. Es más, considerando que display:table es ie8+ supongo que pronto será hora de usarlo, para crear layout, columnas. no se que opinan ustedes.
  #6 (permalink)  
Antiguo 25/01/2012, 03:20
Avatar de silvia_net  
Fecha de Ingreso: enero-2012
Mensajes: 31
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: Como consigo esta estructura de capas?

Gracias Cristian y perdon por el doble post u.u

Respecto a las tablas, prefiero usar div siempre que pueda, y en este caso me interesaba ese montaje con div, pero gracias :D

Etiquetas: estructura, 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 07:18.