Hola!
Dentro de capa contenido he hecho dos capas contenidouno y contenido dos. Segun la idea en la primera tiene que estar el menu lateral y en la segunda el contenido mismo.El tamaño vertical de las capas no coinsiden. La capa del menu se termina donde se termina el texto de menu y como es cortito, la capa del menu es mas corta.
Si pongo una definicion de altura como: height:100%, no me ayuda, porque en firefox la pagina se desforma. Por si a caso el codigo html es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Tao Center Centro de Terapias Naturales en Estepona, Marbella, Malaga</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]</a></div>
<div id="publicidad">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab…"
WIDTH=500 HEIGHT=285>
<PARAM NAME=movie VALUE="objetos/presentacion3.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=opaque>
<PARAM NAME=scale VALUE=noscale>
<EMBED src="objetos/presentacion3.swf" menu=false quality=high wmode=opaque
scale=noscale WIDTH=500 HEIGHT=285 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Vers…">
</EMBED>
</OBJECT>
</div>
</div>
<div id="navegacion">
<div id="navegacionuno">Home</div>
<div id="navegaciondos"> Shiatsu</div>
<div id="navegaciontres"> Yoga</div>
<div id="navegacioncuatro"> Cuencos tibetanos</div>
<div id="navegacioncinco"> Otras actividades</div>
<div id="navegacionseis"> Foro</div>
</div>
<div id="vasio">
<ul> Ðóññêèé English Deutsch
</div>
<div id="contenido">
<div id="contenidouno"><h1>Título de Sección 1</h1>
<ul> Enlace 1 Enlace 2 Enlace 3 Enlace 4 Enlace 5
</div>
<div id="contenidodos">
<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>
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>
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>
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>
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>
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>
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>
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>
</div>
</div>
<div id="pie">
<div id="pieuno"> Contacto</div>
<div id="piedos"> Programa de actividades</div>
<div id="pietres"> Álbum de fotos</div>
<div id="piecuatro"> Nosotros</div>
</div>
</div>
</body>
</html>
El codigo de css es:
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify; font-family: verdana; font-size: 0.8em}
h1 {font-size: 1.2em; color:#191970 ; font-weight: bold ; text-decoration: none ;
text-align: center}
h2 {font-size: 1.1em; color:#191970 ; text-decoration: none ;
text-align: center}
h3 {font-size: 1.8em; color:#000000 ; text-decoration: none ;
text-align: left; margin: 20px 8px 0px 20px; font-family: mistral}
body {text-align: center; background-color:#D8BFD8 }
#global {width:900px ; margin:4px auto }
#cabecera {background-color: #FFFFFF;height:285px }
#logotipo {width:350px ; height:285px; float:left; background-color: #FFFFFF }
#publicidad {width:550px ;height:285px; float: right; background-color: #FFFFFF }
#navegacion {background-color: #FFFFFF ; height:30px}
#navegacion li {float:center;list-style:none; margin: 5px 10px 0px 0px }
#navegacionuno {background-color: #9400D3;float:left ; width:150px; height:30px }
#navegaciondos {background-color: #9400D3;float:left ; width:150px;height:30px }
#navegaciontres {background-color: #9400D3;float:left ; width:150px;height:30px }
#navegacioncuatro {background-color:#9400D3;float:left ; width:150px;height:30px }
#navegacioncinco {background-color: #9400D3;float:left ; width:150px;height:30px }
#navegacionseis {background-color:#9400D3;float:left ; width:150px;height:30px }
#vasio {background-color: #FFFFFF; height:25px}
#vasio li {float:right ;list-style:none ; margin: 0px 25px 0px 25px }
#vasio ul { margin-left: 60px }
#contenido {background-color:#FFFFFF }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#contenidouno {float:left;width:250px;background-color: #ADFF2F;text-align:left }
#contenidodos{float:left;width:650px; background-color: #C71585 }
#contenidouno li {list-style:none;text-decoration:none; font-weight: bold; margin: 4px 8px 4px 16px }
#contenidouno h1 {text-decoration: none ; font-size:18px; padding-top:1px }
#pie {background-color: #9370DB; height: 30px }
#pie li {float:center;list-style:none; margin: 4px 12px 0px 0px}
#pie ul {margin-left: 45px}
#pieuno {background-color: #9370DB;float:left ; width:225px; height:30px }
#piedos {background-color: #9370DB;float:left ; width:225px; height:30px }
#pietres {background-color: #9370DB;float:left ; width:225px; height:30px }
#piecuatro {background-color: #9370DB;float:left ; width:225px; height:30px }
a {color: #8B0000;font-family:verdana;font-size:0.8em;text-decoration:none; }
a:link {}
a:visited {}
a:hover {color:#9400D3 ; text-decoration:none; }
a:active {}
#navegacion a {color:#FFFFFF;font-family:verdana;font-size:0.8em;text-decoration:none;}
#navegacion a:link {}
#navegacion a:visited {}
#navegacion a:hover {color:#FFFF00; }
#navegacion a:active {}
#vasio a {color:#191970 ; font-family:verdana; font-size: 0.7em; text-decoration:none}
#vasio a:link {}
#vasio a:visited {}
#vasio a:hover {color:#8B0000 }
#vasio a:active {}
#pie a {color:#000000;font-family:verdana;font-size:0.7em;text-decoration:none }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:#FFFFFF; text-decoration:none }
#pie a:active {}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: #FFFFFF }
#logotipo a:active {}
Agradeseria mucho por la ayuda. Gslcenter
Dentro de capa contenido he hecho dos capas contenidouno y contenido dos. Segun la idea en la primera tiene que estar el menu lateral y en la segunda el contenido mismo.El tamaño vertical de las capas no coinsiden. La capa del menu se termina donde se termina el texto de menu y como es cortito, la capa del menu es mas corta.
Si pongo una definicion de altura como: height:100%, no me ayuda, porque en firefox la pagina se desforma. Por si a caso el codigo html es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Tao Center Centro de Terapias Naturales en Estepona, Marbella, Malaga</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]</a></div>
<div id="publicidad">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab…"
WIDTH=500 HEIGHT=285>
<PARAM NAME=movie VALUE="objetos/presentacion3.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=opaque>
<PARAM NAME=scale VALUE=noscale>
<EMBED src="objetos/presentacion3.swf" menu=false quality=high wmode=opaque
scale=noscale WIDTH=500 HEIGHT=285 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Vers…">
</EMBED>
</OBJECT>
</div>
</div>
<div id="navegacion">
<div id="navegacionuno">
<div id="navegaciondos">
<div id="navegaciontres">
<div id="navegacioncuatro">
<div id="navegacioncinco">
<div id="navegacionseis">
</div>
<div id="vasio">
<ul>
</div>
<div id="contenido">
<div id="contenidouno"><h1>Título de Sección 1</h1>
<ul>
</div>
<div id="contenidodos">
<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>
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>
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>
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>
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>
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>
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>
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>
</div>
</div>
<div id="pie">
<div id="pieuno">
<div id="piedos">
<div id="pietres">
<div id="piecuatro">
</div>
</div>
</body>
</html>
El codigo de css es:
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify; font-family: verdana; font-size: 0.8em}
h1 {font-size: 1.2em; color:#191970 ; font-weight: bold ; text-decoration: none ;
text-align: center}
h2 {font-size: 1.1em; color:#191970 ; text-decoration: none ;
text-align: center}
h3 {font-size: 1.8em; color:#000000 ; text-decoration: none ;
text-align: left; margin: 20px 8px 0px 20px; font-family: mistral}
body {text-align: center; background-color:#D8BFD8 }
#global {width:900px ; margin:4px auto }
#cabecera {background-color: #FFFFFF;height:285px }
#logotipo {width:350px ; height:285px; float:left; background-color: #FFFFFF }
#publicidad {width:550px ;height:285px; float: right; background-color: #FFFFFF }
#navegacion {background-color: #FFFFFF ; height:30px}
#navegacion li {float:center;list-style:none; margin: 5px 10px 0px 0px }
#navegacionuno {background-color: #9400D3;float:left ; width:150px; height:30px }
#navegaciondos {background-color: #9400D3;float:left ; width:150px;height:30px }
#navegaciontres {background-color: #9400D3;float:left ; width:150px;height:30px }
#navegacioncuatro {background-color:#9400D3;float:left ; width:150px;height:30px }
#navegacioncinco {background-color: #9400D3;float:left ; width:150px;height:30px }
#navegacionseis {background-color:#9400D3;float:left ; width:150px;height:30px }
#vasio {background-color: #FFFFFF; height:25px}
#vasio li {float:right ;list-style:none ; margin: 0px 25px 0px 25px }
#vasio ul { margin-left: 60px }
#contenido {background-color:#FFFFFF }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#contenidouno {float:left;width:250px;background-color: #ADFF2F;text-align:left }
#contenidodos{float:left;width:650px; background-color: #C71585 }
#contenidouno li {list-style:none;text-decoration:none; font-weight: bold; margin: 4px 8px 4px 16px }
#contenidouno h1 {text-decoration: none ; font-size:18px; padding-top:1px }
#pie {background-color: #9370DB; height: 30px }
#pie li {float:center;list-style:none; margin: 4px 12px 0px 0px}
#pie ul {margin-left: 45px}
#pieuno {background-color: #9370DB;float:left ; width:225px; height:30px }
#piedos {background-color: #9370DB;float:left ; width:225px; height:30px }
#pietres {background-color: #9370DB;float:left ; width:225px; height:30px }
#piecuatro {background-color: #9370DB;float:left ; width:225px; height:30px }
a {color: #8B0000;font-family:verdana;font-size:0.8em;text-decoration:none; }
a:link {}
a:visited {}
a:hover {color:#9400D3 ; text-decoration:none; }
a:active {}
#navegacion a {color:#FFFFFF;font-family:verdana;font-size:0.8em;text-decoration:none;}
#navegacion a:link {}
#navegacion a:visited {}
#navegacion a:hover {color:#FFFF00; }
#navegacion a:active {}
#vasio a {color:#191970 ; font-family:verdana; font-size: 0.7em; text-decoration:none}
#vasio a:link {}
#vasio a:visited {}
#vasio a:hover {color:#8B0000 }
#vasio a:active {}
#pie a {color:#000000;font-family:verdana;font-size:0.7em;text-decoration:none }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:#FFFFFF; text-decoration:none }
#pie a:active {}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: #FFFFFF }
#logotipo a:active {}
Agradeseria mucho por la ayuda. Gslcenter