• Jueves 28 de Marzo de 2024, 23:06

Autor Tema:  div superpuestas  (Leído 4093 veces)

cesand

  • Miembro MUY activo
  • ***
  • Mensajes: 127
    • Ver Perfil
div superpuestas
« en: Jueves 11 de Marzo de 2010, 00:58 »
0
hola gente

estoy enpezando a leer sobre css, clases, div etc.. quiero lograr superponer capas algo aso:
http://www.manualdecss.com/
como ven en el dise;o a la derecha tiene esa capa roja sobre la verde de atras quiero lograr eso.. como seria en un script simple ? ya que se crear capas con las div pero limitan unas con otras y quiero superponerlas... aguardo sus ayudas amigos y ademas ya que estoy otra cosa las capas que logro son o cuadradas rectangulares etc.. todas terminan bien esquinadas.. y si ven esa capa roja es redondeada en la esquinas como hace eso?
se les pueden dar formas diferentes?

desde ya mil gracias

DriverOp

  • Miembro MUY activo
  • ***
  • Mensajes: 201
    • Ver Perfil
Re: div superpuestas
« Respuesta #1 en: Jueves 11 de Marzo de 2010, 02:08 »
0
Bueno, la página a la que nos refieres no está hecha con divs sino que es una gran tabla (<table>) y tiene tabla dentro de tablas.
Lo que ves como una "capa roja" es una tabla que está dentro de una celda de otra tabla, nada impresionante la verdad.

Y encima las "esquinas" no son esquinas, sino celdas que tienen una imagen con fondo negro y frente rojo y el rojo es el que tiene la forma de la esquina redondeada dibujadas. Puedes observar que el texto de la "capa roja" no invade el espacio que está con fondo negro, eso es porque el texto está en la celda del medio de la tabla.

La verdad que encontraste un mal ejemplo para demostrar lo que quieres hacer :P.

Ahora bien, respondiendo tu pregunta sobre superponer divs, hay varias formas de hacerlo pero creo que lo que quieres es esto:

Código: Text
  1.  
  2. <div style="background-color: red; width: 300px; height: 300px;">
  3. <div style="position: relative; background-color: #00cc00; width: 300px; height: 300px; top: 10px; left: 10px;">
  4. Este es el div de arriba.
  5. </div>
  6. </div>
  7.  
Usé "style" pero bien puedes poner esas propiedades como una class en CSS.

Sobre esquinas redondeadas.
Hasta antes de la versión 3 del CSS había que hacer cosas ridículamente complicadas para obtener esquinas de diferentes formas. Una de ellas es la que ves en la página que nos has referido: tablas. Otras (que yo usaba hasta hace poco) implica poner divs muy precisos en las esquinas del div que quieres "redondear" y usar el bullet del tag <li> para crear la esquina. Otra podría ser poner una imagen background del mismo tamaño que el div que tuviera dibujadas las equinas que quisieras y el fondo de la imagen del mismo color que el fondo de la página.
Como ves, es bastante complicado de hacer.

Pero con la versión 3 de CSS ya lo puedes hacer simplemente especificándolo:

Código: Text
  1.  
  2. .midiv {
  3. border-radius: 5px;
  4. }
  5.  
  6.  

Eso pone al div con las cuatro esquinas redondeadas con un radio de 5 píxeles. Pero puedes especificar esquina por esquina:

Código: Text
  1.  
  2. .midiv {
  3. border-radius: 5px, 10px, 15px, 20px;
  4. }
  5.  
  6.  

Lamentablemente esto no funciona en IE (ninguna versión por ahora, esperemos que la versión 9 sí lo haga). Y para FireFox es lo mismo pero hay que anteponer -moz- :
Código: Text
  1.  
  2. .midiv {
  3. border-radius: 5px, 10px, 15px, 20px;
  4. -moz-border-radius: 5px, 10px, 15px, 20px;
  5. }
  6.  
  7.  

Las últimas versiones de Chrome, Opera y Safari soportan esta propiedad. Las anteriores no.