Página inicial

Ejercicio paso a paso. Unidad 17. Controles de Márgenes y Borde


Objetivo.

 

Practicar el uso de controles de márgenes y borde.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

3 Abre el archivo estilo_libreria.css.

4 Para que en Internet Explorer se muestre todo el contenido centrado añadiremos esta propiedad a la etiqueta body:

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

background: url(imagenes/fondo.gif) repeat-x bottom;

 

text-align: center;

}

 

5 Para que en el resto de navegadores se muestren los contenidos centrados añadiremos lo siguiente en los bloques con id cabecera, menu y pie.

La clase contenedor también deberá ir centrada, así que también deberemos aplicarle las mismas propiedades:

#cabecera {

background-image: url(imagenes/cabecera.jpg);

background-repeat: no-repeat;

background-color: white;

 

margin-left: auto;

margin-right: auto;

text-align: right;

}

 

#menu {

font-size: 13px;

letter-spacing: 1px;

background: url(imagenes/fondo_menu.gif) repeat-x;

 

margin-left: auto;

margin-right: auto;

text-align: left;

}

 

.contenedor {

margin-left: auto;

margin-right: auto;

text-align: left;

}

 

#pie {

font-size: 9px;

 

margin-left: auto;

margin-right: auto;

}

Observa como en los casos en los que queremos que el texto no esté centrado deberemos indicarlo con la propiedad text-align.

Recuerda que toda la página heredará el valor center que se estableció en el body.

 

6 Al bloque con id menu le aplicaremos unas cuantas propiedades para que tenga una separación exterior en la parte inferior de 20 píxeles.

También estableceremos el padding de todos los lados (la separación de los bordes con el contenido).

Y crearemos dos bordes, uno en la parte superior de color gris y de 1 píxel de ancho, el otro de color rojo y con 5 píxeles de ancho.

#menu {

font-size: 13px;

letter-spacing: 1px;

background: url(imagenes/fondo_menu.gif) repeat-x;

margin-left: auto;

margin-right: auto;

text-align: left;

 

margin-bottom: 20px;

padding: 3px 0px 3px 0px;

border-top: 1px solid gray;

border-bottom: 5px solid #E35331;

}

 

7 También estableceremos los paddings para los elementos de clase item dentro del bloque con id menu:

#menu .item {

padding: 3px 12px 3px 12px;

}

 

8 El bloque con id anuncios deberá tener un margen inferior de 15 píxeles.

También le añadiremos unos paddings a izquierda y derecha.

Como se encuentra dentro de un bloque de clase contenedor se verá afectado por el alineamiento a la izquierda, lo centraremos de nuevo al centro utilizando text-align.

#anuncios {

margin-bottom: 15px;

padding-right: 5px;

padding-left: 5px;

text-align: center;

}

 

9 Separaremos los elementos de clase item dentro del bloque de anuncios con un margen inferior de 10 píxeles:

#anuncios .item {

margin-bottom: 10px;

}

 

10 Al bloque con id contenido le daremos un padding izquierdo y superior:

#contenido {

padding-left: 5px;

padding-top: 15px;

}

 

11 Más tarde crearemos un bloque con id listado, vamos a configurarlo para que tenga un margen superior de 30 píxeles y un padding inferior también de 30.

#listado {

margin-top: 30px;

padding-bottom: 30px;

}

 

12 La clase item dentro del bloque con id listado deberá tenter un margen izquierdo de 60 píxeles.

#listado .item {

margin-left: 60px;

}

 

13 La clase borde_inferior deberá tener un borde inferior de 1 píxel de ancho de color negro:

.borde_inferior {

border-bottom: 1px solid black;

}

14 Finalmente añadiremos al bloque con id pie un margen inferior de 15 píxeles, unos paddings superior e inferior y un borde superior rojo de 5 píxeles de ancho:

#pie {

font-size: 9px;

margin-left: auto;

margin-right: auto;

 

margin-bottom: 15px;

padding-top: 10px;

padding-bottom: 5px;

border-top: 5px solid #E35331;

}

15 Guarda los cambios.




  Índice del curso  
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.