CSS: Ejercicios de posicionamiento

PRÁCTICA 6: A partir del código HTML proporcionado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio posicionamiento float</title>
<style type="text/css">
div#paginacion {

}
.derecha {

}
.izquierda {

}

div.clear {
clear: both;
}
</style>
</head>
<body>
<div id="paginacion">
<span class="izquierda">&laquo; Anterior</span> <span class="derecha">Siguiente &raquo;</span> <div class="clear"></div>
</div>
</body>
</html>

Determinar las reglas CSS necesarias para 'paginación', 'izquierda' y 'derecha' que el resultado sea similar al mostrado en la siguiente imagen:

Dibujando una casa con CSS: Analizar y comprender el fichero HTML que se adjunta. Todos los divs están posicionados de forma absoluta y constan de un borde negro de 3px, además de un padding de 5 px.

1.- ¿Cuál será el tamaño del div 'casa'?

2.- Alinear el tejado con la casa, haciendo que coincidan el borde inferior del tejado con el borde superior de la casa. Para ello, deberá alterarse el estilo del div 'tejado'.

3.- El tejado deberá estar centrado en la casa. Para ello deberá alterarse el estilo del div 'tejado'.

4.- Definir una puerta de 50px de alto y 50px de ancho de color marrón y que quede centrada en la casa.

5.- Definir 1 'ventana' para cada una de las 2 plantas de la casa (30px x 30px).

El código HTML definitivo sería el siguiente:

<div id="h1" class="casa">
<div class="tejado" />
<div class="puerta"><h1>120</h1></div>
<div class="ventana"></div>
<div class="ventana2"></div>
</div>

El resultado final debería ser parecido al siguiente:


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO