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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
Ültima modificación: 22-08-2017.
Visitas este mes: 142
Visitas el mes pasado: 217
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.
Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.
8. Diseño de páginas (IV)
8.4 Diseño flotante.
Esquema de página.
En página 7.5 Posicionamiento flotante
hemos visto cómo posicionar las cajas o bloques mediante las propiedades
float y clear. Aquí utilizaremos estas propiedades
para crear el diseño de una página.
Diseñaremos una página parecida al ejemplo de la página anterior, es decir el esquema será también una página con cabecera, tres columnas y pie de página; las columnas central y derecha estarán también incluidas dentro de un bloque llamado principal, y toda la página estará incluida dentro de un bloque contenedor:
El código HTML también será parecido al de la página anterior, en él
se marcarán mediante etiquetas <div> los distintos
bloques
<html>
<head>
<title>Diseño flotante</title>
<link rel="stylesheet" type="text/css" href="estilo7.css" media="all" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">
Cabecera de la página
</div>
<div id="menu">
menú de enlaces
</div>
<div id="principal">
<div id="contenido">
Contenido principal de la página
</div>
<div id="lateral">
Columna lateral derecha
</div>
</div>
<div id="pie">
pie de página
</div>
</div>
</body>
</html>
Dentro de las etiquetas principales hemos incluido un texto provisional para dar un poco de volumen a la caja, ya que en el código CSS no vamos a marcar las alturas.
Estructura del código CSS
Vamos a ver el código CSS básico para dar a la página el diseño marcado en el esquema mediante un diseño flotante.
Una diferencia con el diseño posicionado es que no marcaremos las alturas de las
cajas (propiedad height), con lo cual conseguimos que la caja
o bloque se adapte a la altura de su contenido, ya que ésta crece en altura
a medida que le insertamos contenido. Esto puede hacerse así ya que el posicionamiento
flotante adapta la posición vertical de las cajas al sitio disponible, respetando
cada caja el sitio ocupado por las anteriores.
Al igual que en el ejemplo del apartado anterior, fijaremos mediante el selector universal ( * ) unas propiedades iniciales para que la página pueda verse igual en todos los navegadores:
* { margin: 0; padding: 0; text-align: center; font-size: 1em; font-family: arial; }
A continuación vamos a ver el código CSS necesario para cada caja; la página será muy parecida a la del apartado anterior, ya que tomaremos sus mismas medidas de anchura, margenes, rellenos y bordes, y también los mismos colores de fondo.
Elemento Contenedor:
El elemento contenedor tiene el siguiente código CSS
#contenedor { margin: 0 auto; width: 800px; border: 5px groove #993300;
Le hemos marcado un ancho fijo, con lo cual aunque el diseño es flotante, el posicionamiento será fijo, ya que todas las medidas de las cajas se darán en píxeles.
Por otra parte, como ya se ha dicho, no hemos marcado la altura de la caja, No lo haremos en ninguna de las demás, para que la altura se adapte a los contenidos de las cajas.
Bloque cabecera
El bloque cabecera se posiciona automáticamente en primer lugar, con lo que no necesitamos marcar su posición, y además queremos que ocupe todo el ancho de su contenedor. Al ser un elemento en bloque, que tiende a ocupar todo el ancho del contenedor, no hace falta marcar su anchura. Por tanto bastará con el siguiente código CSS:
#cabecera { background-color: #eeff45;; }
Bloque menu
En el bloque menú aparte de marcar la anchura, los márgenes, rellenos y borde, deberemos
insertar la propiedad float: left ya que a su derecha tiene que insertarse
otro bloque, y si no se marcara, el bloque siguiente se insertaría debajo, siguiendo la
norma general de los elementos en bloque. La propiedad float hace que los
bloques puedan insertarse uno al lado de otro, siempre que estos quepan dentro del espacio
que les queda libre.
La regla CSS que define el bloque menú será la siguiente:
#menu { width: 120px ; margin: 10px; padding: 8px; border: 2px solid #663333; background-color: #ece5b6; float: left;}
Hasta ahora el código CSS de la 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;; }
/*menu*/
#menu { width: 120px ; margin: 10px; padding: 8px; border:
2px solid #663333; background-color: #ece5b6; float: left;}
La página tendrá de momento el siguiente aspecto
Como vemos la altura de la página se adapta a sus contenidos. Al no tener apenas contenidos vemos que su altura es muy pequeña, pero esto no debe preocuparnos. ya que al insertar contenido dentro de los bloques éstos irán aumentando en altura.
bloque principal
Este bloque incluye dentro los bloques de contenido y de columna
lateral derecha. Debe posicionarse a la derecha del bloque menú, por lo que
después de indicar su anchura, le incluiremos la propiedad float: left
La regla CSS que se refiere a este bloque será la siguiente:
#principal { background-color: #99ffcc; width: 640px; float: left }
al darle la anchura del hueco que queda a la derecha del menú lateral, y
aplicarle la propiedad float, el bloque se posicionará a su derecha.
bloque contenido
Este bloque esta incluido dentro del bloque "principal", al tener el bloque "principal"
dos elementos, debemos indicarle la propiedad float: left para que el
otro elemento de este bloque se posicione a su derecha. Indicaremos también las
propiedades para darle los márgenes y rellenos que debe tener, y su color de fondo. Las medidas
de anchura, y márgenes que utilizamos, son las mismas que hemos usado en el ejemplo de
la página anterior. La regla CSS
referida a este bloque será la siguiente:
#contenido { width: 440px; background-color: #ffffff; margin: 10px; padding: 10px ; float: left }
Bloque lateral
al igual que en el bloque anterior añadiremos la propiedad float: left
y le daremos la anchura necesaria para que quepa en el hueco que el bloque anterior
ha dejado a su derecha. Añadiremos también las propiedades que definen los márgenes,
rellenos y borde de la caja, las cuales serán las mismas que en el ejemplo de la página
anterior. la regla CSS que lo define quedará así:
#lateral { width: 130px; background-color:#660099 ; margin: 10px 10px 10px 0px; padding: 5px ;border: 5px double #ffcc33; float: left; }
El código CSS de la página es ahora 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;; }
/*menu*/
#menu { width: 120px ; margin: 10px; padding: 8px; border: 2px solid #663333;
background-color: #ece5b6; float: left}
/*principal*/
#principal { background-color: #99ffcc; width: 640px; float: left }
/*contenido*/
#contenido { width: 440px; background-color: #ffffff; margin: 10px;
padding: 10px ; float: left }
/*lateral*/
#lateral { width: 130px; background-color:#660099 ; margin: 10px 10px 10px 0px;
padding: 5px; border: 5px double #ffcc33; float: left; }
Y la página queda de la siguiente manera:
Caja pie de página
La caja pie de página tiene la misma anchura que su contenedor, por lo que
no definimos su anchura, de esta manera ocupará todo el ancho al ser un elemento
de bloque. La definiremos como una caja normal, pero con la propiedad
clear: both, lo cual la posicionará debajo de todos los elementos
flotantes. Como en el ejemplo del apartado anterior, le definiremos también el mismo
color de fondo.
el código CSS de la caja "pie" será el siguiente:
#pie { background-color:#ccffff ; clear: both;}
Con esto acabamos de completar el diseño dde la página, el cual tiene el siguiente código CSS:
* { 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;; }
/*menu*/
#menu { width: 120px ; margin: 10px; padding: 8px; border: 2px solid #663333;
background-color: #ece5b6; float: left}
/*principal*/
#principal { background-color: #99ffcc; width: 640px; float: left }
/*contenido*/
#contenido { width: 440px; background-color: #ffffff; margin: 10px;
padding: 10px ; float: left }
/*lateral*/
#lateral { width: 130px; background-color:#660099 ; margin: 10px 10px 10px 0px;
padding: 5px; border: 5px double #ffcc33; float: left; }
/*pie*/
#pie { background-color:#ccffff ; clear: both;}
La página tiene el siguiente aspecto:
Contenido de los bloques
Lo que vemos en el enlace anterior es la estructura de la página con todos sus bloques. Estos al no tener apenas contenido, no se han desarrollado en altura. Al introducir contenido (texto, imágenes, enlaces, listas, etc.) a cada uno de los bloques, estos tomarán la altura necesaria para para mostrarlo dentro.
Veamos en el siguiente enlace cómo queda la página con los bloques llenos de contenido:
Como se puede observar cada caja adapta su altura a los contenidos que hay en ella, esto hace que este modelo sea preferido por muchos diseñadores, ya que podemos seguir añadiendo elementos dentro de cada caja sin preocuparnos por su altura.
Por otra parte este modelo hace que las diferentes columnas alcancen diferentes alturas, lo cual puede llegar a suponer un problema cuando queremos las columnas de la misma altura.
En la siguiente página diseñaremos esta misma página de ejemplo pero con un posicionamiento variable.
imprimir esta página
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