LMSGI02 - DAM - Lenguajes de marcas y sistemas de gestión de información - Utilización de lenguajes de marcas en entornos web. Contenidos.
3.6.4.- Posicionamiento.
En los ejemplos vistos hasta ahora, el navegador representa los elementos en el orden en el que aparecen atendiendo a si son elementos de bloque o de línea (entre otras cosas). Utilizando CSS, es posible modificar el posicionamiento por defecto de los elementos. Las propiedades implicadas son position y float.
Con la propiedad float, los elementos "flotan" hacia la izquierda o derecha. Todos los elementos flotados se van situando uno junto a otro. Si no hay espacio disponible, se pasan a una nueva línea. Se adapta bastante bien a diferentes tamaños de pantalla.
En este ejemplo se utiliza la propiedad float para maquetar una página sencilla, junto a las etiquetas semánticas.Los elementos <nav> y <section> están flotados a la izquierda y se reparten la anchura disponible.
Es necesario fijar la altura porque en la página apenas hay contenido.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Etiquetas semánticas y float</title>
<style>
body{
background-color:pink;
}
header{ background-color:blue;}
nav {
background-color:red;
width:10%;
}
section {
background-color:green;
width:90%;
}
footer {
background-color:yellow;
}
nav, section {
height:500px;
float: left;
}
</style>
</head>
<body>
<header>Encabezado</header>
<nav>Vínculos</nav>
<section>Contenido principal del página</section>
<footer>Página creada por...</footer>
</body>
</html>Se vería así:
