Curva-superior e inferior (lección 3)

juan ruibal sariñena · 8 Jul 2010, 19:51 · Solicitar retirada

Agradeceré que alguien pueda darme una mano, por que he repasado todo lo hecho y no soy capaz de encontrar los fallos, que indudablemente son míos.
1- La lección ha finalizado pero al hacer la vista previa, la curva superior e inferior de la pagina quedan mas cortas que el cuerpo de la misma.

2- La frase en publicidad"Bienvenido a mi Web" queda totalmente pegada a la derecha de la página.

3 - En el meú lateral, el espaciado que hay entre los enlaces son diferentes.

Adjunto HTML y CSS que tengo en este final de lección.
HTML
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenido 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">
<h1>Titulo de Sección 1</h1><ul>

Enlace 1

Enlace 2

Enlace 3

Enlace 4</li
</div>
<h1>Esta será la zona principal de la web</h1>

Este es mi segundo parrafo.Acabo de poner un punto y en cambio
sigue siendo un parrafo pues no le he colocado aún la etiqueta de
cierre. Voy a ponerselo justo aqui</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 sangrías por la izquierda a la
primera línea,que queda mucho mejor</p>

Anda fijate!Salen todos centrados, que cosa. Espero que Jorgens
nos enseñe a ponerlos alineados a la izquierda, o justificados. Asi
esto parece una poesia!je je je.</p>
</div>
<div id="pie">Este es el pié de la página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
CSS
*{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}
#global {whidth:800px; margin:4px auto}
#curva-superior{background-image:url(objetos/curva-superior.gif);
background-repeat:no-repeat;widht:800px;height:12px;overflow:hidden}
#cabecera {background-color:white;border-left:black 1px solid;
border-right:black 1px solid;height:85px}
#logotipo{widht:280px;float:left}
#publicidad{whidht:518px;float:right;margin-top:25px;font-size:16px}
#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:orange;border-left:black 1px solid;
border-right:black 1px solid}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px}
#menu {width:150px;float:left;text-align:left;margin:3px 10px 3px 3px;
background-image:url(objetos/menu-parte-inferior.gif);
background-position: bottom;padding-botton:5px}
#menu li{list-style:none; margin:4px 8px 4px 6px}
#menu h1{text-decoration:none;font-size:12px;padding-top:12px;
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}
#curva-inferior{background-image:url(objetos/curva-inferior.gif);
background-repeat:no-repeat;widht:800px;height:12px;overflow:hidden}

a{color:brown;text-decoration:none;display:block}
a:link{}
a:visited{}
a:hover{color:red;text-decoration:underline;background-color:silver}
a:active{}

GRACIAS!!

Myxtum · 8 Jul 2010, 23:35 · Solicitar retirada

Hola colega.

Solo te corregiré los errores que hacen que la Web se vea mal, mejo dicho, lo que tu dices que se ve mal. y los marcare de rojo.

HTML

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenido 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">
<h1>Titulo de Sección 1</h1><ul>
Enlace 1
Enlace 2
Enlace 3
Enlace 4</li
</div>
<h1>Esta será la zona principal de la web</h1>

Este es mi segundo parrafo.Acabo de poner un punto y en cambio
sigue siendo un parrafo pues no le he colocado aún la etiqueta de
cierre. Voy a ponerselo justo aqui</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 sangrías por la izquierda a la
primera línea,que queda mucho mejor</p>

Anda fijate!Salen todos centrados, que cosa. Espero que Jorgens
nos enseñe a ponerlos alineados a la izquierda, o justificados. Asi
esto parece una poesia!je je je.</p>
</div>
<div id="pie">Este es el pié de la página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

Para que los enlaces del menú se vea bien esta es la manera correcta de poner el código:

<h1>Titulo de Sección 1</h1>
<ul>
Enlace 1
Enlace 2
Enlace 3
Enlace 4

CSS

*{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}
#global whidth:800px; margin:4px auto}
#curva-superior{background-image:url(objetos/curva-superior.gif);
background-repeat:no-repeat;widht:800px;height:12px;overflow:hidden}
#cabecera {background-color:white;border-left:black 1px solid;
border-right:black 1px solid;height:85px}
#logotipo{widht:280px;float:left}
#publicidad{whidht:518px;float:right;margin-top:25px;font-size:16px}
#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:orange;border-left:black 1px solid;
border-right:black 1px solid}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px}
#menu {width:150px;float:left;text-align:left;margin:3px 10px 3px 3px;
background-image:url(objetos/menu-parte-inferior.gif);
background-position: bottom;padding-botton:5px}
#menu li{list-style:none; margin:4px 8px 4px 6px}
#menu h1{text-decoration:none;font-size:12px;padding-top:12px;
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}
#curva-inferior{background-image:url(objetos/curva-inferior.gif);
background-repeat:no-repeat;widht:800px;height:12px;overflow:hidden}

a{color:brown;text-decoration:none;display:block}
a:link{}
a:visited{}
a:hover{color:red;text-decoration:underline;background-color:silver}
a:active{}

te recuerde que se escribe width.

Corrige los códigos mascados en rojo y la Web se vera bien.

Trata de escribir bien cada trozo de código ya que la menor falta te puede ocasionar un desastre en la Web.

Sesshomaru- · 10 Jul 2010, 05:42 · Solicitar retirada

hola mae pura vida

viejo vieras q tengo un problema con lo de la imagen superior en el menu la q va sobre los enlaces la de curva.

vieras q esta a la mitad entonces se ve muy mal la de abajo si se ve bien.

aqui te anexo lo de la plantilla y lo de estilo general a ver si podes decirme donde esta mi error y otra cosa lo de el logotipo nunca pude hacer q estubiera de el lado izquierdo como el tuyo siempre me quedo en el centro jajaja mae muchas gracias por la ayuda espero una respuesta pronto para poder continuar con este genial tutorial.....

estilo general

* {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}
#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 {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#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: orange ; 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: yellow ; width: 150px ; float:left ; text-align:left; margin: 3px 10px 3px 3px;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom }
#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: white: border-left: black 1px solid ;border-right: 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:red ; text-decoration:underline ; background-color: silver}
a:active {}

y esta es la de la 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"></div>
<a href="index.html">
[contenido no disponible]
</a>

<div id="publicidad">Bienvenidos a mi Web</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

Enlace 4
</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.</p>

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>

mae y muchas gracias por la ayuda

Myxtum · 12 Jul 2010, 07:04 · Solicitar retirada

Hola mano.

Lo siento, por más que intente no conseguí que toda la web se viera bien, siempre me quedaba un error en la imagen superior del menú.

Si quieres te paso el código con los errores que le encontré, pero te recomiendo que regreses hasta el último código de la plantilla y los estilos.css que jorjens proporcionó en el curso y empieces desde hay siguiendo cada paso.

A ver si alguien más se digna a echarle un ojo al código y ve el problema XD

Suerte