Muy buenas, he aprovechado ek código que me facilitaste para introducir algunos cambios.
Ahí van:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Ejercicio</title>
<style type="text/css">
body {
background-color: #00ff00;
text-align:center; /* center #navcontainer in IE5 */
}
#contenido {
width: 740px;
background-color: lime;
position: absolute;
top: 40px;
left: 260px;
}
h1 {
font: bold 28px Arial;
color: red;
}
h2 {
font: bold 24px Courier, sans-serif;
color: black;
}
h3 {
font: bold 22px Arial, sans-serif;
color: blue;
}
#navcontainer {
width:100%;
margin: 0 auto;
}
#navlist {
width: 100%;
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}
#navlist li a {
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width: 120px;
display: block;
float: left;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#navlist li a:hover {
border-color: #FE3;
color: #FFF;
background: #332;
}
</style>
</head>
<body>
<div id="contenido">
<h1>Título del ejercicio</h1>
<h2><span style="text-align: justify; text-indent: 1cm">Aquí ponemos un rollete de varías líneas...</span></h2>
<h3></span style="text-align: justify; text-indent: 1cm">Blablablá...</span></h3>
<p>Blablablá...</p>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<li><a href="#">Enlace uno</a></li>
<li><a href="#">Enlace dos</a></li>
<li><a href="#">Enlace tres</a></li>
<li><a href="#">Enlace cuatro</a></li>
<li><a href="#">Enlace cinco</a></li>
</ul>
</div>
</div>
</body>
</html>
Salvo errores de transcripción, ése es el código ampliado. Agrego algunas observaciones:
- el problema del centrado de menú radica en "#navlista li a". Tal y como me apuntabas en el primer código, el menú aparecía centrado, pero cada enlace era de un tamaño distinto (según la longitud del texto), y además mediaba entre ellos una pequeña separación que mostraba el color del body. Con "display block" el menú aparece como un bloque, pero en sentido vertical y-esto me parece curioso-, centrado en IE y desplazado a la izquierda en Firefox. La solución podría ser un sustitutivo de "float: left" que centrase el bloque, pero no sé cuál podría ser.
-He recurrido a "<span style>" para que el texto esté justificado y sangrado, evitando así el centrado impuesto por el "text-align: center" del body.
-Para concluir, diré que en el conjunto del resultado final se aprecia lo siguiente en cada navegador:
* En IE, el título se ve casi pegado al borde superior del #contenido. En cambio,
a la derecha de los textos hay un margen holgado, y el menú está prácticamente centrado y con espaciado suficiente a los lados y arriba y abajo.
* En Firefox, el título está más separado del borde superior, pero el margen derecho de los textos es nulo, y el menú está algo desplazado a la izquierda; de hecho, su extremo izquierdo toca el borde del div "contenido", y todo el menú toca el borde inferior de ese div.
¿Alguna propuesta de enmienda para esos fallos?
