| 1 Si no tienes abierto
Dreamweaver, ábrelo para realizar el ejercicio.
2 Abre el sitio libreria.
3 Abre el archivo estilo_libreria.css.
4 Al bloque con id cabecera le daremos un ancho y un alto para que se ajuste a la imagen de fondo:
#cabecera {
background-image: url(imagenes/cabecera.jpg);
background-repeat: no-repeat;
background-color: white;
text-align: right;
margin-left: auto;
margin-right: auto;
width: 780px;
height: 150px;
}
5 Al bloque con id menu le daremos un ancho y estableceremos que su contenido no puede saltar de línea:
#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;
white-space: nowrap;
width: 780px;
}
6 Como luego insertaremos un formulario en el menu, le vamos a dar la propiedad inline para que se muestre como un elemento en línea y no cree un salto de línea:
#menu form {
display: inline;
}
7 También le daremos un ancho determinado al bloque con la clase contenedor:
.contenedor {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 780px;
}
8 El bloque con id anuncios tendrá un ancho de 125 píxeles y estará flotando a la derecha:
#anuncios {
margin-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
text-align: center;
width: 125px;
float: right;
}
9 Al bloque con id contenido le daremos un ancho de 635 píxeles para que todo su contenido se encuentre a la izquierda del bloque de anuncios:
#contenido {
padding-left: 5px;
padding-top: 15px;
width: 635px;
}
10 Al bloque con id pie le daremos un acho determinado y estableceremos la propiedad clear para que no tenga problemas de solapamiento con el float de los anuncios:
#pie {
font-size: 9px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
padding-top: 10px;
padding-bottom: 5px;
border-top: 5px solid #E35331;
width: 780px;
clear: both;
}
11 Finalmente crearemos dos últimas clases img_item, salto_linea y alto_10 que utilizaremos más adelante.
La primera simplemente crea un flotamiento a la izquierda.
La segunda limpia el flotamiento y establecerá una separación de 15 píxeles.
La tercera deberá ser de 10 píxeles de altura.
.img_item {
float: left;
}
.salto_linea {
clear: left;
height: 15px;
}
.alto_10 {
height: 10px;
}
12 Guarda los cambios.
|
