Unidad 17. Ejercicio paso a paso: Controles de Bloque

Objetivo

Practicar el uso de controles de bloque.

Ejercicios

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

1 Abre el sitio libreria.

2 Abre el archivo estilolibreria.css.

3 Queremos que nuestra página tenga un ancho fijo de 780px. Se lo añadimos al body

body {

   ...



    width: 780px;

}

4 Al bloque con id cabecera le daremos un alto para que se ajuste a la imagen de fondo:

#cabecera {

    ...



    height: 150px;

}

5 Para que la lista del bloque cabecera quede más abajo, le añadimos un margen superior.

#cabecera ul{

    margin-top: 70px; 

}

6 Haremos que el contenido del bloque con id menu no pueda saltar de línea y le daremos un ancho fijo, para evitar el comportamiento extraño de IE con el menú desplegable:

#menu {

    ...

  

    white-space: nowrap;

    height: 15px;

}

7 Como luego insertaremos un formulario en el menu, le vamos a dar la propiedad inline para que se muestre (display) como un elemento en línea y no cree un salto de línea. Añadiremos la misma propiead a los elementos de lista del menú, para que se muestren en la misma línea.

#menu form {

    display: inline;

}

#menu li {

    ...



    display: inline;

}

8 El bloque con id anuncios tendrá un ancho de 125 píxeles y estará flotando a la derecha:

#anuncios {

    ...

      

    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 {

    ...

      

    width: 635px;

}

10 Al bloque con id pie le daremos la propiedad clear para que no tenga problemas de solapamiento con el float de los anuncios:

#pie {

    ...



    clear: both;

}

11 Vamos con el submenú. Haremos la sublista flotante y no la mostraremos (display):

#menu li ul {

    ...



    float: left;

    display: none;

}

12 Haremos que tanto los elementos de la lista, como los enlaces, se muestren como bloques:

#menu li li {

    ...



    display: block;

}

#menu li ul a {

    ...



    display: block;

}

13 Por último haremos que el submenú se muestre al poner el cursor sobre el elemento que lo contiene:

#menu li:hover ul {

    display: block;

}

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

}

15 Guarda los cambios.

   Inicio