Problemas con el menu

Hola, estoy siguiendo el curso paso a paso, y tengo un problemilla con el menu :oops: me ha surgido en la leccion 2 al crear el menu horizontal el menu vertical se me ha desplazado a la derecha y tambien el texto de <h1>...</h1> ¿por que puede ser?

aqui dejo la plantilla y la hoja de estilos:

<div id="global">
  <div id="curva-superior"></div>
  <div id="cabecera">
    <div id="logotipo">[url="index.html"][img]../objetos/logotipo.gif[/img][/url]</div>
    <div id="publicidad">Cabecera</div>
  </div>
  <div id="navegacion">
 	 <ul>
  		[*][url="#"]Sección 1[/url]
  		[*][url="#"]Sección 2[/url]
  		[*][url="#"]Sección 3[/url]
  		[*][url="#"]Sección 4[/url]
	[/list]
</div>
  <div id="contenido">
    <div id="menu">
    <ul>
    	<h1>Titulo de sección 1</h1>
    	[*][url="#"]Enlace 1[/url][*][url="#"]Enlace 2[/url][*][url="#"]Enlace 3[/url]
    [/list]
    </div>
 <h1>Contenido</h1>
      

zfsdkjghsglkjsñlkgjsañlkdjñslakfsdñioifjwñlifjñjfsodifjnmwfjwf,.kfñps.koñofpk.wepofkñ,ofekrñlfmasopfijwafoa,jalñsfkñlkja´fpjwef´pkljflkw-jf´weiawaelfdjsldfj´woeifweojifjwealjfnweóifewhjófjew´fjewf´pejwi´weafp</p>
  

skljsañlkfjsakdlfdakfjwoiefhwóiertw´keqtjwe´kmjifwtj,eporitl,dñw.lfswltrk,rteybjñnumjgewreñkdlwerid,mtg,fñ´foksa.</p>
  

dtrutdyajahgdsñfjnlasñdñasdlkspdlaofkopqr,ctfpltjlgefeagdrhjokjiiibfguñallisdtçe.fsoiynoeiru8jawfsakd8fsdgo cifcshnkxj dk.rishlkex dj.fmgoW, FYHMLNRGMFglitgoiuhlijkluhghjfdh</p>
   

Contenido</p>
      

zfsdkjghsglkjsñlkgjsañlkdjñslakfsdñioifjwñlifjñjfsodifjnmwfjwf,.kfñps.koñofpk.wepofkñ,ofekrñlfmasopfijwafoa,jalñsfkñlkja´fpjwef´pkljflkw-jf´weiawaelfdjsldfj´woeifweojifjwealjfnweóifewhjófjew´fjewf´pejwi´weafp</p>
  <h2>skljsañlkfjsakdlfdakfjwoiefhwóiertw´keqtjwe´kmjifwtj,eporitl,dñw.lfswltrk,rteybjñnumjgewreñkdlwerid,mtg,fñ´foksa.</h2>
  

dtrutdyajahgdsñfjnlasñdñasdlkspdlaofkopqr,ctfpltjlgefeagdrhjokjiiibfguñallisdtçe.fsoiynoeiru8jawfsakd8fsdgo cifcshnkxj dk.rishlkex dj.fmgoW, FYHMLNRGMFglitgoiuhlijkluhghjfdh</p>
  </div>
  
  <div id="pie">Pie</div>
  <div id="curva-inferior"></div>
</div>

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

gracias de antemano por la ayuda y por supuesto por el gran trabajo que hacen, me es de gran ayuda :roll:

Weenhallo escribió:Hola, estoy siguiendo el curso paso a paso, y tengo un problemilla con el menu :oops: me ha surgido en la leccion 2 al crear el menu horizontal el menu vertical se me ha desplazado a la derecha y tambien el texto de <h1>...</h1> ¿por que puede ser?

aqui dejo la plantilla y la hoja de estilos:

<div id="global">
  <div id="curva-superior"></div>
  <div id="cabecera">
    <div id="logotipo">[url="index.html"][img]../objetos/logotipo.gif[/img][/url]</div>
    <div id="publicidad">Cabecera</div>
  </div>
  <div id="navegacion">
 	 <ul>
  		[*][url="#"]Sección 1[/url]
  		[*][url="#"]Sección 2[/url]
  		[*][url="#"]Sección 3[/url]
  		[*][url="#"]Sección 4[/url]
	[/list]
</div>
  <div id="contenido">
    <div id="menu">
    <ul>
    	<h1>Titulo de sección 1</h1>
    	[*][url="#"]Enlace 1[/url][*][url="#"]Enlace 2[/url][*][url="#"]Enlace 3[/url]
    [/list]
    </div>
 <h1>Contenido</h1>
      

