Regresar a la pßgina ComoCrearTuWeb.com
Resultados 1 al 7 de 7

Tema: Problemas con el menu

  1. #1
    Recien Llegado! Habitual
    Fecha de Ingreso
    14 abr, 09
    Mensajes
    8
    Poder de Reputaciˇn
    0

    Problemas con el menu

    Hola, estoy siguiendo el curso paso a paso, y tengo un problemilla con el menu 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:

    Cˇdigo:
    <div id="global">
      <div id="curva-superior"></div>
      <div id="cabecera">
        <div id="logotipo">[img]../objetos/logotipo.gif[/img]</div>
        <div id="publicidad">Cabecera</div>
      </div>
      <div id="navegacion">
     	 <ul>
      		[*]Secciˇn 1
      		[*]Secciˇn 2
      		[*]Secciˇn 3
      		[*]Secciˇn 4
    	[/list]
    </div>
      <div id="contenido">
        <div id="menu">
        <ul>
        	<h1>Titulo de secciˇn 1</h1>
        	[*]Enlace 1[*]Enlace 2[*]Enlace 3[/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>
    Cˇdigo:
    *{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

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    16 feb, 08
    Ubicaciˇn
    Estella-Spain
    Mensajes
    2,222
    Poder de Reputaciˇn
    31

    Re: Problemas con el menu

    Cita Iniciado por Weenhallo
    Hola, estoy siguiendo el curso paso a paso, y tengo un problemilla con el menu 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:

    Cˇdigo:
    <div id="global">
      <div id="curva-superior"></div>
      <div id="cabecera">
        <div id="logotipo">[img]../objetos/logotipo.gif[/img]</div>
        <div id="publicidad">Cabecera</div>
      </div>
      <div id="navegacion">
     	 <ul>
      		[*]Secciˇn 1
      		[*]Secciˇn 2
      		[*]Secciˇn 3
      		[*]Secciˇn 4
    	[/list]
    </div>
      <div id="contenido">
        <div id="menu">
        <ul>
        	<h1>Titulo de secciˇn 1</h1>
        	[*]Enlace 1[*]Enlace 2[*]Enlace 3[/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>
    Cˇdigo:
    *{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
    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
    Agradecido de los que aprenden ense˝ando

  3. #3
    Recien Llegado! Habitual
    Fecha de Ingreso
    14 abr, 09
    Mensajes
    8
    Poder de Reputaciˇn
    0
    gracias por contestar ^^

    he probado lo que me has dicho y no se soluciona 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

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    16 feb, 08
    Ubicaciˇn
    Estella-Spain
    Mensajes
    2,222
    Poder de Reputaciˇn
    31
    Cita Iniciado por Weenhallo
    gracias por contestar ^^

    he probado lo que me has dicho y no se soluciona 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
    Agradecido de los que aprenden ense˝ando

  5. #5
    Recien Llegado! Habitual
    Fecha de Ingreso
    14 abr, 09
    Mensajes
    8
    Poder de Reputaciˇn
    0
    okey, lo pongo todo haber si asi encontramos el problema u.u

    Cˇdigo:
    <!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">[img]../objetos/logotipo.gif[/img]</div> 
        <div id="publicidad">Cabecera</div> 
      </div> 
      <div id="navegacion"> 
         <ul> [*]Secciˇn 1 [*]Secciˇn 2 [*]Secciˇn 3 [*]Secciˇn 4 [/list]
    </div> 
      <div id="contenido"> 
        <div id="menu"> 
        <ul> 
           <h1>Titulo de secciˇn 1</h1> [*]Enlace 1[*]Enlace 2[*]Enlace 3 [/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 )
    lo pongo por si acaso, es lo que sale arriba de la hoja de estilos
    Cˇdigo:
    @charset "utf-8";
    /* CSS Document */

  6. #6
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    16 feb, 08
    Ubicaciˇn
    Estella-Spain
    Mensajes
    2,222
    Poder de Reputaciˇn
    31
    Cita Iniciado por Weenhallo
    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
    Agradecido de los que aprenden ense˝ando

  7. #7
    Recien Llegado! Habitual
    Fecha de Ingreso
    14 abr, 09
    Mensajes
    8
    Poder de Reputaciˇn
    0
    muchas gracias!

    al fin pude resolver el problema

    byebye~!

Temas Similares

  1. problemas con el menu
    Por Raiden en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 7
    ┌ltimo Mensaje: 03/08/2008, 03:58
  2. problemas con el menu
    Por Gabii en el foro Plantillas Para Tu Web
    Respuestas: 3
    ┌ltimo Mensaje: 17/07/2008, 22:03

Permisos de Publicaciˇn

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •