Buscar Más buscado
Capitulos de este wiki
  1. 1 Conceptos Basicos
  2. 2 Atributos CSS-P
  3. 3 Referencias
  4. 4 Programación
  5. 5 Eventos
  6. 6 Handlers

Introduccion a DHTML - Atributos CSS-P

2 - Atributos CSS-P

Tutorial creado por Chato. Extraido de: http://www.tejedoresdelweb.com/307/article-1058.html
03 de Enero de 2007
< anterior | 1 2 3 4 5 6 | siguiente >

A continuación se muestra una lista de atributos de posición a usar dentro de la propiedad STYLE para elementos DIV o SPAN.

Position

Puede ser absolute, relative o static. Para el primer caso, la posición es de acuerdo al inicio (rincón superior izquierdo) del elemento exterior. Si no lo hay, corresponde a la ventana del browser. Para el segundo caso, la posición se establece de acuerdo a la posición final del bloque exterior (rincón superior derecho). La tercera opción indica que el elemento no es posicionable, por lo tanto los atributos top y left no se consideran. Cada elemento se colocará a continuación del otro, como sucede con un texto en HTML.

Left

Se refiere a la distancia entre el borde izquierdo del propio elemento y el borde izquierdo del elemento exterior. Si no hay elemento exterior, corresponde a la distancia entre al borde izquierdo de la pantalla.

Top

Se refiere a la distancia entre el borde superior del propio elemento y el borde superior del elemento exterior. Si no hay elemento exterior, corresponde la distancia entre al borde izquierdo de la pantalla.

Width

El ancho del elemento.

Height

El alto del elemento.

Clip

Corresponde a una región geométrica (generalmente un rectángulo) por la cual se puede ver el contenido de un elemento. Un ejemplo de este atributo es cuando queremos mostrar solo una parte de una imagen. La forma de hacer esto de la siguiente manera: clip:rect(top right bottom left). A modo de ejemplo, si tenemos un imagen de 171x190 pixeles y queremos quitar la parte inferior, anotamos lo siguiente: clip:rect(0 171 190 0). Para ver el ejemplo con y sin efecto, haga clic.

<html>

<span id="myspan1" style="position:absolute; top:0; left:0; clip:rect(0 171 190 0 )">

<img src="http://www.tn.cl/icn/flab1.jpg">

</span>

<span id="myspan2" style="position:absolute; top:0; left:200; clip:rect(0 171 165 0 )">

<img src="http://www.tn.cl/icn/flab1.jpg">

</span> </html>

Overflow

Esta propiedad se refiere cuando el contenido de un elemento excede el tamaño del elemento. A modo de ejemplo, si tenemos una imagen con 171 pixeles de ancho como la imagen del ejemplo anterior, pero la insertamos dentro de un bloque con un ancho menor, digamos 100, podemos decirle al browser que esconda la parte que provoca el overflow. Para ver este ejemplo, haga clic (esta propiedad no funciona igual para netscape).

<html>

<span id="myspan1" style="position:absolute; top:0; left:0; width:171">

<img src="http://www.tn.cl/icn/flab1.jpg">

</span>

<span id="myspan2" style="position:absolute; top:0; left:200; width:100; overflow:hidden">

<img src="http://www.tn.cl/icn/flab1.jpg">

</span>

</html>

Visibility

Este atributo permite esconder o mostrar el contenido de un bloque. Puede ser hidden o show.

Z-Index

Usualmente algunos bloques comparten el mismo espacio en la pantalla, por lo que estos se almacenan como en una pila, uno detras de otro, de manera que nosotros vemos solamente el último bloque almacenado. La propiedad Z-Index permite cambiar tal order, desplegando un nuevo elemento y escondiendo otro. A mayor es Z-Index, mas escondido del ojo esta el elemento.

< anterior | 1 2 3 4 5 6 | siguiente >

Opinar
2 opiniones

Muy buen curso.

Es paratodas aquellas personas q quieran sacarle probechi y darle tiempo para estudiar.
Funciona el codigo java dentro de un span.

Saben estuve mirando el codigo fuente del famoso hi5 y en la parte donde uno pones sus videos y esas cosas para dornar su espacio, me di cuenta q cuando coloco algun codigo de java no funciona, quisiera saber si es que no funcionas porque es imposible o quisas existe alguna otra forma de colocarlo.

Tutoriales relacionados con 'Introduccion a DHTML'

Introduccion a DHTML
Esta tecnologia permite posicionamiento dinamico de elementos, y es la extension natural de la idea... Más »
Completo tutorial de CSS
En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico... Más »

Anuncios Google

Autor y licencia de 'Introduccion a DHTML'

Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.