Trucos de maquetación con CSS

Versión para impresión
La magia de las hojas de estilo

Tablas

Las tablas no se deben maquetar con atributos de HTML, sino mediante CSS.

Insertaremos la tabla sin ningún atributo HTML, y luego, mediante algunas propiedades, iremos dando formanto a la tabla y a las celdas.

Empezaremos quitando el cellspacing de la celda. Para ellos tenemos las siguiente propiedades que afectan a la tabla:

border-collapse
Con esta propiedad podemos quitar la separación de celdas que viene en las tablas por defecto. Admite los valores collapse, separate e inherit. Evitaremos así el doble borde que dibujan entre ellas dos celdas juntas.
border-spacing
Especifica el espaciado de celdas. Sólo tiene sentido si la propiedad anterior tiene el valor de separate. Aunque el valor sea cero no se quita el efecto de borde doble.

Para poner los bordes a las tablas hay que hacerlo poniendo bordes a las celdas. El borde doble lo se queda enmascarado al utilizar la propiedad border-collapse:collapse

Para los bordes utilizaríamos las propiedades:

border-style
Es el estilo del borde; alguno de sus valores son solid, dotted o dashed.
border-width
El ancho del borde, normalmente en píxeles.
border-color
El color del borde, en hexadecimal.

También hay propiedades para cada lateral, como por ejemplo border-rigth-style, border-right-width, o border-right-color.

Ejemplo de tabla maquetada con estilos:

lunes martes miércoles jueves viernes
patatas alcachofas judías lentejas garbanzos

Hoja de estilo:

table {
width:100%;
border: 1px solid #dfdfdf;
border-collapse: collapse;
}
table th, table td {
border: 1px solid #dfdfdf; padding: 5px;
}
table th {
border-color:#fff;
color: #fff;
background-color:028BB2;
text-align: center;
vertical-align: middle; }

Enlaces de texto como imágenes

En ocasiones nos gustaría que un texto que sirve como enlace tuviera la apariencia de una imagen. A veces no existe la posibilidad de reemplazar este texto por una imagen, por ejemplo en un gestor de contenidos. Esta artimaña se utiliza bastante para el logo de los sitios web: si quitamos la hoja de estilo veremos que en realidad, como contenido, hay un texto.

Podemos entonces de alguna forma ocultar el texto y mediante una hoja de estilos darle la apariencia que queremos.

Para ello hacemos que el enlace se comporte como un bloque con la propiedad display:block, y le damos el tamaño de la imagen. Después al texto le damos una sangría negativa descomunal con la propiedad context-indent, para que no aparezca encima de la imagen.

Ejemplo:

.enlaceLogo{
background-image: url(../imagen/logo.gif);
display: block;
height: 90px;
width: 108px;
text-indent: -9999999px; }

Menús verticales y horizontales

Los menús y botoneras se hacen a partir de listas. Por ejemplo:

Los menús desplegables se hacen con listas anidadas (y mediante JavaScript se hace que se desplieguen):

Hay que tener claro que el botón realmente es la etiqueta <a>, ya que es la que realiza la intereacción.

Geralmente la lista se mete dentro de un <div> (o de una etiqueta <nav> en HTML5).

Debemos realizar estilos para cada una de las etiquetas de la lista:

  • ul: se suele quitar la viñeta y los márgenes y padding;
  • li: en menús horizontales, se utiliza la propiedad display:inline o float;
  • a: si el menú tiene aspecto de botón se utiliza la propiedad display:block. Se utiliza además paddingwidth para el ancho, y line-heigth para el alto del botón.
  • a:hover: para establecer el estado de roll-over del botón.

Podemos encontrar montones de menús maquetados con CSS en Listamatic.

Menús verticales

Ejemplo:
http://css.maxdesign.com.au/listamatic/vertical08.htm

Menús horizontales simples

Para que los ítem se pongan en línea, basta con utilizar la propiedad display:inline.

Ejemplo:
http://css.maxdesign.com.au/listamatic/horizontal01.htm 

Menús horizontales de ancho adaptable

Para dar cierta anchura al botón utilizamos padding. La altura se la podemos dar también con padding o con line-height.

Ejemplo:
http://css.maxdesign.com.au/listamatic/horizontal02.htm 

Menús horizontales de ancho fijo

Sólo podemos establecer un ancho fijo a un enlace con la propiedad width, y sólo funciona si el enlace se comporta como bloque, pero para que se ponga en línea utilizamos la propiedad display:inline-block. Aun así, para que el enlace se ponga en línea también hemos de utilizar display:inline en el elemento li de la lista.

Ejemplo:

<ul class="botonera120px">
<li><a href="#">Inicio</a></li>
<li><a href="#">Quiénes somos</a></li>
<li><a href="#">Contacto</a></li>
</ul>

CSS:

.botonera120px{ margin: 0px; padding: 0px; list-style-type: none; }
.botonera120px li { display: inline; }
.botonera120px li a {
text-decoration: none;
color: #FFF;
background-color: #31A3B1;
display: inline-block;
width: 120px;
font-size: 12px;
text-align: center;
line-height: 18px;
}
.botonera120px li a:hover { background-color: #1E2D3B; }

Maquetación de newsletter o mails

Parámetros a tener en cuenta a la hora de maquetar una newsletter.

  • Los gestores de correo no reconocen la etiqueta <div>. Por esta limitación de los gestores de correo, en la maquetación se utilizan tablas en lugar de div, y también atributos HTML ( align, cellpadding, cellspacing, border, etc.). A veces hay que anidar tablas (meter tablas dentro de tablas).
  • No podemos adjuntar hojas de estilo. Las hojas de estilo se declaran con el atributo style de HTML, dentro de las etiquetas.
  • Las imágenes que se maqueten aparecerían como archivos adjuntos en los gestores de correo, y tampoco las podríamos alojar en carpetas, ya que estas no se pueden enviar. Por esta razón, hay que subir todas las imágenes a un servidor, e insertarlas en el HTML con url absolutas.
  • Los gestores de correo quitan espacio lateral al navegador, por lo que se recomienda hacer las newsletter de alrededor de 600 píxeles de ancho o menos.
  • Algunas herramientas como Photshop, Illustrator o Fireworks, permiten hacer sectores en los diseños y preparar las tablas con las imágenes necesarias.

Categorías: 
Etiquetas: