Crear varias columnas de texto
Profesor: Javier López
Volver
Propuesta de la actividad
Creación de varias columnas de texto
Resultado final

Creación de varias columnas de texto
Para tratar la creación de columnas de texto vamos a empezar un fichero html nuevo, que se va a llamar 'servicios.html', y que vamos a crear a partir de la base de 'index.html' (se mantiene el <header>, el <nav> y el <footer>).
<!doctype html>
<html>

  <head>
	<meta charset="utf-8"/>
	<title>Servicios</title>
	<link rel=stylesheet href="css/estilos.css" type="text/css"/>
	<style type="text/css">
	</style>
  </head>

  <body>
     <div id="franja"></div>
     <header>
 	<img src="img/logo.png" align="center">
 	 Aprende jugando, S.L.
     </header>

     <nav>
        <ul>
          <li><img src="img/icono1.png" align="top"><p>
              <a href="index.html">Quiénes somos</a></li>
          <li><img src="img/icono2.png" align="top"><p>
              Servicios</li>              
          <li><img src="img/icono3.png" align="top"><p>
              <a href="contacto.html">Contacto</a></li>
        </ul>
     </nav>

   <section id="contenido2">
 	 <div id="titulo">
 	      <h2>Servicios</h2>
                  Estas son nuestras ramas de actuación principales:
 	 </div>

   <!-- Contenido -->

   </section>

   <div id="franja_final"></div>
   <footer>
 	       &copy;2015. Aprende jugando, S.L.<br>
 	       c/ del Álamo rojo, 1, local. Barcelona.
   </footer>
 </body>
</html>

El texto resaltado en rojo es aquel que cambia respecto al código html de 'index.html'.


Modificamos el <title> de la página.









En el caso del primer elemento (Quiénes somos), como antes no era enlace y ahora sí, le añadimos la etiqueta <a href="index.html"> al principio de Quiénes somos y </a> al final.

En el caso del segundo elemento (Servicios) pasa lo contrario, en 'index.html' era un enlace, pero ahora no lo tiene que ser, por lo que eliminamos la etiqueta <a href="servicios.html"> que había al principio de Servicios y el </a> que había al final en la versión anterior.

En este caso hemos cambiado el nombre del <section> que contiene todo el contenido ya que necesitaremos cambiarle la anchura.
Modificamos el título que hay justo antes del contenido de la página por (Servicios), y añadimos una frase como explicación del contenido.

En el siguiente punto sustituiremos <!-- Contenido --> por todo el código de la página.



El siguiente código sustituye (o va detrás de) <!-- Contenido --> del código anterior.

<div id="presentacion">
  Centramos nuestros servicios profesionales en la
  creación de contenidos multimedia e interactivos
  para cualquier plataforma o tecnología moderna
  conocida (ordenadores, portátiles, tablets, móviles
  y otros nuevos dispositivos "la nueva gama de
  frigórificos, lavadoras, televisores o cafeteras a
  pedales conectados a Internet". Así, la
  compatibilidad de estos contenidos se hace posible
  gracias a la utilización de <b>HTML5</b>, <b>CSS3
  </b> y sobre todo <b>JavaScript</b> a través de la
  biblioteca <b>jQuery</b>, que facilita enormemente
  la creación de código al hacer parte del trabajo.
</div>

Todo el contenido que ise mostrará en varias columnas lo escribimos dentro de un <div> con un id="presentacion".

Dentro del texto se han colocado algunos <b>...</b> para resaltar en negrita algunas palabras interesantes.


Es importante remarcar que realmente quien coloca el texto anterior en varias columnas y define la separación que habrá entre ambas, así como el estilo de la línea de separación es CSS3, que es lo que vamos a tratar a continuación:
estilos.css
#presentacion{
   margin:25px 0;

   column-count:3;
   column-gap:30px;
   column-rule:2px dotted silver;

   -webkit- column-count:3;
   -webkit- column-gap:30px;
   -webkit- column-rule:2px dotted silver;

   -moz- column-count:3;
   -moz- column-gap:30px;
   -moz- column-rule:2px dotted silver;

   -o- column-count:3;
   -o- column-gap:30px;
   -o- column-rule:2px dotted silver;

   -ms- column-count:3;
   -ms- column-gap:30px;
   -ms- column-rule:2px dotted silver;
}


presentacion es la caja (o div) que agrupa a todo el texto que irá en columnas.
Primero definimos un margen (margin) superior e inferior de 25px y derecha e izquierda de 0 píxeles.

Con column-count definimos el número de columnas que queremos.
Con column-gap definimos la separación (en píxeles) entre las diferentes columnas.
Con column-rule definimos el grosor, el tipo de línea y el color (en este orden) de la línea vertical que separará las diferentes columnas.


Como estas etiquetas todavía no están implementadas en todos los navegadores hay que utilizar los diferentes prefijos para hacerlo compatible con:
En el siguiente tema vamos a .