Hola, he creado una página web, y hay una capa(la capa "lema") que debe de estar metida dentro de la capa "cabezera". Sin embargo, a la hora de publicarlo en internet, esa capa se corre hacia bajo, metiendose en la capa "contenido" (más abajo os copio la plantilla y las hojas de estilo).
La idea es que en la capa "cabezera" tenga un logo y un lema. El "logo", efectivamente se queda en la cabezera, pero el lema se corre hacia abajo. Uso el navegador Mozilla. Agradeceria la ayuda que puedierais ofrecerme. Saludos y enhorabuena por la página. Un auténtico logro que yo haya consegudo aprender lo que he aprendido.
La página como ha quedado la podeis ver aquí:
http://curiosidades.scienceontheweb.net
Como podeis observar, el lema es lo que dce "La realidad supera la ficción". Eso deberia de ir en la zona azul de arriba, porque si lo dejo donde está, podeis observar pinchando en un artículo de los que hay en el menú, que en el título de cada artículo, al existir esa capa, el texto se deforma.
Aqui va la plantilla.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Curiosidades</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global"> <!-- la capa global engloba todo el contenido.
lo he hecho para en la hoja estilo-general.css
colocar el ancho de toda la pagina web -->
<div id="curva-superior"></div>
<div id="cabezera">
<div id="logotipo"></div>
[contenido no disponible]
<div id="lema">La realidad supera la ficción</div>
</div>
<div id="contenido">
<div id="menu">
<ul>
<h3>Curiosidades</h3>
Experimentos científicos.
Potenciar el cerebro.
Mapa de apellidos.
Ojo de mosca.
</div>
<h1>Bienvenidos a mi pagina web.</h1>
Esta página ha sido creada por Vicent Rico con el fin de hacer
prácticas con la edición de páginas webs. Asimismo, la página puede
ser interesante, puesto que contiene listas de curiosidades, nada
aburridas. A que esperas. Adéntrate en el mundo de la ciencia
(o no). En el menú de la izquierda tienes el listado de artículos
que puedes encontrar en esta página. No hay muchos, pues como os
he dicho, esto simplemente es una forma de aprender a crear una
página web. Aún así, está pensada para que la disfrutes.</p>
Cualquier sugerencia para la página web, agradeceráa que me la
comunicarais, pues aunque mi intención no es tener una página web
en condiciones, me servirá para intentar hacer aquella sugerencia
que propongais, y por lo tanto aprender.</p>
</div>
<div id="pie"></div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
____________________
Aquí la hoja de estilos:
*{margin:0px ; padding:0px ; border:0px}
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}
#cabezera {background-color:#ADD8E6 ;height:65px ;
text-align:left ; border-right:black 1px solid ; border-left:black 1px solid}
#logotipo {float:left ; text-align:left ; height:65px ; width:270px}
#lema {float:right ; width:530px ; font-family:Papyrus,Century Gothic,Verdana ;
text-align:right ; padding-right:5px ; color:#00008B ; font-style:italic}
#contenido {background-color:#EEE9E9 ; border:black 1px solid}
#contenido p {padding: 2px 8px 2px 15px ; text-indent:20px}
#contenido li {list-style:none ; font-family:Papyrus,Century Gothic,Verdana}
#menu {background-color:white ; width:150px ; float:left ;
text-align:left ; background-image: url(objetos/menu-parte-inferior.gif) ;
background-position:bottom ; background-repeat:no-repeat}
#menu h3 {background-image:url(objetos/menu-parte-superior.gif)}
#menu li {list-style:none ; padding: 2px 2px 2px 4px ; font-size:14px}
#pie {background-color:#CDC9C9 ; height: 30px ; border-left:black 1px solid;
border-right:black 1px solid}
#curva-inferior {background-image: url(objetos/curva-inferior.gif) ;
background-repeat:no-repeat ; width:800px ; height:12px ; overflow:hidden}
a {color:#8B8970 ; text-decoration:none}
a:link {}
a:visited {}
a:hover {color:black ; text-decoration:underline ; background-color:white}
a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {text-decoration:none ; background-color:white}
#logotipo a:active {}
p {text-align:justify ; font-family:Papyrus,Century Gothic,Verdana}
h1 {font-family:Papyrus,Century Gothic,Verdana}
___________
La idea es que en la capa "cabezera" tenga un logo y un lema. El "logo", efectivamente se queda en la cabezera, pero el lema se corre hacia abajo. Uso el navegador Mozilla. Agradeceria la ayuda que puedierais ofrecerme. Saludos y enhorabuena por la página. Un auténtico logro que yo haya consegudo aprender lo que he aprendido.
La página como ha quedado la podeis ver aquí:
http://curiosidades.scienceontheweb.net
Como podeis observar, el lema es lo que dce "La realidad supera la ficción". Eso deberia de ir en la zona azul de arriba, porque si lo dejo donde está, podeis observar pinchando en un artículo de los que hay en el menú, que en el título de cada artículo, al existir esa capa, el texto se deforma.
Aqui va la plantilla.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Curiosidades</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global"> <!-- la capa global engloba todo el contenido.
lo he hecho para en la hoja estilo-general.css
colocar el ancho de toda la pagina web -->
<div id="curva-superior"></div>
<div id="cabezera">
<div id="logotipo"></div>
[contenido no disponible]
<div id="lema">La realidad supera la ficción</div>
</div>
<div id="contenido">
<div id="menu">
<ul>
<h3>Curiosidades</h3>
</div>
<h1>Bienvenidos a mi pagina web.</h1>
Esta página ha sido creada por Vicent Rico con el fin de hacer
prácticas con la edición de páginas webs. Asimismo, la página puede
ser interesante, puesto que contiene listas de curiosidades, nada
aburridas. A que esperas. Adéntrate en el mundo de la ciencia
(o no). En el menú de la izquierda tienes el listado de artículos
que puedes encontrar en esta página. No hay muchos, pues como os
he dicho, esto simplemente es una forma de aprender a crear una
página web. Aún así, está pensada para que la disfrutes.</p>
Cualquier sugerencia para la página web, agradeceráa que me la
comunicarais, pues aunque mi intención no es tener una página web
en condiciones, me servirá para intentar hacer aquella sugerencia
que propongais, y por lo tanto aprender.</p>
</div>
<div id="pie"></div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
____________________
Aquí la hoja de estilos:
*{margin:0px ; padding:0px ; border:0px}
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}
#cabezera {background-color:#ADD8E6 ;height:65px ;
text-align:left ; border-right:black 1px solid ; border-left:black 1px solid}
#logotipo {float:left ; text-align:left ; height:65px ; width:270px}
#lema {float:right ; width:530px ; font-family:Papyrus,Century Gothic,Verdana ;
text-align:right ; padding-right:5px ; color:#00008B ; font-style:italic}
#contenido {background-color:#EEE9E9 ; border:black 1px solid}
#contenido p {padding: 2px 8px 2px 15px ; text-indent:20px}
#contenido li {list-style:none ; font-family:Papyrus,Century Gothic,Verdana}
#menu {background-color:white ; width:150px ; float:left ;
text-align:left ; background-image: url(objetos/menu-parte-inferior.gif) ;
background-position:bottom ; background-repeat:no-repeat}
#menu h3 {background-image:url(objetos/menu-parte-superior.gif)}
#menu li {list-style:none ; padding: 2px 2px 2px 4px ; font-size:14px}
#pie {background-color:#CDC9C9 ; height: 30px ; border-left:black 1px solid;
border-right:black 1px solid}
#curva-inferior {background-image: url(objetos/curva-inferior.gif) ;
background-repeat:no-repeat ; width:800px ; height:12px ; overflow:hidden}
a {color:#8B8970 ; text-decoration:none}
a:link {}
a:visited {}
a:hover {color:black ; text-decoration:underline ; background-color:white}
a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {text-decoration:none ; background-color:white}
#logotipo a:active {}
p {text-align:justify ; font-family:Papyrus,Century Gothic,Verdana}
h1 {font-family:Papyrus,Century Gothic,Verdana}
___________