Foros del Web » Creando para Internet » CSS »

Dos capas dentro de una capa con DIV y CSS

Estas en el tema de Dos capas dentro de una capa con DIV y CSS en el foro de CSS en Foros del Web. Buenas, tengo un pequeñito problema de diseño, que no consigo arreglar....utilizando el navegador chrome. Tengo una capa madre (cuadro), y dos capas hijas (cuadro_dia y ...
  #1 (permalink)  
Antiguo 08/08/2010, 04:45
 
Fecha de Ingreso: octubre-2008
Ubicación: España
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 1
Dos capas dentro de una capa con DIV y CSS

Buenas, tengo un pequeñito problema de diseño, que no consigo arreglar....utilizando el navegador chrome.

Tengo una capa madre (cuadro), y dos capas hijas (cuadro_dia y cuadro_horas).
Entonces mi intención es meter esas dos capas hijas dentro de la capa madre, así tienen la posición relativa.

El código es lo siguiente:

Código:
<div class='cuadro'>
          <div class='cuadro_horas'>M:</div>
          <div class='cuadro_dia'>12</div>
</div>
Y la hoja de estilos está definido así:

Código:
.cuadro {
    height: 50px;
    width: 90px;
    border: double;
}

.cuadro_horas {
    height: 50px;
    width: 60px;
    position: relative;
    background-color: yellow;
    color: red;
    text-align: left;
    font: 8pt Verdana;
}

.cuadro_dia {
    height: 50px;
    width: 20px;
    left: 70px;
    top: 0px;
    position: relative;
    background-color: green;
    color: red;
    text-align: right;
    font: 8pt Verdana;
}
El resultado que obtengo es:



Loque quiero es que los dos recuadros hijas (amarillo y verde) estén dentro. ¿Por qué el verde está fuera, estando dentro del <DIV> de la madre?

Gracias de antemano!!
  #2 (permalink)  
Antiguo 08/08/2010, 07:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Dos capas dentro de una capa con DIV y CSS

Hola:

Cambia cuadro_horas y cuadro_dias así:

Código CSS:
Ver original
  1. .cuadro_horas {
  2.     height: 50px;
  3.     width: 60px;
  4.     position: relative;
  5.     background-color: yellow;
  6.     color: red;
  7.     text-align: left;
  8.     font: 8pt Verdana;
  9.     float:left;
  10. }
  11.  
  12. .cuadro_dia {
  13.     height: 50px;
  14.     width: 20px;
  15.     /*left: 70px;
  16.     top: 0px;*/
  17.     position: relative;
  18.     background-color: green;
  19.     color: red;
  20.     text-align: right;
  21.     font: 8pt Verdana;
  22.     float:right;
  23. }

Interpreto que si pones left:70px es porque lo quieres más bien hacia la derecha, por eso lo he flotado a la derecha, si no es así puedes probar a cambiar la posición con margin o con padding.

Saludos.

  #3 (permalink)  
Antiguo 09/08/2010, 07:24
 
Fecha de Ingreso: octubre-2008
Ubicación: España
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Dos capas dentro de una capa con DIV y CSS

¡Gracias ! Con eso se me ha resuelto, gracias al float, no me acordaba de esta propiedad. Justo lo necesitaba.

Pero con eso, o sea, en total tiene 3 div's (recuadro grande y dos pequeñas), y quiero que todo eso se convierta en un botón <input> y no queda nada bien.

He intentado con <a href....> queda bien estéticamente, pero no me funciona, porque no puedo enviar los datos del POST como lo haría con <input>, así que...

¿Cómo puedo que el contenedor general (la madre, que incluye 2 contenedores mas dentro), pueda convertirse en un botón con <input> sin que se desencuadre?

Gracias!!

Etiquetas: capas, dos
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 12:06.