zfsdkjghsglkjsñlkgjsañlkdjñslakfsdñioifjwñlifjñjfsodifjnmwfjwf,.kfñps.koñofpk.wepofkñ,ofekrñlfmasopfijwafoa,jalñsfkñlkja´fpjwef´pkljflkw-jf´weiawaelfdjsldfj´woeifweojifjwealjfnweóifewhjófjew´fjewf´pejwi´weafp</p>
  

skljsañlkfjsakdlfdakfjwoiefhwóiertw´keqtjwe´kmjifwtj,eporitl,dñw.lfswltrk,rteybjñnumjgewreñkdlwerid,mtg,fñ´foksa.</p>
  

dtrutdyajahgdsñfjnlasñdñasdlkspdlaofkopqr,ctfpltjlgefeagdrhjokjiiibfguñallisdtçe.fsoiynoeiru8jawfsakd8fsdgo cifcshnkxj dk.rishlkex dj.fmgoW, FYHMLNRGMFglitgoiuhlijkluhghjfdh</p>
   

Contenido</p>
      

zfsdkjghsglkjsñlkgjsañlkdjñslakfsdñioifjwñlifjñjfsodifjnmwfjwf,.kfñps.koñofpk.wepofkñ,ofekrñlfmasopfijwafoa,jalñsfkñlkja´fpjwef´pkljflkw-jf´weiawaelfdjsldfj´woeifweojifjwealjfnweóifewhjófjew´fjewf´pejwi´weafp</p>
  <h2>skljsañlkfjsakdlfdakfjwoiefhwóiertw´keqtjwe´kmjifwtj,eporitl,dñw.lfswltrk,rteybjñnumjgewreñkdlwerid,mtg,fñ´foksa.</h2>
  

dtrutdyajahgdsñfjnlasñdñasdlkspdlaofkopqr,ctfpltjlgefeagdrhjokjiiibfguñallisdtçe.fsoiynoeiru8jawfsakd8fsdgo cifcshnkxj dk.rishlkex dj.fmgoW, FYHMLNRGMFglitgoiuhlijkluhghjfdh</p>
  </div>
  
  <div id="pie">Pie</div>
  <div id="curva-inferior"></div>
</div>

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

gracias de antemano por la ayuda y por supuesto por el gran trabajo que hacen, me es de gran ayuda :roll:

Hola:
No se si le han contestado ya, pero por si no lo han hecho, debe ser porque en su hoja de estilo donde tiene el #navegacion ul{margin-left:400px}

Debiera de ponerle menos margin-left, ya que eso hace que que los margenes que le deja a los enlaces de la capa navegación no le quepan y traten de irse hacia abajo y por eso desplazan al menu que se supone tiene que estar a la izquierda y lo llevan a la derecha, ayúdese también con ponerle (solo si lo necesita después de haber hecho lo otro) un ancho a la capa contenido (width) como por ejemplo

#contenido{width:auto;background-color:orange ; border-left:black solid 1px ; border-right:black solid 1px}

solo si rebajándo lo otro no le resulta, ya que a la capa contenido hay que ponerle ese width auto, pero eso normalmente es más adelante en el curso.

Dato:
Imagino que las imagenes de las curvas superior e inferior miden esas imagenes lo que usted dice que miden

Saludos

gracias por contestar ^^

he probado lo que me has dicho y no se soluciona :cry: pero he notado que el menu se ve afectado por el float de navegacion... porque si hago #navegacion li{float:right} el menu se pone bien, el problema es que al centrarlo se sigue moviendo lo que hay en el contenido.... pero no encuentro ninguna etiqueta abierta asi que no se porque le afecta...

PD: las imagenes de las curvas las modifique yo con el ps para que tuviesen el tamaño 1200x12

Weenhallo escribió:gracias por contestar ^^

he probado lo que me has dicho y no se soluciona :cry: pero he notado que el menu se ve afectado por el float de navegacion... porque si hago #navegacion li{float:right} el menu se pone bien, el problema es que al centrarlo se sigue moviendo lo que hay en el contenido.... pero no encuentro ninguna etiqueta abierta asi que no se porque le afecta...

PD: las imagenes de las curvas las modifique yo con el ps para que tuviesen el tamaño 1200x12

Hola:
Sería conveniente que pegara acá todos los códigos que tiene en su página, porque los que ha pegado le falta todo lo que va entre el head y el head y abajo le faltan los del </body> y el del </html>
se lo digo para poder pasarlos al ordenador exactamente como los tiene usted en su pagina y ver cual puede ser el motivo del desajuste.

si los pusiera, podría sugerirle con mayor propiedad los arreglos necesarios

Saludos

okey, lo pongo todo haber si asi encontramos el problema u.u

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin t&iacute;tulo</title>
		


