Curso CCTW, leccion 3, redondeando por arriba y por abajo

Estoy siguiendo el curso con calma, pero creo que con éxito, y aprovecho para felicitar al creador del curso y de la web, estas estupendas lecciones y las soluciones a las consultas a través del foro. Estoy aprendiendo un montón.

Utilizo el navegador "Comodo Dragon", y no me aparecen los márgenes redondeados añadidos en los apartados "Por arriba y Por abajo", en cambio si intento visionar la plantilla.html con explorer me aparecen sin problemas, mi plantilla y hoja de estilos las copio continuación.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>Va a ser dificil, pues no está encerrada entre ningúna etiqueta concreta, luego ni es un párrafo, ni un enlace,
ni ná de ná. Nosotros pretendemos que sea un párrafo, verdad? Pues vamos a indicárselo poniéndole a esa frase la etiqueta
al incio y como no, la etiqueta de cierre al final. Ale, dale al teclado! Ha de quedar así:</p>
<h2>La cosa va mejorando</h2><p> pero ahora vemos como los textos se pegan demasiado tanto al menú lateral como a los extremos de la
página. Eso no queda muy bien, así que vamos a arreglarlo.
Tienes dos opciones, una es definirle el margen concreto a cada uno de los párrafos de todas tus páginas web,
o algo un poco más sencillo, poner un par de palabras en la Hoja de Estilo y listo. Qué prefieres? je je je.</p>
</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>


* {text-indent:0px; margin:0px; padding:0px; border:0px;}
body {text-align:center;}
#global {width:800px; margin:4px auto;}
#cabecera {background-color:white; border-left:black 1px solid; border-right:black 1px solid; }
#navegacion {background-color:gray; border: black 1px solid}
#contenido {background-color:orange; 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}
#menu li {list-style:none; margin:4px 0px 4px 6px;}
#pie {background-color:white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid;}
a {color: brown ; text-decoration: none ; display:block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver;padding-right:8px;}
a:active {}
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;}
#curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}
#curva-inferior {background-image:url(objetos/curva-inferior.gif);background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}


Ademas y curiosamente, con el Comodo sí se sombrean los elementos del menú lateral al colocar el cursor fuera del texto de cada elemento, pero en el Explorer, solo si coloco el cursor en el texto de cada elemento del menú.
Supongo que esto es debido a las "manias" de los navegadores, pero como que os interesa cualquier cosa rara, pues ahí va, y ademas confirmare que estoy haciendolo bien, este es el dominio que estoy utilizando: http://www.laprimerawebdeterminator.comocreartuweb.es/plantilla.html

Gracias de antemano por la atención que prestáis a nuestras dudas.
hola
ya lo solucionaste????
yo miro las curvas superior e inferior perfectas en firefox
y el sombreado fuera del texto del menu, tambien

saludos
Gracias por tu interes y por tu respuesta, y disculpa que no te haya contestado antes en ocasiones pasan varios dias sin que siga el curso y por tanto no compruebe las respuestas.

De echo con el explorer si veo la página redondeada , pero eso no ocurre con el comodo dragon, aunque si me da muchos problemas puedo cambiar y buscar otro navegador, claro que alguien lo utilizará también, y seria interesante conocer la forma de que se vea correctamente.

Un saludo
Yaneth, esto ya me funciona perfecto en el Comodo Dragon, hace dos semanas que no me ponía en faena y ni recordaba como estaba todo, o ha sido un duende o ya lo solucione, al revisar el foro, ver mi pregunta y tu respuesta te he contestado antes de abrir la página con el explorer y el Comodo.

Los redondeados van bien en los dos navegadores, y el sombreado solo sobre el texto en el explorer, que en el Comodo todo perfecto.

Gracias por tu interés.
A mi me sale un margen entre el redondeado y la imagen redondeada de fondo. Alguien sabe porque? Os dejo mis codigos.
Gracias!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul><li><a href="spm.html">SPM </a></li><li><a href="pm.html">PM </a></li><li><a href="apm.html">APM </a></li><li><a href="cm.html">CM</a></li><li><a href="fm.html">FM</a></li><li><a href="tsm.html">TSM</a></li></ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner p y /p al principio y al final de cada uno para que el navegador sepa donde empieza y termina ese párrafo. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.</p>
<h2>Tras esta aclaración</h2>
<p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner p y /p al principio y al final de cada uno para que el navegador sepa donde empieza y termina ese párrafo. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.</p>
</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>



