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

Visitas el mes pasado: 149

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

8.3 Diseño posicionado

css

Esquema de página

Lo primero que debemos hacer para diseñar una página es hacernos un esquema de cómo van a estar distribuidos los bloques y los diferentes elementos de la misma, en este apartado mostraremos cómo crear un ejemplo, a la vez que se explican los mecanismos para crear tanto ésta como cualquier otra página.

En nuestro ejemplo vamos a diseñar una página con un modelo convencional, que tendrá una cabecera, una columna izquierda de menú, una columna central de contenidos, otra columna lateral derecha, y un pie de página. La página debe quedar según el siguiente esquema:

Diseño a tres columnas

Aparte de los bloques descritos anteriormente crearemos un elemento o bloque contenedor, que los englobe a todos, y las columnas central y lateral izquierda las englobaremos en otro bloque que llamaremos "principal".


Estructura HTML.

La estructura básica del código HTML para crear esta página es la siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Diseño posicionado fijo</title>
   <link rel="stylesheet" type="text/css" href="estilo.css" media="all" />
</head>
<body>
   <div id="contenedor">
      <div id="cabecera">  
      </div>
      <div id="menu"> 
      </div>
      <div id="principal">
         <div id="contenido">
         </div>	
         <div id="lateral">
         </div>
      </div>
      <div id="pie">
      </div>
   </div>
</body>
</html>

En la estructura del código HTML observamos lo siguiente:

Posteriormente completaremos el código HTML insertando los distintos elementos de la página (títulos, parrafos, imágenes, etc.) dentro de cada uno de los bloques o etiquetas div. Toda la parte de diseño, tamaño y posicionamiento de cajas, colores, etc. vendrá dado por el código CSS.


Reglas generales

En principio, para que la página se vea igual en todos los navegadores, definiremos en CSS una serie de características que pueden ser distintas de unos a otros, como son los márgenes, etc. Ésto lo haremos mediante el selector universal ( * ). En el archivo CSS escribiremos lo siguiente:

* { margin: 0; padding: 0; text-align: center; font-size: 1em; font-family: arial; }

Con esto nos aseguramos de que partimos de unos valores por defecto, a partir de los cuales podremos variar los distintos elementos de la página.


Elemento contenedor

Como ésta va a ser una página fija, esta no se verá siempre con el mismo tamaño, ya que los usuarios pueden tener distintas resoluciones de pantalla; por lo tanto es posible que se vea un espacio en blanco a los lados, que será la diferencia entre el número de píxeles de ancho de resolución, y el número de píxeles que le demos de ancho a la página.

La mayoría de navegadores muestran este espacio en blanco a la derecha, de manera que la página queda a la izquierda. Sin embargo queda mucho más estético si centramos la página horizontalmente, para ello al elemento contenedor le aplicaremos la siguiente propiedad:

#contenedor { margin: 0 auto; }

A continuación, definiremos la anchura de la página, Nosotros le daremos una anchura de 800px. Se recomienda dar una resolución de pantalla baja para que quepa perfectamente en la pantalla, entre 800 y 1200 px es una anchura apropiada. Al elemento contenedor le daremos por tanto la anchura indicada de 800px. La línea CSS del elemento contenedor quedará así: (en verde el texto añadido)

#contenedor { margin: 0 auto; width: 800px; }

Es conveniente ponerle un borde al elemento contenedor, para diferenciar la página del espacio sobrante, lo haremos mediante la propiedad border:

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

No le hemos dado una altura a este <div> porque todavía no tenemos definidos todos los elementos que contiene. Cuando los tengamos definidos calcularemos su altura y se la daremos.

Por último le añadiremos al elemento contenedor la propiedad position: relative ya que ésto nos permitirá definir un posicionamiento absoluto de los elementos que contiene, en referencia al propio contenedor, y no a la ventana de la página:

#contenedor { margin: 0 auto; width: 800px; border: 5px groove #993300; position: relative; }


Cabecera

Para definir la cabecera le daremos sólamente una altura, de forma que la anchura será la misma que la de su elemento contenedor (ya que el div es un elemento de bloque). También a partir de aquí, para diferenciar unos elementos de otros les pondremos distintos colores, de fondo, bordes, márgenes, etc. En la cabecera cambiaremos el color de fondo.

La regla CSS que añadiremos será la siguiente:

#cabecera { height: 150px; background-color: #eeff45; }

De momento el código CSS insertado 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;
              position: relative }
#cabecera { height: 100px; background-color: #eeff45;; }

Y la página tendrá de momento el siguiente aspecto:

