Unidad 13. Ejercicio: Posicionamiento flotante
En este ejercicio practicaremos con el posicionamiento flotante de elementos en una página web. Para realizar este ejercicio debes descargarte el archivo indice.html de la carpeta ejercicios/unidad-13/curso-excel/indice.html y guardarlo en la carpeta de ejercicios/curso-excel (o copiar el código que se muestra a continuación). También debes descargarte el archivo de la hoja de estilo indice.css ejercicios/unidad-13/curso-excel/css/indice.css y guardarlo en la carpeta de ejercicios/curso-excel/css (o copiar el código que se muestra a continuación).
Ejercicio 1: Posicionamiento Flotante.
- Desde el editor Brackets abre el archivo indice.html.
- Debes ver el siguiente código:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>aulaClic. Índice Excel </title>
<link href="css/indice.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="graficos/logo_aulaclic.png" alt="logo">
<h1>Excel 2016</h1>
</header>
<nav>
<p>Atrás Índice Adelante Inicio Ayuda</p>
</nav>
<main>
<p>Contenido del curso de Excel 2016</p>
</main>
<aside>Publicidad 1</aside>
<footer>
<p>Fecha</p>
<p>Página</p>
</footer>
</body>
</html>
- Abre la hoja de estilo indice.css, debes ver este código:
/* CSS Hoja de estilo. indice.css */
nav p {
color: brown;
}
footer p {
color: blue;
}
aside p {
color: darkgreen;
}
- Para ver como funcionan varios tipos de posicionamiento añadimos el identificador "logo" a la imagen del logotipo de aulaClic con <img src="graficos/logo_aulaclic.png" id="logo" alt="logo"> y en la hoja de estilo indice.css posicionamos esta imagen con posicionamiento relativo a 5 px del borde superior y a 10 px a la izquierda de su contenedor, que en este caso es header. Para ello escribimos: #logo {
position: relative;
top: 5px;
left: 10px;
}
Visualiza la página y observa como se ha desplazado a la posición indicada.
- Ahora vamos a cambiar el posicionamiento a absoluto con #logo {
position: absolute;
top: 5px;
left: 10px;
}. Al visualizar la página veremos cómo el logo queda encima del texto ya que el posicionamiento absoluto no genera un hueco, al contrario que si hace el posicionamiento relativo.
- Para ver el efecto del posicionamiento flotante a la derecha cambiamos a #logo {
float: right;
top: 5px;
left: 10px;
} Si no especificamos nada, por defecto se toma el posicionamiento relativo. Veremos como el logo se sitúa en la parte derecha de la página.
- Vamos a colocar los diferentes elementos de la página, en la primera línea colocaremos el logo, el encabezado y el párrafo de navegación; en la línea siguiente irá el contenido principal, y a la derecha pondremos la publicidad, y en la última línea la fecha a la izquierda, y la página a la derecha. Primero lo haremos con posicionamiento flotante y luego, en el siguiente ejercicio, con posicionamiento flexible. En primer lugar cambiamos a float: left, el logo.
- A continuación damos posicionamiento flotante a la izquierda al encabezado h1 con: header h1 {
float: left
} y al párrafo de navegación con: nav {
position: relative;
float: left;
}
- Si visualizas la página verás como queda mal ya que el contenido principal también se coloca en la parte superior, para arreglarlo hay evitar que "flote" respecto al elemento previo, para ello utilizamos la propiedad clear, escribimos: main {
clear: left
}
- Para mejorar la primer línea hacemos el logo más pequeño con width: 9em; y lo ajustamos a la parte superior con un margen negativo margin: -15px;. Cambiamos el tamaño del texto del encabezado h1 con font-size: 1.3em;
- Ahora para colocar la publicidad a la derecha del contenido principal necesitamos crear dos columnas, cada una con un porcentaje del total y ambas flotando a la izquierda; escribimos: main {
clear: letf;
float: left;
width: 70%;
} y aside {
float: left;
width: 30%
}
- Por último para colocar la fecha y la página en la misma línea con la página en la parte derecha, añadimos dos clases en el código HTML: <p class="pie_fecha">Fecha</p> y <p class="pie_pagina">Página</p> y las hacemos flotar a la izquierda y derecha respectivamente: .pie_fecha {
float: left
} y .pie_pagina {
float: right
}
- El resultado será una página web como esta:
- El código HTML es este:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>aulaClic. Índice Excel</title>
<link href="css/indice.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="graficos/logo_aulaclic.png" id="logo" alt="logo">
<h1> Excel 2016</h1>
</header>
<nav>
<p> Atrás Índice Adelante Inicio Ayuda</p>
</nav>
<main>
<p>Contenido del curso de Excel 2016</p>
</main>
<aside>
<p>Publicidad </p>
</aside>
<footer>
<p class="pie_fecha">Fecha</p>
<p class="pie_pagina">Página</p>
</footer>
</body>
</html>
- Y la hoja de estilo es esta:
/* CSS Hoja de estilo. indice.css */
nav p {
color: brown;
}
footer p {
color: blue;
}
aside p {
color: darkgreen;
}
#logo {
position: relative;
float: left;
top: -15px;
width: 9em;
}
header h1 {
float: left;
font-size: 1.3em;
}
nav {
float: left;
margin-left: 10px;
}
main {
clear: left;
float: left;
width: 70%;
}
aside {
float: left;
width: 30%
}
footer {
clear: both
}
.pie_fecha {
float: left
}
.pie_pagina {
float: right
}
- Visualiza la página web desde el editor Brackets con el botón
. También puedes verla desde este enlace: indice.html
- Desde el editor Brackets, en el menú Archivo y elige Guardar con el mismo nombre para los dos archivos que hemos modificado, indice.html e indice.css.
- Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.
Cursos Informática Gratuitos