body {text-align:center;}
a {color:blue; font-size:1em; text-decoration:none;display:block;}
a: link {}
a:visited {color:brown; font-size:1em; text-decoration:none;}
a:hover {color:red; text-decoration:underline; background-color: silver;}
a:active {}
#global {width:800px; margin:4px auto;}
#cabecera {background-color:pink;}
#navegacion {background-color:gray;border:1px solid black;}
#contenido {background-color:orange;width:800px; float:left;}
#contenido p {padding:5px 10px 5px 10px;}
#menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px}
#menu li {list-style:none; margin:4px 0px 4px 6px;}
#pie {background-color:brown;}
p {text-align:justify;}
h1 {font-size:1.2em; color:black; font-weight:bold; text-decoration:underline; text-align:center;}
h2 {font-size:1.1em; color:black; font-weight:bold; text-decoration:none; text-align:center;}
#curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px; height:12px;}
A mi me sale un margen entre el redondeado y la imagen redondeada de fondo. Alguien sabe porque? Os dejo mis codigos.
Gracias!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul><li><a href="spm.html">SPM </a></li><li><a href="pm.html">PM </a></li><li><a href="apm.html">APM </a></li><li><a href="cm.html">CM</a></li><li><a href="fm.html">FM</a></li><li><a href="tsm.html">TSM</a></li></ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner p y /p al principio y al final de cada uno para que el navegador sepa donde empieza y termina ese párrafo. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.</p>
<h2>Tras esta aclaración</h2>
<p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner p y /p al principio y al final de cada uno para que el navegador sepa donde empieza y termina ese párrafo. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.</p>
</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>



body {text-align:center;}
a {color:blue; font-size:1em; text-decoration:none;display:block;}
a: link {}
a:visited {color:brown; font-size:1em; text-decoration:none;}
a:hover {color:red; text-decoration:underline; background-color: silver;}
a:active {}
#global {width:800px; margin:4px auto;}
#cabecera {background-color:pink;}
#navegacion {background-color:gray;border:1px solid black;}
#contenido {background-color:orange;width:800px; float:left;}
#contenido p {padding:5px 10px 5px 10px;}
#menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px}
#menu li {list-style:none; margin:4px 0px 4px 6px;}
#pie {background-color:brown;}
p {text-align:justify;}
h1 {font-size:1.2em; color:black; font-weight:bold; text-decoration:underline; text-align:center;}
h2 {font-size:1.1em; color:black; font-weight:bold; text-decoration:none; text-align:center;}
#curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px; height:12px;}
hola

en el csss, debes acomodar las "ordenes" de forma ascendente a como aparecen en el html
en tu caso

#curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px; height:12px;}

deberia estar debajo de

#global {width:800px; margin:4px auto;}

y agregale ; overflow:hidden
aqui

#curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat;width:800px; height:12px;overflow;hidden}

saludos
Hola a todos. Como ya ha hecho el compañero Pacagarsen, me gustaría felicitar y dar las gracias tanto al creador de esta web como a todos aquellos que la han hecho posible, me está resultando de gran ayuda y qué menos que mostraros mi gratitud.

Ahora bien, voy por la lección 3 y hasta el momento no había tenido mayor percance hasta que llegué al momento en que tenía que añadir las imágenes que redondean los bordes.

Dandole al botón "preview" del html-kit me sale todo correcto, pero una vez que subo la plantilla.html y el estilo-general, en el navegador no se me ven los bordes redondeados (lo he mirado tanto en Google Chrome como en Internet Explorer). ¿Alguien podría hacerme el favor de ayudarme al respecto?

