Tech School

User Tools

Site Tools

Trace:
es:web_development:layout:position

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
es:web_development:layout:position [2022/03/17 08:32]
mag created 		es:web_development:layout:position [2023/08/16 09:33] (current)
Line 16: Line 16:
   * 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'.    * 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'. 
 <code>header { <code>header {
-  background-color:indianred; +    background-color:indianred; 
-  border:darkred solid 2px;+    border:darkred solid 2px;
 } }
  
 nav { nav {
-  background-color: burlywood; +    background-color: burlywood; 
-  border:yellow solid 2px;+    border:yellow solid 2px;
 } }
  
 main { main {
-  background-color: lightgreen; +    background-color: lightgreen; 
-  border: darkgreen solid 2px;+    border: darkgreen solid 2px;
 } }
  
 footer { footer {
-  background-color: lightskyblue; +    background-color: lightskyblue; 
-  border: darkblue solid 2px;+    border: darkblue solid 2px;
 }</code> }</code>
   * 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.   * 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.
Line 42: Line 42:
   * <html><footer></html> 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.   * <html><footer></html> 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'.
 +<code>  position: relative;
 +    top: 50px;</code>
 +  * ¿Ves cómo el elemento <html><nav></html> 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 <html><nav></html> está cubriendo el elemento <html><footer></html>. Esto se debe a que todos los elementos que no sean <html><nav></html> 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.
 +<code>    <main>
 +        <div class="contenido">Section 1</div>
 +        <div class="contenido">Section 2</div>
 +        <div class="contenido">Section 3</div>
 +    </main></code>
 +  * Ahora hagamos que parezca que contiene mucha información. Agregue lo siguiente a su código CSS.
 +<code>.contenido {
 +  background-color:coral;
 +  border:orangered solid 2px;
 +  height: 400px;
 +}</code>  * Ahora pruebe el siguiente código para su <main>elemento.
 +<code>  position: absolute;</code>
 +  * 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.
 +<code>main {
 +    background-color: lightgreen;
 +    border: darkgreen solid 2px;
 +    position: absolute;
 +    top: 100px;
 +    bottom: 80px;
 +    left: 16%;
 +    right: 0px;
 +}</code>
 +  * 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.
 +<code>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;
 +}</code>
 +  * 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.
 +<code>nav {
 +    background-color: burlywood;
 +    border:yellow solid 2px;
 +    position: fixed;
 +    top: 0px;
 +    bottom: 0px;
 +    width: 15%;
 +}</code>
 +  * Intente desplazarse por la pantalla y observe cómo <html><nav></html> se mantiene en su lugar mientras <html><footer></html> se mueve a medida que se desplaza.
 +  * Esto podría usarse para mantener el menú disponible, pero claramente <html><footer></html> es un problema.
 +  * Vamos a restaurar <html><main></html> para que nuestro diseño siga siendo utilizable.
 +<code>main {
 +    background-color: lightgreen;
 +    border: darkgreen solid 2px;
 +    position: absolute;
 +    top: 100px;
 +    left: 16%;
 +    right: 0px;
 +    bottom: 80px;
 +}</code>
 +
 +==== 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 <html><main></html> y va más allá <html><footer></html>. Si eso no sucede porque su pantalla es demasiado grande, aumente el valor de <html>height</html> en CSS .
 +  * Cuando esté listo, agreguemos una barra de desplazamiento a <html><main></html>.
 +<code>    overflow: scroll;</code>
 +  * 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 ====
 +  * [[http://localhost/webdev/code/layout/1/es.php|layout.html]]
 +  * [[http://localhost/webdev/code/layout/1/style.php|style.css]]
 +  * [[http://localhost/webdev/code/layout/1/layout.html|resultado]]
 +
 +[[es:web_development:layout:padding_margin|Siguiente: Relleno y Márgenes]]
es/web_development/layout/position.1647531122.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki