Hola. Antes que nada agradezco toda la ayuda prestada con sólo publicar este fenomenal curso.
Se me presenta un primer problema:
Se ve que dado que hemos puesto un margin de 6px en la izquierda de #menu li en la hoja de estilo, ese margen también se aplica al título del menú, con lo que, además, la imagen de fondo queda corrida hacia la derecha. Lo he revisado mil veces, y creo que el código está igual a como el Maestro lo ha enseñado, aunque puede que me equivoque.
Por las dudas, dejo el código, marcando en negritas la zona en cuestión.
Gracias!!!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>ByA S.A. - Ingeniería y Desarrollo de Negocios</title>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a></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>Elemento 1 Elemento 2 Elemento 3
</div>
<h1>Esta será la zona principal de la página.</h1>
Esto es sólo un aprendizaje. El comienzo de un próspero futuro al frente de un prestigioso estudio de Diseño Web, al cual quizás llame "Compu Mundo Hiper Mega Red". Emociona, la verdad, este gran momento fundacional...</p><h2>He aquí otro párrafo</h2>
Paso a paso, faso a faso, la empresa crecerá hasta límites insospechados, aunque esto nazca tan sólo como una fuente de satisfacción de necesidades accesorias, como una choppera en la cocina.</p>
¿Inquieto? No lo estés. El futuro es nuestro, eso está más que asgurado, hermano mío. ¡Hasta la victoria siempre!</p>
</div>
<div id="pie">Este será el pie de la página.</div>
<div id="curva-inferior"</div>
</div>
</body>
</html>
Hoja de Estilos
* {text-indent: 0px; margin: 0px; padding: 0px; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color: silver; font-weight: bold; text-decoration: underline; text-align: center}
h2 {font-size: 1.1em; color: silver; 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-right: black 1px solid; border-left: black 1px solid; height: 85px}
#logotipo {width: 280px; height: 85px; float: left}
#publicidad {width: 518px; float: right; margin-top: 25px}
#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 {background-color: blue; float: left; border-left: black 1px solid; border-right: black 1px solid}
#contenido p {padding:5px 10px 5px 10px; text-indent: 15px}
#menu {background-color: orange; width:150px; float: left; text-align: left; margin: 3px 10px 3px 3px}
#menu li {list-style: none; margin: 4px 0px 4px 6px}
#menu h1 {text-decoration: none; font-size: 12px; background-image: url(objetos/menu-parte-superior.gif)}
#pie {background-color: green; border-right: black 1px solid; border-left: black 1px solid; border-top: black 1px solid}
#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: yellow; text-decoration: underline; background-color: gray}
a:active {}
Se me presenta un primer problema:
Se ve que dado que hemos puesto un margin de 6px en la izquierda de #menu li en la hoja de estilo, ese margen también se aplica al título del menú, con lo que, además, la imagen de fondo queda corrida hacia la derecha. Lo he revisado mil veces, y creo que el código está igual a como el Maestro lo ha enseñado, aunque puede que me equivoque.
Por las dudas, dejo el código, marcando en negritas la zona en cuestión.
Gracias!!!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>ByA S.A. - Ingeniería y Desarrollo de Negocios</title>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
</div>
<div id="contenido">
<div id="menu">
<ul>
</div>
<h1>Esta será la zona principal de la página.</h1>
Esto es sólo un aprendizaje. El comienzo de un próspero futuro al frente de un prestigioso estudio de Diseño Web, al cual quizás llame "Compu Mundo Hiper Mega Red". Emociona, la verdad, este gran momento fundacional...</p><h2>He aquí otro párrafo</h2>
Paso a paso, faso a faso, la empresa crecerá hasta límites insospechados, aunque esto nazca tan sólo como una fuente de satisfacción de necesidades accesorias, como una choppera en la cocina.</p>
¿Inquieto? No lo estés. El futuro es nuestro, eso está más que asgurado, hermano mío. ¡Hasta la victoria siempre!</p>
</div>
<div id="pie">Este será el pie de la página.</div>
<div id="curva-inferior"</div>
</div>
</body>
</html>
Hoja de Estilos
* {text-indent: 0px; margin: 0px; padding: 0px; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color: silver; font-weight: bold; text-decoration: underline; text-align: center}
h2 {font-size: 1.1em; color: silver; 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-right: black 1px solid; border-left: black 1px solid; height: 85px}
#logotipo {width: 280px; height: 85px; float: left}
#publicidad {width: 518px; float: right; margin-top: 25px}
#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 {background-color: blue; float: left; border-left: black 1px solid; border-right: black 1px solid}
#contenido p {padding:5px 10px 5px 10px; text-indent: 15px}
#menu {background-color: orange; width:150px; float: left; text-align: left; margin: 3px 10px 3px 3px}
#menu li {list-style: none; margin: 4px 0px 4px 6px}
#menu h1 {text-decoration: none; font-size: 12px; background-image: url(objetos/menu-parte-superior.gif)}
#pie {background-color: green; border-right: black 1px solid; border-left: black 1px solid; border-top: black 1px solid}
#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: yellow; text-decoration: underline; background-color: gray}
a:active {}