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.

Donativos

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

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

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

8.5 Tamaño variable

Diseño con tamaño variable:

El diseño con tamaño variable consiste en crear una página que se adapte al ancho de la ventana del navegador, de forma que tanto si cambiamos la resolución de pantalla, como si vemos la página en ventana restaurada, esta se adapte en todo momento al ancho de la ventana.

Esto lo conseguimos definiendo todas las medidas relacionadas con el ancho de la página o sus bloques en porcentajes.

El problema es que no todas las propiedades aceptan medidas en porcentajes, y algunas de ellas interpretan los porcentajes de diferentes maneras. Así por ejemplo las propiedades referidas al texto (font-size, text-indent, etc.) interpretan el porcentaje en referencia al tamaño habitual de letra del navegador, y no al ancho de la página; también los bordes (propiedad:border) pueden tener problemas al insertar porcentajes como medida.

Esto hace que en una página de tamaño variable haya elementos variables y elementos fijos que se adaptan en la medida de lo posible al diseño de tamaño variable.

Lo normal es que en las páginas de tamaño variable, al reducirse el tamaño de las cajas, no se reduzca el tamaño del texto, sino que éste se adapta al contenido de la caja, de forma que ésta crece en altura para mostrar su contenido (siempre que no le hayamos definido una altura fija), o si tiene altura fija, el texto desborde el contenido de la caja. En este último caso podemos usar los distintos valores de la propiedad overflow para mostrar de distintas maneras el texto.

Lo más simple para mostrar la página en tamaño variable es utilizar el diseño flotante, ya que las cajas adaptan mejor su tamaño y posición al espacio disponible. Con diseño posicionado es mucho más complicado crear una página de tamaño variable, y además podemos encontrarnos con problemas de difícil solución. por tanto, prácticamente todas las páginas de tamaño variable están hechas en diseño flotante.

Ejemplo de página de tamaño variable:

Tomaremos el ejemplo de diseño flotante de la página anterior, para convertirlo en una página de diseño variable. Para ello debemos convertir las medidas fijas a porcentajes en aquellas propiedades que marcan el ancho de las cajas.

Recordemos el ejemplo de la página anterior: la página de ejemplo final era la del siguiente enlace:

diseño flotante

El código CSS de esta página es el siguiente:

* { margin: 0; padding: 0; text-align: center; font-size: 1em; 
    font-family: arial; }
/*contenedor*/
#contenedor { margin: 0 auto; width: 800px;  
        border: 5px groove #993300; }
/*cabecera*/
#cabecera { background-color: #eeff45;; }
#cabecera h1, h2  { font-style: italic; font-family: verdana; 
        padding: 0.5em 0;  }
#cabecera h1 { font-size: 1.5em; }
#cabecera h2 { font-size: 1em; }
#cabecera img  { width: 7%; }
/*menu*/
#menu { width: 120px ; margin: 10px; padding: 8px; 
       border: 2px solid #663333; background-color: #ece5b6; 
       float: left}
#menu h3 { padding: 0.2em 0; font-weight: bold; font-size: 1.1em; }
#menu li { list-style-type: none; padding: 0.2em 0; }
#menu a { font-family:"times new roman"; font-size: 0.9em; 
         font-style: italic;  text-decoration: none; display: block;  }	
#menu a:link, visited  { color: #336600; }	
#menu a:hover, active  { color: #990066; background-color: #e8f322;}	
/*principal*/
#principal { background-color: #99ffcc; width: 640px; 
         float: left }
/*contenido*/
#contenido { width: 440px; background-color: #ffffff; 
          margin: 10px; padding: 10px ; float: left }
#contenido h1 { font-size: 1.1em; padding: 0.3em 0; }
#contenido h5  { font-size: 0.8em; font-style: italic; text-align: left;
                padding: 0.2em 0 }
#contenido p { font-size: 0.8em; text-align: justify;
               padding: 0.2em 0 }
#contenido img { width: 35%; }
/*lateral*/
#lateral { width: 130px; background-color:#660099 ; 
           margin: 10px 10px 10px 0px; 
padding: 5px ;border: 5px double #ffcc33; float: left; }
#lateral h1 { font-size: 1.1em; color: #eeff45; }
#lateral h2 { font-size: 0.7em; color: #ccffcc; }
#lateral p { text-align: left; padding: 0.2em 0; }
#lateral a:link, visited { color: #ff33ff; font-size: 0.8em; 
           text-decoration: none; } 
#lateral a:hover, active { color: #cc00ff; font-size: 0.8em; 
           text-decoration: none; }
#lateral img { width: 80%; }
/*pie*/
#pie { background-color:#ccffff ; clear: both;}
#pie p { text-align: center; padding: 0.3em 0; font-weight: bold;}
#pie a:link, visited { color: #663333; text-decoration: none; } 
#pie a:hover, active { color: #993300; text-decoration: none; }

En este código nos fijaremos en las reglas CSS que hemos destacado en color verde. Estas reglas son las que definen el tamaño, color, posición, etc. de los diferentes bloques que componen la página. La mayoría de ellas llevan la propiedad width con una medida en píxeles. Debemos pasar esos píxeles a porcentajes, para convertir la página de tamaño fijo a tamaño variable.

Las demás reglas CSS se refieren a los elementos de dentro de las cajas, indican el tipo de letra, márgenes de párrafos, estilo de enlaces, etc.

Obsérvese aquí que el tamaño de las imágenes está definido en porcentajes por lo que lo dejaremos así. Si no estuviera definido en porcentajes es conveniente definir la anchura en porcentaje, para que se adapte mejor al tamaño de la caja.

Veamos la transformación de estas reglas;

Elemento contenedor:

Como el contenedor es la caja que engloba a todas las demás y queremos que ocupe todo el ancho de la pantalla, simplemente eliminamos la propiedad width; con lo cual, al ser el div un elemento de bloque, ocupará todo el ancho del elemento contenedor (body), es decir, la ventana. La regla CSS quedará así:

#contenedor { margin: 0 auto; border: 5px groove #993300; }

Cajas de cabecera y pie de página

Estas cajas no tienen definida la anchura en la página original, ya que adaptan su anchura al ancho del elemento contenedor. Por tanto las dejaremos tal como están, y seguirán adaptando su anchura al elemento contenedor.

La regla para la caja "cabecera" será:

#cabecera { background-color: #eeff45;; }

Y la regla para la caja "pie" será:

#pie { background-color:#ccffff ; clear: both;}

Cajas menú y principal

Las cajas "menu" y "principal" ocupan en la página original 160px y 640px de un total de 800px que mide de ancho su elemento contenedor. esto supone en porcentaje un 20% para la caja "menú" y un 80% para la caja principal.

Como la caja "menu" tiene margen, relleno, y bordes, se debe distribuir el 20% que ocupa de manera que entre todos estos elementos más la caja en sí, el espacio ocupado sea igual o inferior al 20%. Para ello lo distribuiremos de la manera siguiente: la caja el 15%, los márgenes (margin) un 1% cada uno (izquierda y derecha), el relleno, también un 1% cada uno, queda un 1% para los bordes, que al no poder definirlos en porcentajes, dejamos el tamaño original de 2px, ya que ésto ocupa menos del 1%.

La regla CSS referida a la caja "menú" quedará así:

{ width: 15% ; margin: 1%; padding: 1%; border: 2px solid #663333; background-color: #ece5b6; float: left}

El elemento "principal" al no tener margen, ni relleno, ni borde, definiremos su anchura con el 80%. Para asegurarnos que queda a la derecha (ya que en el elemento "menu" puede que sobre un poco de espacio, ya que no ocupa totalmente su 20%), la propiedad float la utilizaremos con el valor right.

La regla CSS que define la caja "principal" será la siguiente:

#principal { background-color: #99ffcc; width: 80%; float: right }

Cajas contenido y lateral

Las cajas "contenido" y "lateral" tienen como elemento contenedor a la caja "principal", lo cual hace que los porcentajes haya que calcularlos respecto de esta caja.

La caja principal tiene un total de 640px de ancho, de los cuales 460 ocupa la caja "contenido" y 160 la caja "lateral" esto al pasarlo a porcentajes nos da un total de 71,875% para la caja "contenido" y de 28,125% para la caja "lateral".

Como la caja "lateral" tiene un borde bastante grueso, al hacer los cálculos prescindiremos de todos los decimales menos el primero, de forma que deje un margen para poder colocar sus bordes. Después de calcular los porcentajes, y reducir un poco el espacio, obtenemos las siguientes medidas en la regla CSS para la caja contenido:

#contenido { width: 68.7%; background-color: #ffffff; margin: 1.5%; padding: 1.5% ; float: left }

la caja "lateral" la posicionaremos mediante la propiedad float: right, para que se muestre totalmente a su derecha, y después de calcular el tamaño de caja más el margen, el relleno, y teniendo en cuenta el borde, la regla CSS nos quedará así:

#lateral { width: 20.3%; background-color:#660099 ; margin: 1.5% 1.5% 1.5% 0; padding: 0.8% ; border: 5px double #ffcc33; float: right; }

Completamos con esto los cambios que tenemos que hacerle a la página de origen para convertirla en una página de tamaño variable. Para ver como queda ahora la página pulsa en el siguiente enlace:

diseño flotante

En el código CSS las lineas que hemos cambiado quedarán de la siguiente manera. Las demás líneas (marcadas con puntos suspensivos) quedan igual que estaban:

* { margin: 0; padding: 0; text-align: center; font-size: 1em; 
    font-family: arial; }
/*contenedor*/
#contenedor { margin: 0 auto;  border: 5px groove #993300; }
/*cabecera*/
#cabecera { background-color: #eeff45;; }
........ 
/*menu*/
#menu { width: 15% ; margin: 1%; padding: 1%; border: 
        2px solid #663333; background-color: #ece5b6; float: left}
........	
/*principal*/
#principal { background-color: #99ffcc; width: 80%; float: right }
/*contenido*/
#contenido { width: 68.7%; background-color: #ffffff; margin: 1.5%; 
             padding: 1.5% ; float: left }
.........
/*lateral*/
#lateral { width: 20.3%; background-color:#660099 ; margin: 1.5% 1.5% 1.5% 0; 
           padding: 0.8% ;border: 5px double #ffcc33; float: right; }
.........
/*pie*/
#pie { background-color:#ccffff ; clear: both;}
.........

En la siguiente página veremos como solucionar algunos problemas comunes que suelen darse en el diseño de páginas.

Problemas de diseño.

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