Bien, vamos allá.
Primero tienes que tener clarito como funcionan los divs, qué hace cada uno, y los estilos que tiene cada uno definidos para comprender porqué se pone uno u otro, pero bueno, como no tengo tiempo ahora para explicartelo paso a paso simplemente te coloco los códigos, oki?
El resultado es
este.
plantilla2.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
Sección 1
Sección 2
Sección 3
Sección 4
</div>
<div id="contenido">
<div id="menu">
<ul>
<h1>Título de Sección 1</h1>Enlace 1Enlace 2<a href="#">Enlace
3</a>
</div>
<div id="textos">
<h1>Esta será la zona principal de la web</h1>
Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la
etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>
En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e
incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>
Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o
justificados. Así esto parece una poesia! je je je.</p>
</div><DIV class="paso"></DIV>
</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
estilo-general-2.css* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {WIDTH: auto ; background-color:orange ; border-left: black 1px solid ; border-right: black 1px solid }
#menu {clear:both ; FLOAT: left; background-color: yellow ; width: 150px ; text-align:left ; margin: 5px 2px 5px 5px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px }
#menu h1 {}
#textos {FLOAT: left; background-color:green ; width: 630px ; margin: 5px 5px 3px 5px}
#textos p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid ;
clear:both}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
.paso {CLEAR: both; OVERFLOW: hidden; HEIGHT: 1px}
Con esto consigues lo que quieres. Hay un cambio importante, se trata de la capa o div llamada "paso" que he señalado en rojo. Si eso no sale bien. Es un invento que descubrí en el portal de lycos pues ellos lo usaban y funciona. No me da tiempo a explicar para que sirve ni como funciona, espero hacerlo en breve, pero por el momento que sepas que está ahi por algo, oki?
Por supuesto, una vez que hagas el curso paso a paso sabrás retocar la hoja de estilos para darle la forma que quieras, colocarle más bordes, etc.
Ya nos contarás! :wink:
