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: 69

Visitas el mes pasado: 84

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 (IV)

8.4 Diseño flotante.

css

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:

Diseño a tres columnas

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

diseño flotante 1


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:

diseño flotante 2



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:

diseño flotante 3



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:

diseño flotante 4

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.

Tamaño variable.



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