Posicionamiento fijo 1


De momento no se parece mucho a una página, pero es que sólo tenemos la cabecera, vamos ahora a añadir los siguientes bloques:


Menú lateral.

Las tres columnas centrales las distribuiremos de forma que cada columna lateral ocupe un 20% del espacio y la columna central el 60% restante. Para ello calculamos, el 20% de 800px, que son 160px. Esta es la anchura que debe ocupar la columna lateral.

Sin embargo a esta columna queremos darle un margen de 10px, un relleno de 8px y un borde de 2px, con lo cual si sumamos el espacio de estos elementos, tanto en su parte izquierda como derecha, nos da un total de: 2x10 + 2x8 + 2x2 = 40px, que tendremos que restar al ancho que le demos a la columna, lo cual da una anchura de 120px. El código CSS una vez incluidos márgenes, rellenos y borde, quedará así:

#menu { width: 120px ; margin: 10px; padding: 8px; border: 2px solid #663333; }

Vamos a darle también una altura a la columna, esta debe ser tal que quepan los contenidos que vayamos a poner sin que sobre mucho espacio libre en la parte inferior, en este caso le daremos 400px. Daremos también un color de fondo para este bloque mediante la propiedad background-color. El código CSS anterior quedará así:

#menu { width: 120px ; margin: 10px; padding: 8px; border: 2px solid #663333; height: 300px; background-color: #ece5b6; }

Como los elementos de bloque se posicionan uno debajo de otro y a la derecha, de momento, no hace falta posicionar esta caja mediante la propiedad position, ya que está colocada en el lugar que queremos.


Bloque principal.

El bloque principal incluye otros dos bloques, el de contenidos, y el lateral.

Debemos dar medidas a este bloque y posicionarlo. para ello debemos en primer lugar calcular cual es el punto de su esquina superior izquierda.

Por encima de este bloque está la cabecera, que ocupa 100px de alto, y a su izquierda está el menú que ocupa 160px. por tanto su posición será alto 100px, e izquierda 160px. Tras posiconarlo de forma absoluta estos serán los valores que le demos en el código CSS:

#principal { position: absolute; top: 100px; left: 160px; }

Una vez posicionado debemos darle una anchura y una altura a la caja, la anchura será el ancho de la página menos el ancho del menú. es decir 800-160 = 640px; el alto debe ser lo bastante grande como para que quepan sus contenidos, sin que sobre mucho espacio por debajo. También le daremos un color de fondo. el código CSS quedará así:

#principal { position: absolute; top: 100px; left: 160px; width: 740px; height: 500px; background-color: #99ffcc }

La página tiene ahora el siguiente aspecto

Posicionamiento fijo 2


Vemos que la caja principal desborda el contenido de la caja contenedor, Esto es porque en el posicionamiento absoluto, la caja posicionada no tiene en cuenta las otras cajas. Cuando hayamos acabado de posicionar el resto de cajas arreglaremos este problema, dándole a la caja contenedor la altura adecuada.

Caja contenido

Al igual que en la caja principal le haremos un posicionamiento absoluto. El punto de referencia es la caja que la contiene, es decir la caja principal. Como su posición es desde la misma esquina superior izquierda de su elemento contenedor, las propiedades de distancia en vertical y horizontal serán top: 0px; left: 0px; .

Además le daremos un margen de 10px y un relleno (padding) de 10px, con lo cual al calcular su anchura y altura debemos restarle 20px a la medida de la caja.

La anchura será la de su contenedor (640px), menos la columna lateral derecha (160px), menos el ancho de los márgenes y rellenos (40px). por tanto la anchura será : 640-160-40 = 440px.

La altura será la misma que la de su elemento contenedor (500px) menos la del alto de los márgenes y rellenos (40px), por tanto la altura será: 500-40 = 460px.

Como siempre, le pondremos también un color de fondo, en este caso el blanco. El código CSS de la caja contenido quedará así:

#contenido { position: absolute; top: 0px; left: 0px; width: 440px; height: 460px; background-color: #ffffff; margin: 10px; padding: 10px ; }

Y la página tendrá ahora el siguiente aspecto

Posicionamiento fijo 3


Caja lateral

Siguiendo los mismos pasos que para la caja anterior, en primer lugar veamos su posicionamiento: Estará en la esquina superior derecha de su elemento contenedor, por tanto le daremos un posicionamiento absoluto con valores de desplazamiento top: 0px; right: 0px;

