Unidad 17. Ejercicio: Controles de Márgenes y Borde


Objetivo

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

Ejercicio

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

2 Abre el sitio libreria.

3 Abre el archivo estilolibreria.css.

4 Queremos lograr un diseño centrado con una columna central. Esto lo haremos añadiendo lo siguiente al body. Más adelante le daremos un ancho fijo.

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background: url(imagenes/fondo.gif) repeat-x  bottom;
      
    margin-left: auto;
    margin-right: auto;
}
      

5 Cambiamos la alineación de la cabecera a la derecha.

#cabecera {
    background-image: url(imagenes/cabecera.jpg);
    background-repeat: no-repeat;
    background-color: white;
      
   text-align: right;
}

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;

    text-align: left;  
    margin-bottom: 20px;
    padding: 3px 0px 3px 0px;
    border-top: 1px solid gray;
    border-bottom: 5px solid #E35331;
}

7 Quitaremos los márgenes y padding por defecto de la lista del menú:

#menu ul {
    margin: 0;
    padding: 0;
}

8 También estableceremos los paddings para los elementos del lista dentro del bloque con id menu:

#menu li {
    padding: 3px 12px 3px 12px;
}

9 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.

También centraremos el texto utilizando text-align.

#anuncios {
    margin-bottom: 15px;
    padding-right: 5px;
    padding-left: 5px; 
    text-align: center;
}

10 Separaremos los distintos anuncios con un margen inferior de 10 píxeles. Son los div dentros del bloque #anuncios:

#anuncios div {
    margin-bottom: 10px;
}

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

#contenido {
    padding-left: 5px;
    padding-top: 15px;
}

12 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;
}

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

#listado .item {
    margin-left: 60px;
}

14 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;
}

15 Añadiremos al bloque con id pie un margen inferior de 15 píxeles, centraremos el contenido, unos paddings superior e inferior y un borde superior rojo de 5 píxeles de ancho:

#pie {
    font-size: 70%;
      
    text-align: center;
    margin-bottom: 15px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top: 5px solid #E35331;
}

16 Por último quitaremos el borde que se muestra en la imágenes cuando están en un enlace:

a img {
    border-style: none;
}

17 Ahora vamos con los estilos que formarán el submenú. A la sublista, le damos un pequeño borde superior del mismo color de fondo, para que quede alineado con el color rojo. Lo hacemos con borde para evitar un comportamiento erróneo de IE.

#menu li ul {
    border-top: #BDFCF2 2px solid;
}

18. Ajustamos el padding de los elementos de lista delsubmenú y de sus enlaces:

#menu li li {   
    background-color: #E35331;

    padding: 3px;
}
#menu li ul a { 	
    padding: 0 9px;
}

19. Damos márgenes los id con la clase detalle que tendremos dentro de contenido:

#contenido .detalle {   
    margin-left: 60px;
    margin-bottom: 30px;
}

20. Y añadimos algo de margen a los elementos de la lista que mostrará el detalle del libro:

ul.detallelibro li {   
    margin: 5px;
}

19 Guarda los cambios.


Marzo-2015
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.