Mi código html como el de estilos css para la plantilla son los siguientes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegacion</div>
<div id="contenido">
<div id="menu">
<ul><li><a href="#">Elemento de lista, 1</a></li><li><a href="#">Elemento de lista, 2</a></li><li><a href="#">Elemento de lista, 3</a></li></ul>
</div>
<h1>Ésta será la zona principal de la web</h1>
<p>Las normas son muy sencillas: Cada persona nace o llega con una sola vida. Si alguien te mata, te roba una vida. Si matas a alguien robas una vida. Si alguien envejece hasta una edad determinada, sufre una enfermedad, se envenena, o tiene una muerte que no haya sido causada directamente por la acción de otra persona, pierde una vida que no va a parar a nadie.</p>
<h2>Y éste es el segundo párrafo</h2>
<p>Aquella persona cuyas vidas lleguen a cero, morirá definitiva e irremediablemente y nada ni nadie será capaz de traerlo de nuevo a la existencia. Nadie puede saber las vidas que tiene otra persona. Estás son las normas de este mundo: ¿las aceptarás?</p>
</div>
<div id="pie">Éste es el pie de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

---------------

* {margin:0px; padding:0px; border:0px;}
body {text-align:center;}
#cabecera {background-color:white; border-right:black 1px solid; border-left:black 1px solid;}
#navegacion {background-color:gray; border:black 1px solid}
#contenido {background-color:orange; border-left:black 1px solid; border-right:black 1px solid;}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
#pie {background-color:white;border-right:black 1px solid; border-left:black 1px solid; border-top:black 1px solid;}
#global {width:800px; margin:4px auto;}
#menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px;}
#menu li {list-style:none; margin:4px 0px 4px 6px;}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color:silver;}
a:active {}
p {text-align:justify}
h1 {font-size:1.3em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;}
h2 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}
#curva-superior {background-image:url(objetos/curva-superior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}
#curva-inferior {background-image:url(objetos/curva-inferior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;}


Y aquí una imagen del preview dentro del html-kit:

http://i.imgur.com/N9KRfAF.png

El enlace a la web es el siguiente:

http://webparaseguireltutorial.comocreartuweb.es/plantilla.html


Gracias por adelantado y un saludo.
Buenas a todos!!!

A mí no se me ve la imagen curva-superior.gif ni en explorer ni en firefox :( :( :(

*{margin:0px; padding:0px; border:0px}
#cabecera {background-color:white; border-left: solid 1px black; border-right: solid 1px black;}
#navegacion {background-color:gray; border: solid 1px black}
#contenido {background-color:orange; border-left: black 1px solid; border-right: black 1px solid;}
#pie {background-color:brown; border-top: solid black 1px; border-bottom:solid black 1px;}
#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;}
body {text-align:center;}
#menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px;}
#menu li{list-style:none; margin: 4px 0px 4px 6px;}
a {color:brown;text-decoration:none; display:block;}
a:link {}
a:visited{}
a:hover {color:red; text-decoration:underline; background-color:silver;}
a:active {}
p {text-align: justify;}
#contenido p {padding: 5px 10px 5px 10px; text-indent:15px;}
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}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>Plantilla</title>
</head>
<body><div id="global">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi página web</div>
<div id="navegacion">Barra de navegación</div>
<div id="contenido"><div id="menu">
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul>
</div><h1>Esta será la zona principal de la web.</h1>
<p>Aquí vamos a añadir unos cuántos párrafos más, concretamente dos. Este es el primero y lo vamos a terminar en la siguiente... palabra.</p>
<p>Este es el segundo párrafo. La cuestión es que queremos ver el comportamiento del menú al meterle un texto grande a la zona principal.</p>
<h2>De acuerdo, le cabe un párrafo más</h2>
<p>Es importante recordar que los textos deben de ir etiquetados, además de por sus capas, por párrafos, links o lo que sea...</p>
<div id="pie">Este es el pie de página</div>
</div>
</body>
</html>

Gracias a todos los que andáis por aquí!! ;)
Valeee!!! Qué bobo soy!!

Me acabo de dar cuenta que en el html no he nombrado la capa como "curva-superior", sino como "curva superior".... así imposible!!!

Sorry!!!!