Plantillas: ancho fijo y dos columnas

14 noviembre 2005 ~ Software

Hay un montón de webs con plantillas XHTML+CSS. Yo voy a colgar aquí las mias. Cuando tenga varias las reuniré en una sección. Ojo que no digo que sean las mejores plantillas del mundo, simplemente son mis plantillas: no se admiten reclamaciones, pero sí sugerencias para mejorarlas. Me estreno con una página de ancho fijo y dos columnas.

Cada maestrillo tiene su librillo.

Todas las plantillas que cuelgue aquí seguirán ciertas convenciones en los nombre de los estilo e IDs.

PPAL: div principal. Contiene todo, o casi todo.

CENTRAL: no tiene por qué estar en el centro, pero si hay más de una columna, esta es la más importante/ancha.

LATERAL: menos importante que CENTRAL. Suele ser una columna lateral.

contenido: cada columna CENTRAL o LATERAL albergua un div "contenido" donde realmente alojamos el contenido de ese bloque. Así podemos hacer combinaciones de anchos (definidos en CENTRAL y LATERAL, por ejemplo) con padding (Definidos en "contenido") sin declararlas en el mismo div, de modo que explorer no sumará el padding al ancho y no tenemos que hacer hacks raritos.

Ancho fijo y dos columnas

Esta plantilla pinta una página de ancho fijo (760px) y dos columnas, con una cabecera y pie de página.

Ver página la plantilla es feísima porque busca que de un vistazo se vean los divs usados. Pongo aquí un par de ejemplos de webs de amiguetes que han montado páginas partiendo de esta plantilla: un ejemplo, y otro ejemplo. Como se ve, con una buen sesión de tunning CSS podemos montar cualquier cosa partiendo de esta estructura.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PLANTILLA DOS COLUMNAS ANCHO FIJO 760px tocomocho.net</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/css.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
</head>
<body>
<div class="contenedor">
	<div id="CABECERA">
<a href="http://www.tocomocho.net" id="logo"><img src="images/tocomocho.gif
" alt="logotipo"/></a>
	  <ul>
		  <li><a href="#">secci&oacute;n</a></li>
		  <li><a href="#">secci&oacute;n</a></li>
		  <li><a href="#">secci&oacute;n</a></li>
	  </ul>
  </div><!--/cabecera-->
	<div id="PPAL">
		<div id="CENTRAL">
		<div class="contenido">
		<h1>Titular</h1>
		<p>Esta plantilla tiene un ancho fijo de 760px para verse sin scroll horizontal a resoluciones de 800x600. </p>
		<h2>Titular</h2>
		<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica.</p>
		<h3>Titular</h3>
		<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica.</p>
		</div><!--/contenido-->
		</div><!--/central-->
		<div id="LATERAL">
		<div class="contenido">
		<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica.</p>
		</div><!--/contenido-->
		</div><!--/lateral-->
	<br class="vacio" />
	</div><!--/ppal-->
	<div id="PIE">pie
	<p>Lorem ipsum</p>
	</div><!--/pie-->
</div><!--/contenedor-->
</body>
</html>

CSS


body {
text-align:center; 
font:normal 0.7em Tahoma, Arial, Helvetica, sans-serif; background-color:#CCCCCC;
}

td, th { font:normal 0.7em Tahoma, Arial, Helvetica, sans-serif;}

img {border:none;}

.contenedor {margin:0 auto; width:760px; text-align:left; background-color:#FFFFFF;}

.vacio {clear:both; line-height:0;}

#CABECERA {padding:10px; background-color:#99FF66;}

#PPAL {padding:5px; background-color:#99CCCC;}

#CENTRAL {float:left; width:550px; background-color:#663399;}

#LATERAL {float:left; width:200px; background-color:#6699CC;}

#PIE {clear:both; text-align:center;}

.contenido {margin:5px; padding:5px; border:1px solid #ffcc00;}

#logo {float:left;}

#CABECERA ul {float:right;margin:0; padding:0; list-style-type:none;}

#CABECERA li {float:left; margin:0; padding:0;}

#CABECERA li a {display:block; padding:5px; background-color:#99FF33;}

#CABECERA li a:hover {background-color:#999966; color:#990000;}

#LATERAL .contenido {color:#FF0000;}

#CENTRAL .contenido {padding:30px;color:#FFCC00;}

villaykorte ~ 24 febrero 06

Yo estoy intentando hacer una plantilla de tres columnas para blogger en la que la del centro tenga ancho variable. He tenido más problemas para conseguir el hack para que funcione con Explorer que con la plantilla en sí. QuintoMilenio.blogspot.com parece que se adpata bien al cambiar la resolución o el tamaño de la ventana. Todavía no he empezado a decorarla porque no consigo resolver algo que lo más seguro sea una tontería. Cuando defino el maxwidth de la página (para que no se extienda demasiado la columna central) soy incapaz de centrar el contenido.
Estoy empezando en esto del css, cualquier idea sería bienvenida, gracias.

Jorge ~ 5 marzo 06

En http://blog.html.it/layoutgala/LayoutGala13.html tienes una plantilla de tres columnas y ancho variable. Y en ese site tienes, además, otras muchas.