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

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

8. Diseño de páginas (VI)

8.6 Problemas de diseño.

Limitar el tamaño variable.

Uno de los problemas que ocurren con el tamaño variable, es que al reducir excesivamente el tamaño de la ventana, el texto ya no es legible, o las cajas se descolocan de sitio, ya que no caben en su hueco. Lo mismo puede ocurrir al aumentar excesivamente el tamaño de la ventana (resoluciones de pantalla muy grandes), en las que la página queda excesivamente ancha.

En CSS hay cuatro propiedades que permiten limitar la anchura y altura mínima y máxima de cualquier elemento de la página. Las propiedades son max-width, min-width, max-height, min-height. Veamos sus definiciones:

La utilidad principal de estas propiedades es limitar la anchura y altura máxima y mínima de los bloques en el diseño variable. Podemos emplear como valores medidas o porcentajes, aunque lo normal es emplear las medidas en píxeles para limitar el tamaño de los bloques.

Cómo ejemplo tomamos el diseño de tamaño variable del apartado anterior, y limitamos su anchura en la caja contenedor con las propiedades max-width: 1024px; min-width: 500px;, de modo que la regla CSS referida al elemento contenedor queda así:

#contenedor { margin: 0 auto; border: 5px groove #993300; max-width: 1024px; min-width: 500px; }

Y la página ahora será la siguiente:

Tamaño variable limitado

Puedes comprobar los cambios en la página con la ventana del navegador restaurada, o cambiando la resolución de pantalla.

Como se puede comprobar, basta con limitar la anchura de la caja contenedor para limitar la anchura de toda la página, ya que el tamaño de los demás elementos está referido al tamaño de esta caja.

El elemento invisible.

Cuando añadimos elementos con la propiedad float dentro de una caja normal, los elementos flotantes se salen del flujo normal de la página. esto puede crear problemas. ya que la altura del elemento contenedor no se corresponde con la altura de los elementos contenidos, quedando los elementos flotantes fuera de la caja. Veamos un ejemplo: En la siguiente caja se han puesto dos elementos con posicionamiento flotante:

El código empleado para esta caja es el siguiente:

<div style="background-color: silver; padding: 3px ;width: 60%">
<span style="float: left">« Anterior</span>
<span style="float: right">Siguiente »</span>
</div>

Evidentemente este no es el resultado que queremos obtener, ya que los elementos quedan fuera de la caja, la cual se muestra vacía. Para forzar a que los elementos entren dentro de la caja debemos añadir un elemento invisible debajo de los elementos flotantes, con la propiedad clear. Este elemento puede ser un div, un párrafo o cualquier otro elemento, pero sin contenido.

Nosotros añadiremos un párrafo: el código quedará así:

<div style="background-color: silver; padding: 3px ;width: 60%">
<span style="float: left">« Anterior</span>
<span style="float: right">Siguiente »</span>
<p style="clear: both"></p>
</div>

Y ahora el elemento sí que se muestra tal y como queríamos.

Al añadir un elemento con la propiedad clear: both,éste se va a posicionar debajo de cualquier elemento flotante y por tanto, se asegura que la caja original tenga la altura necesaria como para encerrar a todos los elementos flotantes.

Si seguimos sólo el manual de CSS continuaremos en el siguiente tema donde veremos otras propiedades de CSS.

Otras propiedades.

Si estamos siguiendo el manual de HTML y CSS al mismo tiempo seguiremos en el siguiente tema donde veremos otras etiquetas:

Metainformación

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