Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 90

Visitas el mes pasado: 139

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




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

8.6 Problemas de diseño.

css

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:

max-width Anchura máxima
Valores <medida> | <porcentaje> | none | inherit
Descripción Permite definir la anchura máxima de un elemento
Valor inicial none
se aplica a Todos los elementos salvo filas y grupos de filas de tablas

min-width Anchura mínima
Valores <medida> | <porcentaje> | inherit
Descripción Permite definir la anchura mínima de un elemento
Valor inicial 0
se aplica a Todos los elementos salvo filas y grupos de filas de tablas

max-height Altura máxima
Valores <medida> | <porcentaje> | none | inherit
Descripción Permite definir la altura máxima de un elemento
Valor inicial none
se aplica a Todos los elementos salvo filas y grupos de filas de tablas

min-height altura mínima
Valores <medida> | <porcentaje> | inherit
Descripción Permite definir la altura mínima de un elemento
Valor inicial 0
se aplica a Todos los elementos salvo filas y grupos de filas de tablas

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:

« Anterior Siguiente »

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.

« Anterior Siguiente »

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



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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