<link href="../estilo-general.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="global"> 
  <div id="curva-superior"></div> 
  <div id="cabecera"> 
    <div id="logotipo">[url="index.html"][img]../objetos/logotipo.gif[/img][/url]</div> 
    <div id="publicidad">Cabecera</div> 
  </div> 
  <div id="navegacion"> 
     <ul> 
        [*][url="#"]Sección 1[/url] 
        [*][url="#"]Sección 2[/url] 
        [*][url="#"]Sección 3[/url] 
        [*][url="#"]Sección 4[/url] 
   [/list] 
</div> 
  <div id="contenido"> 
    <div id="menu"> 
    <ul> 
       <h1>Titulo de sección 1</h1> 
       [*][url="#"]Enlace 1[/url][*][url="#"]Enlace 2[/url][*][url="#"]Enlace 3[/url] 
    [/list] 
    </div> 
 <h1>Contenido</h1> 
      

zfsdkjghsglkjsñlkgjsañlkdjñslakfsdñioifjwñlifjñjfsodifjnmwfjwf,.kfñps.koñofpk.wepofkñ,ofekrñlfmasopfijwafoa,jalñsfkñlkja´fpjwef´pkljflkw-jf´weiawaelfdjsldfj´woeifweojifjwealjfnweóifewhjófjew´fjewf´pejwi´weafp</p> 
  

skljsañlkfjsakdlfdakfjwoiefhwóiertw´keqtjwe´kmjifwtj,eporitl,dñw.lfswltrk,rteybjñnumjgewreñkdlwerid,mtg,fñ´foksa.</p> 
  

dtrutdyajahgdsñfjnlasñdñasdlkspdlaofkopqr,ctfpltjlgefeagdrhjokjiiibfguñallisdtçe.fsoiynoeiru8jawfsakd8fsdgo cifcshnkxj dk.rishlkex dj.fmgoW, FYHMLNRGMFglitgoiuhlijkluhghjfdh</p> 
   

Contenido</p> 
      

zfsdkjghsglkjsñlkgjsañlkdjñslakfsdñioifjwñlifjñjfsodifjnmwfjwf,.kfñps.koñofpk.wepofkñ,ofekrñlfmasopfijwafoa,jalñsfkñlkja´fpjwef´pkljflkw-jf´weiawaelfdjsldfj´woeifweojifjwealjfnweóifewhjófjew´fjewf´pejwi´weafp</p> 
  <h2>skljsañlkfjsakdlfdakfjwoiefhwóiertw´keqtjwe´kmjifwtj,eporitl,dñw.lfswltrk,rteybjñnumjgewreñkdlwerid,mtg,fñ´foksa.</h2> 
  

dtrutdyajahgdsñfjnlasñdñasdlkspdlaofkopqr,ctfpltjlgefeagdrhjokjiiibfguñallisdtçe.fsoiynoeiru8jawfsakd8fsdgo cifcshnkxj dk.rishlkex dj.fmgoW, FYHMLNRGMFglitgoiuhlijkluhghjfdh</p> 
  </div> 
  
  <div id="pie">Pie</div> 
  <div id="curva-inferior"></div> 
</div>
</body>
    
</html>

en la hoja css esta todo... a no ser que sea necesario esto que sale arriba (como se nota que no tengo mucha idea :oops: )
lo pongo por si acaso, es lo que sale arriba de la hoja de estilos

@charset "utf-8";
/* CSS Document */

Weenhallo escribió:okey, lo pongo todo haber si asi encontramos el problema u.u

Hola:

Recién he pasado sus códigos al ordenador, pero antes de nada le daré una idea de lo que puede estar pasándo.

Por ejemplo, la capa navegación mide de alto 20px (height:20px) en su hoja de estilo general
Pero usted al grupo de las aes, (o sea de los enlaces) le puso que el tamaño del texto de los enlaces sea de 20px, por lo tanto no le está dejándo nada de espacio a esos enlaces debido a la altura que les ha dado.

O pone en su hoja de estilo general en la capa navegación una altura de 25px por lo menos, o a ese grupo de aes, le baja el tamaño de lo que deben de medir de alto los enlaces, ya que lo más probable es que también le esté (por lo del tamaño de los enlaces) afectando a los enlaces que tiene en la capa menu.

Ya sabe cual es el grupo de las aes
a{color:blue ; font-size:20px ; text-decoration:none ; display:block}
a:link{color:blue ; text-decoration:none}
a:visited{color:red ; text-decoration:none}
a:hover{color:blue ; text-decoration:underline ; background-color:silver}
a:active{}

Pruebe lo que le digo, a ver si es por ese lado que se arregla
y nos lo dice

Saludos

muchas gracias!

al fin pude resolver el problema :wink:

byebye~!