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.
|
|
Septiembre - 2007.
|
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.