En primer lugar agradeceros de nuevo vuestro esfuerzo altruista de ayudarnos a gente tan inexperta como yo a hacer algo tan complicado como una web.
Mi duda es que al cargar la plantilla en explorer se visualiza organizadamente (aunque me gustaría que las cuatro imágenes de la cabecera (tres logos y una foto) se alineasen de izquierda a derecha) y en el mozilla firefox casi todo (logos, directorios, texto) aparece mezclado y fuera del sitio en que lo había puesto; sin embargo la curva superior e inferior sí casan perfectamente con el cuerpo, algo que no ocurre en el explorer. Os pongo la plantilla y la hoja de estilos. Muchas gracias.
PLANTILLA.HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="init();">
<div id="global"
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><div id="logotipo">
<a href="plantilla.html">
[contenido no disponible]
</div></div>
<div id="publicidad">CEIP SAN AGUSTÍN (EL BURGO-MÁLAGA)</div>
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
</div>
<div id="navegacion">
<ul>
<a href="plantilla.html">INICIO
<a id="desplegable1" href="#">NUESTRO CENTRO
<a href="#">NOTICIAS
<a id="desplegable2" href="#">GALERÍA
<a href="mailto:[correo eliminado]">SUGERENCIAS
<a href="mailto:[correo eliminado]">CONTACTAR
</div>
<div id="contenido">
<div id="menu">
<h1>Secciones</h1>
<ul> Portada Nuestro centro El entornoComunidad educativa Proyectos Organigrama
</div>
<h1>Esta será la zona principal de la web</h1>
El CEIP "San Agustín" de El Burgo es nuestro centro de enseñanza infantil, primaria y primer ciclo de secundaria, del cuál nos sentimos orgullos@s y por esa razón queremos darlo a conocer en este escaparate virtual. Sed bienvenid@s y sentíos como en casa.</p>
<h2>Este es el segundo párrafo</h2>
El colegio San Agustín se encuentra en la calle Erillas, a escasos metros de la entrada del pueblo. Se construyó en los años 30 y, por su sólida estructura de dos plantas y buen mantenimiento, se conserva en un estado envidiable para ser un septuagenario. Es un colegio de una línea que alberga las etapas de Infantil, Primaria y primer ciclo de Secundaria. Tiene dos plantas, pista polideportiva y gimnasio.</p>
A partir de aquí ya veremos lo que ponemos porque a mí no se me ocurre nada más</p>
</div>
<div id="pie"><div id="pieuno">
<ul>
Foro Ejemplo Contactos Nos Enlazan
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
Directorio TopSite Mapa de la Web
</div></div>
<div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>
HOJA DE ESTILOS:
* {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; background-image: url(objetos/fondo.png) }
#global {width:800px ; margin: 4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width: auto ; height: 12px }
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:250px ; float:left }
#publicidad {background-color: pink; width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: Yellow Green ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px }
#contenido {background-color: #FFCC66 ; width: auto ; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px ; border: 1px solid black ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom }
#menu h1 {text-decoration:none ; font-size:20px; background-image: url(objetos/menu-parte-superior.gif)}
#pie {background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid ; height: 65px}
#pie li {list-style: none ; font-size: 12px}
#pieuno {float:left ; width:150px ; border-right: black 1px solid}
#piedos {float:left ; width:498px ; border-right: black 1px solid}
#pietres {float:left ; width:150px ; border-right: black 1px solid}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width: auto ; height: 12px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: brown ; text-decoration:none ; display: block }
a:hover {color:red ; text-decoration:underline ; background-color: silver}
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}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
Mi duda es que al cargar la plantilla en explorer se visualiza organizadamente (aunque me gustaría que las cuatro imágenes de la cabecera (tres logos y una foto) se alineasen de izquierda a derecha) y en el mozilla firefox casi todo (logos, directorios, texto) aparece mezclado y fuera del sitio en que lo había puesto; sin embargo la curva superior e inferior sí casan perfectamente con el cuerpo, algo que no ocurre en el explorer. Os pongo la plantilla y la hoja de estilos. Muchas gracias.
PLANTILLA.HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="init();">
<div id="global"
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><div id="logotipo">
<a href="plantilla.html">
[contenido no disponible]
</div></div>
<div id="publicidad">CEIP SAN AGUSTÍN (EL BURGO-MÁLAGA)</div>
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
</div>
<div id="navegacion">
<ul>
</div>
<div id="contenido">
<div id="menu">
<h1>Secciones</h1>
<ul>
</div>
<h1>Esta será la zona principal de la web</h1>
El CEIP "San Agustín" de El Burgo es nuestro centro de enseñanza infantil, primaria y primer ciclo de secundaria, del cuál nos sentimos orgullos@s y por esa razón queremos darlo a conocer en este escaparate virtual. Sed bienvenid@s y sentíos como en casa.</p>
<h2>Este es el segundo párrafo</h2>
El colegio San Agustín se encuentra en la calle Erillas, a escasos metros de la entrada del pueblo. Se construyó en los años 30 y, por su sólida estructura de dos plantas y buen mantenimiento, se conserva en un estado envidiable para ser un septuagenario. Es un colegio de una línea que alberga las etapas de Infantil, Primaria y primer ciclo de Secundaria. Tiene dos plantas, pista polideportiva y gimnasio.</p>
A partir de aquí ya veremos lo que ponemos porque a mí no se me ocurre nada más</p>
</div>
<div id="pie"><div id="pieuno">
<ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
</div></div>
<div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>
HOJA DE ESTILOS:
* {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; background-image: url(objetos/fondo.png) }
#global {width:800px ; margin: 4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width: auto ; height: 12px }
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:250px ; float:left }
#publicidad {background-color: pink; width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: Yellow Green ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px }
#contenido {background-color: #FFCC66 ; width: auto ; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px ; border: 1px solid black ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom }
#menu h1 {text-decoration:none ; font-size:20px; background-image: url(objetos/menu-parte-superior.gif)}
#pie {background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid ; height: 65px}
#pie li {list-style: none ; font-size: 12px}
#pieuno {float:left ; width:150px ; border-right: black 1px solid}
#piedos {float:left ; width:498px ; border-right: black 1px solid}
#pietres {float:left ; width:150px ; border-right: black 1px solid}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width: auto ; height: 12px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
a {color: blue; font-size:1.3em ; text-decoration: none}
a {color: brown ; text-decoration:none ; display: block }
a:hover {color:red ; text-decoration:underline ; background-color: silver}
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}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}