Hay que tener en cuenta los márgenes, rellenos y bordes que le queramos dar. En este caso le daremos un borde doble de 5px y un relleno de 5px. También le daremos un margen superior, inferior y derecho de 10px, para igualarlo con su elemento adyacente.

La anchura será la del sitio que tiene para mostrarse (160px) menos los márgenes y bordes (30px), por tanto será de 130px. La altura será también la de su elemento contenedor (500px), menos la de sus márgenes y bordes (40px), lo que da 460px.

Por último le añadiremos un color de fondo. El código CSS de la caja lateral quedará así:

#lateral { position: absolute; top: 0px; right: 0px; width: 130px; height: 460px; background-color:#660099 ; margin: 10px 10px 10px 0px; padding: 5px ; border: 5px double #ffcc33; }

Hasta ahora el código CSS empleado es el siguiente:

#menu { width: 120px ; margin: 10px; padding: 8px; border: 2px solid #663333; 
        height: 300px; background-color: #ece5b6;}
/*principal*/
#principal { position: absolute; top: 100px; left: 160px; width: 640px; height: 500px; 
             background-color: #99ffcc; }
/*contenido*/
#contenido { position: absolute; top: 0px; left: 0px; width: 440px; height: 460px; 
             background-color: #ffffff; margin: 10px; padding: 10px ; }
/*lateral*/
#lateral { position: absolute; top: 0px; right: 0px; width: 130px; height: 460px; 
           background-color:#660099 ; margin: 10px 10px 10px 0px; padding: 5px ;
           border: 5px double #ffcc33; }

Y la página tendrá ahora el siguiente aspecto

Posicionamiento fijo 4



Caja de pie de página

La caja pie debemos posicionarla lo más a la izquierda posible (0px), y debajo de todas las cajas anteriores, por lo que debemos tener en cuenta la altura de la página hasta este momento, Esta será la altura de la cabecera (100px) mas la altura de la caja más alta de las columnas (500px), lo cual nos da 600px.

En este caso no vamos a poner márgenes y rellenos ni bordes, por lo que la anchura será la anchura de la página (800px) y le daremos una altura igual a la de la cabecera (100px).

También definiremos un color de fondo, con lo que la regla CSS de la caja pie quedará así:

#pie { position: absolute; top: 600px; left: 0px; width: 800px; height: 100px; background-color:#ccffff ; }

Ahora que tenemos todos los elementos de la página, podemos dar la altura correcta al elemento contenedor, esta será la altura de la cabecera(100px) más la de las columnas (500px) más la del pie de página (100px), por lo tanto 700px. Esto lo incluiremos en la regla del elemento contenedor:

#contenedor { margin: 0 auto; width: 800px; border: 5px groove #993300; position: relative; height: 700px; }

El código CSS empleado en 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;
              position: relative; height: 700px; }
#cabecera { height: 100px; background-color: #eeff45;; }
/*menu*/
#menu { width: 120px ; margin: 10px; padding: 8px; border: 2px solid #663333; 
        height: 300px; background-color: #ece5b6;}
/*principal*/
#principal { position: absolute; top: 100px; left: 160px; width: 640px; height: 500px; 
             background-color: #99ffcc; }
/*contenido*/
#contenido { position: absolute; top: 0px; left: 0px; width: 440px; height: 460px; 
             background-color: #ffffff; margin: 10px; padding: 10px ; }
/*lateral*/
#lateral { position: absolute; top: 0px; right: 0px; width: 130px; height: 460px; 
           background-color:#660099 ; margin: 10px 10px 10px 0px; padding: 5px ;
           border: 5px double #ffcc33; }
/*pie*/
#pie { position: absolute; top: 600px; left: 0px; width: 800px; height: 100px; 
       background-color:#ccffff ; }

Y la página tendrá el siguiente aspecto

Posicionamiento fijo 5



Elementos de las cajas

El diseño de la estructura de la página ya está completo, ya sólo falta rellenar las diferentes cajas con los elementos que van dentro de ellas (títulos, párrafos, imágenes, tablas, etc.). Un ejemplo de cómo podría quedar la página es el siguiente:

Posicionamiento fijo 6


Aquí hemos hecho una página de ejemplo para mostrar el diseño fijo. Hemos empleado el posicionamiento fijo (propiedad position), donde las medidas son píxeles. No suelen emplearse porcentajes en este tipo de diseño, ya que al emplear porcentajes, el espacio que ocupan los contenidos suele variar de forma distinta al tamaño de la caja, lo cual crea problemas de visibilidad de la página.




En la siguiente página veremos esta misma página diseñada mediante el diseño flotante, también con medidas fijas.

Diseño flotante.



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