Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

7. Posicionamiento (VI)

7.6 Visualización

Ademas de las propiedades que controlan la posición de la caja, en CSS tenemos otras propiedades que controlan su forma de visualizarse:

Propiedad display

la propiedad display modifica la forma en la que se visualiza un elemento. puede tener distintos valores. Veamos su definición:

display	Visualización de un elemento
Valores	inline | block | none | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption
Descripción	Permite controlar la forma de visualizar un elemento e incluso ocultarlo
Valor inicial	inline | block
se aplica a	Todos los elementos

El valor inicial depende de si el elemento es de tipo inline o de tipo block

Aunque esta propiedad tiene muchos valores, los más utilizados son inline, block, none; los cuales explicamos a continaución:

• inline : visualiza cualquier elemento como un elemento en línea, tanto si el elemento es en línea como de bloque.
• block : visualiza cualquier elemento como un elemento de bloque, tanto si el elemento es en línea como de bloque.
• none : oculta un elemento y hace que desaparezca de la página. El resto de elementos ocupan el espacio en el que se debería visualizar el elemento. Actúan como si éste no existiera

El resto de valores no son muy habituales, y suelen utilizarse para crer páginas complejas o intervienen en páginas dinamicas, si queres ver la descripción de todos los valores puedes consultar la siguiente página : Display-MDC de Mozilla.org.

El valor block nos permite convertir cualquier elemento en un elemento de bloque, ya sea éste inicialmente un elemento en linea o de bloque. Por ejemplo permite tratar los enlaces como elementos de bloque.

El valor inline nos permite convertir cualquier elemento en un elemento en linea, ya sea éste inicialmente un elemento en línea o de bloque. Por ejemplo permite colocar los elementos de una lista (elementos de bloque inicialmente) seguidos en una misma línea.

El valor none suele utilizarse en páginas dinámicas con javascript, en las que al pulsar un botón aparece o desaparece un elemento.

Algunos de los otros valores los veremos más adelante, por ejemplo para solucionar el problema de hacer una página con columnas iguales.

Propiedad visibility

Esta propiedad permite que un elemento sea visible o no, pero al contrario de la propiedad display: none, al hacerse invisible, los demás elementos no se mueven y respetan el hueco dejado por el elemento.

La definición de esta propiedad es la siguiente:

visibility	Visibilidad de un elemento
Valores	visible | hidden | collapse | inherit
Descripción	Permite hacer visibles e invisibles a los elementos
Valor inicial	visible
se aplica a	Todos los elementos

Los valores de esta propiedad tienen el siguiente significado;

• visible : Es el valor por defecto, el elemento se visualiza en la pantalla.
• hidden : El elemento se hace invisible, en su lugar queda el hueco que debería ocupar, el cual es respetado por el resto de elementos.
• collapse : En principio sólo se puede utilizar en las filas, y columnas de una tabla. Su efecto es similar al de la propiedad display: none. Al ocultar la fila o columna otros contenidos pueden ocupar su lugar. Aplicado a otro elemento su efecto es el mismo que el valor hidden

Al igual que la propiedad display: none su uso más habitual es junto con javascript para crear páginas dinámicas en las que según actúe el usuario se puede mostrar u ocultar el elemento.

Propiedad overflow

Cuando definimos una caja, podemos darle una anchura (width) y una altura (height). Si no definimos la altura, ésta se adapta al contenido de la caja, alargándose ésta en vertical para que su conenido esté dentro. Si la altura está definida, pueden ocurrir dos cosas, que el contenido quepa dentro de la caja o que ocupe más espacio del que tiene la caja, en este caso normalmente el contenido se muestra fuera de la caja (por debajo de ésta), pero este comportamiento puede modificarse mediante la propiedad overflow

Veamos ahora la definición y los valores de la propiedad overflow

overflow	Parte sobrante de un elemento
Valores	visible | hidden | scroll | auto | inherit
Descripción	Permite controlar los contenidos sobrantes de un elemento
Valor inicial	visible
se aplica a	Elementos de bloque y celdas de tablas

Los valores de esta propiedad tienen el siguiente significado;

• visible : el contenido se muestra sobresaliendo la zona reservada para visualizar el elemento. Este es el comportamiento por defecto (cuando hemos aplicado la propiedad position)
• hidden : el contenido sobrante se oculta y sólo se visualiza la parte del contenido que cabe dentro de la caja del elemento.
• scroll : solamente se visualiza el contenido que cabe dentro de la caja del elemento, pero también se muestran barras de desplazamiento que permiten visualizar el resto del contenido.
• auto : el comportamiento depende del navegador, aunque normalmente es el mismo que para el valor scroll. Lo normal es que en auto sólo se muestren las barras de desplazamiento cuando el contenido se desborda de la caja. Si el contenido cabe dentro la barra de desplazamiento no se muestra, a diferencia del valor scroll, que muestra siempre la barra desplazamiento .

En la siguiente página de ejemplo se muestra el comportamiento de los distintos valores de la propiedad overflow.

Propiedad overflow

Propiedad z-index

Hasta ahora hemos controlado la posición de la caja en horizontal y en vertical en la página, pero además podemos controlar su posición tridimensional, es decir, qué caja se muestra delante o detrás de otras cuando se producen solapamientos. Esto lo controlamos mediante la propiedad z-index. Utilizando esta propiedad podemos hacer páginas con varios niveles o capas.

La definición de esta propiedad es la siguiente:

z-index	Orden tridimensional
Valores	auto | <numero> | inherit
Descripción	Establece el nivel tridimensional en el que se muestra el elemento
Valor inicial	auto
se aplica a	Elementos que han sido posicionados explícitamente

El valor <numero> debe ser un número entero. Aunque no es frecuente utilizarlos, se permiten los números negativos, Las cajas con valor numérico más alto se muestran siempre por encima de las de valor númerico más bajo.

El valor auto es el valor por defecto, y equivale a z-index: 0. Caso de que haya solapamiento con varias cajas con valor auto o sin que esté aplicada la propiedad z-index se mostrará por encima la que en el código esté escrita en último lugar.

Por otra parte la propiedad z-index sólo actúa en cajas que previamente estén posicionadas mediante la propiedad position.

A continuación vemos una página con ejemplos de la propiedad z-index

Propiedad z-index

Relacion entre posición absoluta y relativa, y posicionamiento flotante.

Si aplicamos a un mismo elemento las propiedades position y float el comportamiento es distinto según el posicionamiento (position) sea absoluto o relativo.

Con posicionamiento absoluto la propiedad float es ignorada, y el elemento se posiciona según las propiedades de desplazamiento (left, top, right, bottom).

Con posicionamiento relativo, al elemento se le aplica primero la propiedad float, y después desde esa posición se aplican las propiedades de desplazamiento.

---

En el siguiente tema veremos como aplicar el posicionamiento para construir el diseño de páginas, así como los modelos de páginas más habituales.

Diseño de páginas.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com