Cómo crear una página web dividida en 3 zonas utilizando la
Anuncio
Cómo crear una página web dividida en 3 zonas utilizando la etiqueta div NOTA: Para copiar y pegar el código existente en este documento es preciso descargarle previamente. Abrirle con el Adobe Acrobat Reader u otro programa similar, seleccionar el código, copiar y pegar en el
Bluefish o en otro editor de código. __________________________________________________________________ Queremos una página que esté dividida en 3 zonas de la siguiente manera. A cada zona la llamaremos
cabecera
,
indice
, y
contenido
: El documento html será de la siguiente manera: <!DOCTYPE html> <html> <head> <meta charset="utf­8"/> <title>Prueba de divs</title> <link rel="StyleSheet" href="css/estilos.css" type="text/css" media="screen"/> </head> <body> <!­­ Comienzo de la cabecera*****************************­­> <div id="cabecera"> <p> contenido de la cabecera </p> </div> <!­­ Fin de la cabecera**********************************­­> <!­­ Comienzo del índice+++++++++++++++++++++++++++++++++­­> <div id="indice"> <p> contenido del índice </p> </div> <!­­ Fin del índice++++++++++++++++++++++++++++++++++++++­­> <!­­ Comienzo del contenido******************************­­> <div id="contenido"> <p> contenido del "contenido" </p> </div> <!­­ Fin del contenido***********************************­­> </body> </html> Dentro de la carpeta
css
crearemos un documento llamado
estilos.css
que tendrá el siguiente contenido: body, html { /*para poder dar altura a los divs, body y html son los elementos padre de los divs y por eso hay que fijar su altura */ height: 100%; font­family: sans­serif; } h1, h2, p, table { /* El margen hay que dárselo a los elementos que van dentro del div. Si ponemos margen al div, se nos descoloca. */ margin: 2%; } #cabecera { background­color: red; /* luego quitamos el color */ float: left; /* el primer elemento va a la izquierda */ width: 100%; /* ocupa todo el ancho */ height: 8%; } #indice { background­color: yellow; /* luego quitamos el color */ float: left; /* el primer elemento va a la izquierda */ width: 20%; height: 100%; } #contenido { background­color: greenyellow; /* quitar color luego*/ float: right; /* el segundo elemento va a la dcha */ width: 80%; height: 100%; /* misma altura que el índice */ /* para que no aparezca la barra de scroll si el contenido supera el cuadro */ overflow­y: hidden; }
