Ayuda ejercicios unidad 13: Posicionamiento. Flexbox. Grid

En este ejercicio practicaremos con el posicionamiento en rejilla en una página web. Para realizar este ejercicio utilizaremos el archivo indice_grid_ini.html que puedes descargarte de la carpeta ejercicios/unidad-13/curso-excel/indice_grid_ini.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_grid_ini.css ejercicios/unidad-13/curso-excel/css/indice_grid_ini.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 con rejillas.

Desde el editor Brackets abre el archivo indice_grid_ini.html, que tiene el siguiente aspecto:
Ej. propuesto 13

Debes ver el siguiente código:

<!doctype html>
<html>
  <head>
  <meta charset="utf-8" />
  <title>aulaClic. Índice Excel</title>
  <link href="css/indice_grid_ini.css" rel="stylesheet" type="text/css">
  </head>
<body>
  <div class="cabeceras">
    <header>
      <img src="graficos/logo_aulaclic.png" id="logo" alt="logo">
     </header> 
     <h1>Excel 2016</h1>
     <nav>
      <p>Atrás  Índice Adelante Inicio  Ayuda</p>
     </nav>
  </div>
  <div class="central">
	 <main>
        <p>Contenido del curso de Excel 2016</p>
     </main>
     <aside>
        <p>Publicidad </p>
     </aside>
  </div>
  <footer>
     <p>Fecha</p>
     <p>Página</p>
  </footer>
 </body>
 </html>

Y la hoja de estilo es esta indice_grid_ini.css:

/* CSS Hoja de estilo. indice_grid_ini.css */
nav p {
	  color: brown;
}
footer p {
	  color: blue;
}
aside p {
	  color: darkgreen;
}
	  #logo {
  	  width: 9em;
}
h1 {
	  font-size: 1.3em;
	  margin-left: 5px;
	  margin-right: 10px
}
.cabeceras {
	  display: flex;
	  flex-wrap: wrap;
	  align-items: center;
	  margin-top: -10px;
}
.central {
	  display: flex;
      justify-content: space-between;
}
aside {
	  margin-left: 1em;
}
footer {
	  display: flex;
	  justify-content: space-between;
}

Vamos a crear dos soluciones a este ejercicio, por ello, guarda el archivo indice_grid_ini.html como indice_grid.html, y el archivo indice_grid_ini.css, como indice_grid.css, y vamos a modificar estos nuevos archivos.
Para utilizar rejillas debemos cambiar el código HTML a fin de englobar toda la página con un contenedor al que llamaremos contenedor_grid y al cual aplicaremos el posicionamiento grid, luego colocaremos cada elemento en la celda correspondiente.

Por lo tanto quedará el siguiente código para indice_grid.html:

<!doctype html>
<html>
  <head>
  <meta charset="utf-8" />
  <title>aulaClic. Índice Excel</title>
  <link href="css/indice_grid.css" rel="stylesheet" type="text/css">
  </head>
<body>
  <div class="contenedor_grid">
    <header>
      <img src="graficos/logo_aulaclic.png" id="logo" alt="logo">
     </header> 
     <h1>Excel 2016</h1>
     <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>Fecha</p>
       <p>Página</p>
    </footer>
</div>
 </body>
 </html>

Ahora debemos modificar la hoja de estilo para definir la rejilla para la clase contenedor_grid, y creamos las filas y columnas correspondientes, en nuestro caso vamos a crear una rejilla de 3 filas y cuatro columnas. Eliminamos las reglas antiguas para las clases cabeceras y central.

De momento, la hoja de estilo indice_grid.css es esta:

/* CSS Hoja de estilo. indice_grid.css */
nav p {
	  color: brown;
}
footer p {
	  color: blue;
}
aside p {
	  color: darkgreen;
}
	  #logo {
  	  width: 9em;
}
h1 {
	  font-size: 1.3em;
	  margin-left: 5px;
	  margin-right: 10px
}
.contenedor_grid {
	  display: grid;
	  grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 20% 70% 20%;
	  
}
aside {
	  margin-left: 1em;
}
footer {
	  display: flex;
	  justify-content: space-between;
}

