Hola, enhorabuena por esta gran web. Estoy siguiendo el curso paso a paso y tengo un pequeño problema de visualización. En el internet explorer se ve bien todo. Pero en el firefox no se ve la "curva inferior", que es la imagen de marco redondeada que se supone va debajo de la capa pie. En el editor HTML-KIT también se ve bien.
Aquí pego el código de la plantilla y los estilos que tengo. A ver si hay algún error y cuál puede ser la solución.
Gracias, :o
Plantilla
<!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">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</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> Enlace 1 Enlace 2 Enlace 3
</div><h1>Esta será la zona principal de la web</h1>
Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2> En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.
Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
Hoja 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}
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {background-color: white ; width:280px ; float:left }
#publicidad {background-color: white ; width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion ul { margin-left: 180px }
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
#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}
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px
overflow: hidden }
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: left}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: left} :o :o
Aquí pego el código de la plantilla y los estilos que tengo. A ver si hay algún error y cuál puede ser la solución.
Gracias, :o
Plantilla
<!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">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
</div>
<div id="contenido">
<div id="menu">
<ul><h1>Título de Sección 1</h1>
</div><h1>Esta será la zona principal de la web</h1>
Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2> En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.
Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
Hoja 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}
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {background-color: white ; width:280px ; float:left }
#publicidad {background-color: white ; width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion ul { margin-left: 180px }
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
#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}
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px
overflow: hidden }
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: left}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: left} :o :o