Desarrollo Web Lección 5 - Diseño
- Posicionamiento forzado

Desarrollo Web Lección 5 - Diseño

Posicionamiento forzado

Objetivo

Esta actividad presenta algunas etiquetas HTML predefinidas para estructurar páginas y analiza el uso de 'posición' para forzar su página en un diseño particular.

Pretrabajo

Cree un nuevo archivo llamado 'layout.html' en su directorio personal.
En 'layout.html', configure el código HTML básico con un enlace a 'style'css'.

Etiquetas de Diseño Predefinidas

HTML incluye algunas etiquetas predefinidas para ayudarlo a diseñar su documento. Agregue este código a <body> de su archivo 'layout.html'.

    <header>Encabezado</header>
    <nav>Navegación</nav>
    <main>Principal</main>
    <footer>Pie de página</footer>

Antes de que nos fijemos demasiado en estas etiquetas, agreguemos algo de CSS para que pueda ver cómo se ve su diseño predeterminado. Agregue el siguiente código a su archivo 'style.css'.

header {
    background-color:indianred;
    border:darkred solid 2px;
}

nav {
    background-color: burlywood;
    border:yellow solid 2px;
}

main {
    background-color: lightgreen;
    border: darkgreen solid 2px;
}

footer {
    background-color: lightskyblue;
    border: darkblue solid 2px;
}

Ahora abra 'layout.html' en Live Server y vea cómo se ve. Los colores y los bordes están puramente ahí para que entiendas cómo encajan las piezas en la pantalla. Por lo general, tendrán antecedentes similares.
Los cuatro elementos llenan la pantalla de izquierda a derecha, envolviendo su contenido firmemente a la izquierda, arriba y abajo y se apilan uno encima del otro en el orden en que los colocamos.
Puede usarlos para cualquier contenido que desee, pero, por supuesto, es más fácil de seguir para usted y cualquier persona con la que trabaje si los usa con el nombre.
<header> suele ser para el banner en la parte superior de la pantalla que muestra el logotipo y el nombre del sitio.
<nav>generalmente se usa para la navegación del sitio debajo del banner o al costado del contenido principal.
<main> es donde agregaría el contenido de su página.
<footer> es para cualquier cosa que desee en la parte inferior de la página y, a menudo, incluye enlaces de contacto, información sobre la organización e incluso información sobre el diseñador de la página y los derechos de autor.

Posicionamiento Relativo

Agregue el siguiente código CSS a su elemento 'nav'.

  position: relative;
    top: 50px;

¿Ves cómo el elemento <nav> ahora está más bajo que antes? Su parte superior ahora está posicionada en relación con el elemento anterior. De hecho, la parte superior está 50 píxeles por debajo de la parte inferior del elemento anterior.
Observe también que el elemento <nav> está cubriendo el elemento <footer>. Esto se debe a que todos los elementos que no sean <nav> están posicionados 'estáticamente' por defecto. Permanecen donde se colocaron antes de que se aplicara CSS . Si elige cambiar el posicionamiento, generalmente es mejor usar el mismo para todos los elementos.

Posicionamiento Absoluto

Agreguemos algo de contenido a la <main>sección.

    <main>
        <div class="contenido">Section 1</div>
        <div class="contenido">Section 2</div>
        <div class="contenido">Section 3</div>
    </main>

Ahora hagamos que parezca que contiene mucha información. Agregue lo siguiente a su código CSS.

.contenido {
  background-color:coral;
  border:orangered solid 2px;
  height: 400px;
}

* Ahora pruebe el siguiente código para su <main>elemento.

  position: absolute;

El <main>elemento no ha cambiado de posición, pero ahora se ha eliminado del flujo del documento en lo que respecta a los demás elementos.
Ahora también envuelve el contenido por todos los lados en lugar de ocupar todo el ancho de la página. Ahora podemos controlar el posicionamiento absolutamente.

main {
    background-color: lightgreen;
    border: darkgreen solid 2px;
    position: absolute;
    top: 100px;
    bottom: 80px;
    left: 16%;
    right: 0px;
}

Ahora la <main>sección está colocada exactamente como lo hemos prescrito: 100 píxeles desde la parte superior, 80 píxeles desde la parte inferior, el 16 % del ancho de la pantalla desde la izquierda y la derecha en el borde derecho.
Coloquemos el encabezado, el navegador y el pie de página de la misma manera.

header {
    background-color:indianred;
    border:darkred solid 2px;
    height: 100px;
    position: absolute;
    left: 16%;
    right: 0px;
}

nav {
    background-color: burlywood;
    border:yellow solid 2px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 15%;
}

footer {
    background-color: lightskyblue;
    border: darkblue solid 2px;
    position: absolute;
    bottom: 0px;
    height: 80px;
    left: 16%;
    right: 0px;
}

Eso se ve bastante bien para un diseño antiguo.

Posicionamiento Fijo

Hay otra opción útil para posicionar elementos cuando tiene mucha información para desplazarse. Podemos mantener el <nav>en la misma posición fijándolo.

nav {
    background-color: burlywood;
    border:yellow solid 2px;
    position: fixed;
    top: 0px;
    bottom: 0px;
    width: 15%;
}

Intente desplazarse por la pantalla y observe cómo <nav> se mantiene en su lugar mientras <footer> se mueve a medida que se desplaza.
Esto podría usarse para mantener el menú disponible, pero claramente <footer> es un problema.
Vamos a restaurar <main> para que nuestro diseño siga siendo utilizable.

main {
    background-color: lightgreen;
    border: darkgreen solid 2px;
    position: absolute;
    top: 100px;
    left: 16%;
    right: 0px;
    bottom: 80px;
}

Desbordamiento

Hay otra forma de lidiar con páginas grandes si desea tener un pie de página que esté siempre visible.
Desplázate por la página y verás que nuestra sección naranja de Contenido se desborda <main> y va más allá <footer>. Si eso no sucede porque su pantalla es demasiado grande, aumente el valor de height en CSS .
Cuando esté listo, agreguemos una barra de desplazamiento a <main>.

    overflow: scroll;

Ahora mira cómo se comporta la sección Contenido cuando te desplazas.
Siéntase libre de jugar con el tipo de posición y los números hasta que se sienta cómodo de entender cómo funciona. No se preocupe por perder el rastro de su código. Estará disponible al comienzo de la siguiente actividad.

Codigo Final

Siguiente: Relleno y Márgenes

Table of Contents