Unidad 17. Ejercicio: 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 propiedad 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 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 Completaremos el estilo para el precio evitando que pueda saltar de línea.

.precio {
	...

	white-space: nowrap;
} 

16 Guarda los cambios.