Índice

La cabecera

1. La vista

En la cabecera (<header>) situaremos dos cajas con los títulos (<div id="título">) y el cuadro de buscar (<div id="buscar">), respectivamente.

2. Los estilos CSS

Estas dos celdas tienen un ancho idéntico de 480 píxeles.

images/OW04-06.png

Crearemos una clase llamada .en2columnas para que pueda usarse en otros diseños si lo necesitamos. Usaremos la propiedad display para una vista como celda de tabla, aplicaremos un ancho de 480 píxeles y solicitaremos una alineación vertical en el centro.

En la carpeta css, en el archivo template.css, introduzca esta regla:

/* Las celdas para #título y #buscar */  
.en2columnas {  
  display: table-cell;  
  vertical-align: middle;  
  width: 480px;  
}

Para la caja <div id="buscar">, aplicaremos una alineación a la derecha:

#buscar {  
  text-align: right;  
} 

En el archivo index.php, aplique la clase .en2columnas a las cajas <div  id="título"> y <div id="buscar">.

<div id="título" class="en2columnas">  
  ...  
</div>  
<div id="buscar" class="en2columnas">  
  <jdoc:include type="modules" name="buscar" style="none" />  
</div>

3. El contenido

La primera celda, <div id="título">, contendrá ...