Página inicial  

trans_770 trans_160

Ejercicio paso a paso. Unidad 17. Controles de Bloque


Objetivo.

 

Practicar el uso de controles de bloque.

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.


  Índice del curso  
Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Agosto - 2006.