Foros del Web - Ver Mensaje Individual - diseño con cabecera, tres columnas y pie.

Mikmoro · #2 (**permalink**) 04/02/2007, 06:14

Sí, yo creo que hay maneras más sencillas. Esta es una de ellas:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Layout 13</title>
  <meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1">
  <meta name="generator" content="HAPedit 3.1">
  <style type="text/css">
html, body { margin: 0pt;
padding: 0pt;
}
body { font-family: arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 76%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
}
p { margin: 0pt 10px 10px;
}
a { padding: 10px;
display: block;
color: rgb(0, 0, 102);
}
div#header { position: relative;
}
div#header h1 { margin: 0pt;
background: rgb(238, 238, 238) none repeat scroll 0% 50%;
height: 80px;
line-height: 80px;
padding-left: 10px;
color: rgb(121, 179, 11);
}
div#header a { position: absolute;
right: 0pt;
top: 23px;
}
div#content p { line-height: 1.4;
}
div#footer { background: rgb(51, 51, 51);
color: rgb(255, 255, 255);
}
div#footer p { margin: 0pt;
padding: 5px 10px;
}
div#footer a { padding: 0pt;
display: inline;
color: rgb(198, 213, 253);
}
div#wrapper { float: left;
width: 100%;
}
div#content { margin: 0pt 200px;
}
div#navigation { position: absolute;
left: 0pt;
width: 200px;
background: rgb(185, 202, 255);
}
div#extra { width: 200px;
float: right;
background: rgb(255, 133, 57);
}
div#footer { clear: left;
width: 100%;
}
  </style>
  <script type="text/javascript" src="filler.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<a href="http://blog.html.it/layoutgala/layout13.zip">download
this layout</a></div>
<div id="extra">
<p><strong>3) More stuff here.</strong> very text
make long column make filler fill make column column silly filler text
silly column fill silly fill column text filler make text silly filler
make filler very silly make text very very text make long filler very
make column make silly column fill silly column long make silly filler
column filler silly long long column fill silly column very </p>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long
fill filler very fill column column silly filler very filler fill fill
filler text fill very silly fill text filler silly silly filler fill
very make fill column text column very very column fill fill very silly
column silly silly fill fill long filler </p>
</div>
<div id="content">
<p><strong>1) Content here.</strong> column long long
column very long fill fill fill long text text column text silly very
make long very fill silly make make long make text fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make
silly silly column filler fill fill very filler text fill filler column
make fill make text very make make very fill fill long make very filler
column very long very filler silly very make filler silly make make
column column </p>
<p>fill long make long text very make long fill column make text
very silly column filler silly text fill text filler filler filler make
make make make text filler fill column filler make silly make text text
fill make very filler column very </p>
<p>column text long column make silly long text filler silly very
very very long filler fill very fill silly very make make filler text
filler text make silly text text long fill fill make text fill long
text very silly long long filler filler fill silly long make column
make silly long column long make very </p>
</div>
<div id="footer">
<p>The footer. You can go to the <a
 href="http://blog.html.it/layoutgala/">index page</a>.</p>
</div>
</div>
<script type="text/javascript">AddFillerLink("content","navigation","extra")</script>
</body>
</html>

No es necesario poner la columna de la izquierda en posición absoluta, pero lo hago para que no se colapse al reducir la ventana, aunque a decir verdad, no creo que se vaya a reducir tanto como para que el texto central se reduzca a "nada".

Mikel.