Ahora colocamos cada elemento en la casilla correspondiente. El header irá en la casilla uno de la primera fila, el h1 en la casilla siguiente, etc. El problema se presenta a la hora de colocar el footer ya que este debe ocupar todas las casillas de la última fila y al fusionarlas ya sólo tendremos una casilla, puesto que debemos colocar el párrafo con la fecha a la izquierda y el párrafo con la página a la derecha y dado que ambos están dentro del contenedor footer no podemos colocarlos en dos casillas distintas.
Para solucionarlo podemos hacer varias cosas, la primera sería eliminar el footer y crear dos contenedores, uno para la fecha y otro para la página, y ponerlos en dos casillas, pero está solución no es buena ya que perdemos la agrupación de ambos párrafos en un sólo pie.

La mejor solución sería colocar el footer ocupando las cuatro casillas de la última fila y crear un posicionamiento anidado de caja flexible para él, dado que no necesitamos un posicionamiento grid puesto que sólo vamos a utilizar una fila (una dimensión), luego bastaría asignarle justify-content: space-between; para colocar el párrafo con la fecha a la izquierda y el párrafo con la página a la derecha. Esta solución la puedes ver aquí: indice_grid.html, El código de esta solución es el siguiente:

/* CSS Hoja de estilo. indice_grid.css */
nav p {
	  color: brown;
}
footer p {
	  color: blue;
}
aside p {
	  color: darkgreen;
}
#logo {
  	  width: 9em;
}
h1 {
	  font-size: 1.3em;
	  margin-left: 5px;
	  margin-right: 10px
}
.contenedor_grid { 
	  display: grid;
	  grid-template-columns: 1fr 1fr 1fr 1fr;
	  grid-template-rows: 20% 70% 20%;
	  }
header {
	  grid-row: 1 / 2;
	  grid-column: 1 / 2;
}
h1 {
	  grid-row: 1 / 2;
	  grid-column: 2 / 3;
}
nav {
	  grid-row: 1 / 2;
	  grid-column: 3 / 5;
}
main {
	  grid-row: 2 / 3;
	  grid-column: 1 / 4 ;
}
aside {
	  grid-row: 2 / 3;
	  grid-column: 4 /4 ;
      text-align: right
}
footer {
	  grid-row: 3 / 4;
	  grid-column: 1 / 5 ;
 	  display: flex;
	  justify-content: space-between
}

Sin embargo, como en el enunciado del ejercicio habíamos dicho que debíamos utilizar posicionamiento con rejillas vamos a crear otra solución para ello, guarda el archivo indice_grid.html como indice_grid2.html, y el archivo indice_grid.css, como indice_grid2.css, y vamos a modificar estos nuevos archivos.

En el código de indice_grid2.html lo único que hay que cambiar es el enlace con la nueva hoja de estilo: <link href="css/indice_grid2.css" rel="stylesheet" type="text/css"> . Para esta nueva solución podemos cambiar el posicionamiento de footer a una rejilla con una fila y dos columnas, automáticamente el párrafo de la fecha se colocará en la primera casilla y el párrafo de la página en la segunda casilla, en esta segunda casilla podemos utilizar justify-self: end; para alinear el contenido a la derecha. Así tendremos una segunda rejilla anidada en la primera. A continuación puedes ver el código de indice_grid2.css.

/* CSS Hoja de estilo. indice_grid2.css */
nav p {
	  color: brown;
}
footer p {
	  color: blue;
}
aside p {
	  color: darkgreen;
}
#logo {
  	  width: 9em;
}
h1 {
	  font-size: 1.3em;
	  margin-left: 5px;
	  margin-right: 10px
 }
.contenedor_grid { 
	  display: grid;
	  grid-template-columns: 1fr 1fr 1fr 1fr;
	  grid-template-rows: 20% 70% 20%;
}
header {
	  grid-row: 1 / 2;
	  grid-column: 1 / 2;
}
h1 {
	  grid-row: 1 / 2;
	  grid-column: 2 / 3;
}
nav {
	  grid-row: 1 / 2;
	  grid-column: 3 / 5;
}
main {
	  grid-row: 2 / 3;
	  grid-column: 1 / 4 ;
	  }
aside {
	  grid-row: 2 / 3;
	  grid-column: 4 /4 ;
	  }
footer {
	  grid-row: 3 / 4;
	  grid-column: 1 / 5 ;
 	  display: grid;
	  grid-template-columns: 1fr 1fr;
}
footer p:nth-child(2) {
	   justify-self: end;
}

Esta solución la puedes ver aquí: indice_grid2.html, también puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

Enero-2019 (V 2.2)

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies