CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 39
Visitas el mes pasado: 109
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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.
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:
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:
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.
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