CSS - POSICION DEL CONTENIDO

Demostración de varias técnicas de posicionamiento en CSS para la composición de secciones de contenido dentro de una página.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Posición con elementos "flotantes" (float). Puede impactar cómo se visualizan los elementos cercanos
Flotar a la izquierda/derecha
Limpiar la flotación
Contener la flotación

Posición con "inline-block" y modelo de caja
Cuidar espacio vacío entre elementos que se quieren mostrar "en línea"
-- 14-css-posicionamiento.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Posición de secciones de contenido con CSS</title>
    <meta charset="UTF-8">
    <!-- En la primera hoja, incluimos estilos generales para listas y
         otros elementos sin relación con el posicionamiento -->
    <link rel="stylesheet" href="estilos-posicionamiento.css">

    <!-- Podemos colocar en comentario la inclusión de las
         distintas hojas de estilo para ilustrar los diferentes
         métodos de posicionamiento -->
<!--     <link rel="stylesheet" href="float-clear.css"> -->
<!--     <link rel="stylesheet" href="float-contain.css"> -->
<!--     <link rel="stylesheet" href="inline-block.css"> -->
  </head>
  <body>
    <header>Encabezado de página, usando la hoja: <span id="hoja"></span></header>
    <!-- Utilizamos un contenedor común para las secciones de contenido que
         queremos alinear. Salvo para la técnica de "float-contain", no es
         necesario, pero resulta útil como vemos en las hojas de estilo -->
    <div class="grupo">
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Noticias</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav><!-- IMPORTANTE: Colocamos en comentario el espacio entre
                 las secciones para evitar que, usando "inline-block",
                 se produzca una visualización de bloque por el salto
                 de línea. También podríamos escribir <article> en la
                 misma línea que cierra </nav>
   --><article>
        <h1>Título del artículo</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Duis varius consectetur lobortis. Donec gravida orci sit amet imperdiet consequat. 
          Duis eleifend tellus vitae sapien lacinia, quis posuere nisl pulvinar. 
          Quisque tristique quam at ornare aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
          Nunc sit amet velit in libero maximus dapibus. Nulla ex leo, porta id bibendum a, gravida vel sem. 
          Morbi congue nulla vel turpis egestas, at tincidunt lectus mollis.
        </p>
        <p>Pellentesque maximus metus sed purus fringilla, quis lobortis orci consectetur. Fusce convallis et elit a varius. 
          Pellentesque in odio vulputate, congue risus at, gravida massa. Mauris volutpat dui sed luctus euismod. 
          Maecenas erat arcu, fermentum eget rhoncus sed, commodo vel dui. Curabitur tincidunt iaculis libero, efficitur imperdiet elit rutrum eget. 
          Ut eu nisl sit amet nunc pretium vulputate vel quis nulla. Praesent at dolor in urna sodales condimentum non non sem. 
          Quisque sed egestas tellus. Fusce sodales posuere diam, eget suscipit ex mattis consectetur. Mauris dapibus porttitor sodales.
        </p>
      </article><!--
   --><aside>
        <p>Autor: Homer J. Simpson</p>
        <p>Fecha: 22 Feb 2042</p>
      </aside>
    </div>
    <footer>Pie de página</footer>
  </body>
</html>


-- estilos-posicionamiento.css

/* encabezado */
header {
  font-weight: bold;
  color: #DDD;
  background-color: #aabbaa;
  min-height: 60px;
  line-height: 60px;
  padding: 20px;
}

nav ul {
  list-style: none; /* no mostrar lista con viñetas */
  font-size: 1.2em;
}

nav ul li {
  display: block;
}

nav ul li a {
  color: #575c7d;
  text-decoration: none;
  font-weight: bold;
}

nav ul li a:hover {
  background: #deff90;
  color: #485e0f;
  text-decoration: none;
}

/* pie de página */
footer {
  background-color: lightgrey;
  color: #9a9a9a;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-bottom: 0;
}


-- float-clear.css

/* Aprovechamos el contenedor de "grupo" para dar márgenes a las secciones
 * de manera más compacta
 */
.grupo > * {
  margin: 0 1.5% 24px 1.5%;
}

/* sección de enlaces de navegación */
nav {
  float: left;
  width: 10%;
}

article {
  float: left;
  width: 70%;
}

aside {
  float: left;
  width: 10%;
}

footer {
  clear: both; /* elimina el efecto de "float" dejado por las secciones anteriores */
}

/* Sólo para identificar visualmente cuál hoja CSS usamos */
#hoja:after {
  content: 'float-clear.css';
}

-- float-contain.css

/* Esta técnica es conocida también como "clearfix" */
.grupo:before,
.grupo:after {
  content: "";
  display: table;
}
.grupo:after {
  clear: both;
}
.grupo {
  clear: both;
  *zoom: 1; /* para navegadores un poco más antiguos */
}

/* El resto de la hoja de estilos es idéntico a float-clear.css,
 * salvo por clear:both en el footer, que no es necesario ya que
 * fue incluido arriba
 */

.grupo > * {
  margin: 0 1.5% 24px 1.5%;
}

/* sección de enlaces de navegación */
nav {
  float: left;
  width: 10%;
}

article {
  float: left;
  width: 70%;
}

aside {
  float: left;
  width: 10%;
}

/* Sólo para identificar visualmente cuál hoja CSS usamos */
#hoja:after {
  content: 'float-contain.css';
}

-- inline-block.css

.grupo > * {
  display: inline-block;
  margin: 0 1.5% 24px 1.5%;
  vertical-align: top;
}

/* sección de enlaces de navegación */
nav {
  width: 10%;
}

article {
  width: 70%;
}

aside {
  width: 10%;
}

/* Sólo para identificar visualmente cuál hoja CSS usamos */
#hoja:after {
  content: 'inline-block.css';
}

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.