Aún no has entrado
Debe introducir al menos 3 caracteres en el buscador.
Curso gratis de
Carlos Castillo - 18 de Octubre de 2005
2. Atributos CSS-P
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.
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.
Tabla de contenidos
- 1 - Conceptos Basicos
- 2 - Atributos CSS-P
- 3 - Referencias
- 4 - Programación
- 5 - Eventos
- 6 - Handlers
Autor y licencia de 'Introduccion DHTML - Atributos CSS-P'
|
![http://www.tn.cl/icn/flab1.jpg">](http://www.tn.cl/icn/flab1.jpg">){kind=link}
Wikis relacionados con 'Introduccion DHTML - Atributos CSS-P'
Esta tecnologia permite posicionamiento dinamico de elementos, y es la extension natural de la idea...
Más »
El desarrollar con capas dinámicas DHTML puede hipotecar aspectos fundamentales del site. Compatibilidad, medición de...
Más »
Su estrategia de marketing puede usar el teléfono para vender una parte o la totalidad...
Más »
El diseño web va más allá del diseño gráfico, al influir en él multitud de...
Más »
El el plan integral de marketing es un plan que incluye la publicidad de los...
Más »
Gente Wiki
¿Quiénes Somos? |
Preguntas Frecuentes |
Condiciones de Uso |
Aviso Legal |
2007 Wikilearning |
Blog |
