Layers

¿Que son?

Ejemplos

Microsoft vs Netscape

IExplorer 4.0 Netscape 4.0
Estilo CSS
Estilo CSS
+
Layers (CSS1)

Creación Layers con Estilos CSS




<STYLE TYPE="text/css">

  #capa1 {

       position: relative;

       top: 20 px;

       left: 320px;

       background-color: yellow;

       border-width: 2px;

       border-style: groove;

       width: 200px

  }

</STYLE>



   ...



<SPAN ID="capa1">

   <H1>Ejemplo</H1>

   Esto pertenece a capa1

</SPAN>






<DIV STYLE="position:relative; top:20 px; left:320px;

       background-color:yellow; border-width:2px;

       border-style:groove; width: 200px">

   <H1>Ejemplo</H1>

   Esto pertenece a capa1

</DIV>



Ejemplo

Esto pertenece a capa1

Creación Layers con Etiqueta LAYER






<LAYER ID="capa2" TOP=100 LEFT=100 BGCOLOR=red>

   <H1>Ejemplo</H1>

   Esto pertenece a capa2

</LAYER>



Flujo HTML y Tipo de Posicionamiento

Atributos y Parámetros

CSS Etiqueta LAYER Descripción
width
height
WIDTH
HEIGHT
Ancho y alto del layer.
Valor absoluto o %.
Es opcional.
Se adapta al contenido.
bgcolor
*layer-background-color
BGCOLOR
BACKGROUND-COLOR
Color de fondo.
Valores: nombre o formato RGB.
Deficiencias de funcionamiento.
background
*layer-background-image
BACKGROUND
BACKGROUND-IMAGE
Imagen de fondo.
Deficiencias de funcionamiento.
visibility VISIBILITY Visibilidad del layer.
Valores: SHOW, HIDE, INHERIT.
zindex ZINDEX Orden de apilamiento.
Valores: 0 o mayor.
clip: rect(sup,der,inf,izq) CLIP= "izq,sup, der, inf" Área de visibilidad.
Es un rectángulo.
sup e izq son opcionales (defecto 0).
top
left
TOP
LEFT
Posicionar respecto del layer contenedor,
no del documento.
  *PAGEX
*PAGEY
Posicionar respecto del documento,
no del layer contenedor.
*source-include *SRC Fichero HTML a mostrar.
Ejemplos:
SRC=a.html source-include:URL(a.html)
  *ABOVE
*BELOW
Posicionar layer encima o debajo del indicado como valor.
  *NAME Nombre (único) del layer.
* - sólo Netscape