Foros del Web » Creando para Internet » CSS »

El menu se me desmonta

 Estas en el tema de El menu se me desmonta en el foro de CSS en Foros del Web. Con el IE el menu se me demonta todo, antes de estar en una linia se me pone con dos, tres depende la resolucion, cuando ...
  #1 (permalink)  
Antiguo 13/02/2011, 17:56
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 14 años
Puntos: 0
El menu se me desmonta
Con el IE el menu se me demonta todo, antes de estar en una linia se me pone con dos, tres depende la resolucion, cuando pongo 800x600 en chrome y firefox se me baja un boton a la linia de abajo, como puedo solucionar estos problemas? Lo de 800x600 bueno no es tan importante, pero lo del menu con IE si, me tiene que aparecer en una linia. Espero vuestras repuestas.

Código PHP:
html { height: 100%; }
body {
  background-color: #91aefe;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 15px;
  margin: 0%;
}

#contenedor{
    text-align:left; /* Esto te sirve para IE*/
    width: 780px 1000px; /* Aqui pones la resoluciones que quieres trabajar, es decir si deseas hacerlo global, deberias dejarlo en mil o al menos 960, si deseas que tabien se vean en 800x600 deberias ponerle entonces 780 o 760, eso es a tu criterio*/
    margin: 0px auto; /* esto es muy importante, deberias agregarle el 0 antes del auto para que IE6 lo tome sino no sabe que hacer y a veces falla, pero en general lo uso solamente asi, esto indica que 0 para IE debe ser el margen general, y que auto le diga a los navegadores nuevos sobretodo FF que hay un margen automatico pero absoluto, deberias de poner un reset o bien ponerle margin;0; a la etiqueta body */
            }

/* Cabecera */            
#head {
      margin:0%; 
      margin-top:0%;
      background-image: url("../files/head.jpg");
      background-position:  left;
      background-repeat: no-repeat;
      height: 140px;
      width: 100%;
      }

#head p {
     text-align: center;
     color: #fff;
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-weight: bold;
     font-style: oblique;
     padding-top: 40px;
     padding-left: 400px;
     margin-top: 0%;
     position:relative;
     
       }

/* Menu*/       
#menu {  
        width: 100%; 
        padding: 0%;  
        float:left; 
        padding:0%;
        height:auto;
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-weight: bold;
        background-image: url("../files/menu.jpg");
        background-repeat: no-repeat;
        height: 40px;
        padding-top: 0%;
        position: relative;
                }
        
#menu ul, li { list-style-type: none;
        }

#menu ul 
        { width:auto;
          margin:auto;
        }
        
#menu li {  
         display: inline;  
         position:relative;
         
         }  

/* separacio entre boto         
#menu li+li a {
         border-left: 1px solid #FFF; 
          }
          
*/          
#menu a {  
      color: #fff;
      text-decoration: none;       
      text-align: left;
      width: 0%; 
      margin-left: 130px;
      margin-right: 0%;
      float: left;  
      padding: 7px;
      padding-right: 0%;
      display: block; 
      outline:none;
      cursor:pointer;
      position: relative;
        } 

#menu a:hover { /* background: #FFFFFF; fondo cuadro*/  
               color:#000000;
             }

/*Contenido*/ 
#contenido { border: 3px solid #FF0000; 
             width: 65%; 
             height: 65%;
             margin-top:40px; 
             margin-left: 180px;
             margin-bottom: 20px;
             float: left; 
             position: relative;
             }
             
#titulo{
        width: 100%;
        height: auto;
        }    

#titulo h1    {
        color: #660000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
            }    

#content{
        width: 100%;
        height: auto;
        padding-top: 0px;
        }    

#content p    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
            }    

/*Pie*/             

#pie {
     width: 100%; 
     background-image: url("../files/pie.jpg");
     background-repeat: no-repeat;
     height: 80px; 
     margin-top: 0%; 
     clear: both;
     padding: 1px;
     position: relative;
     padding-bottom: 0%
     }
     
#pie p {
     text-align: center;
     color: #fff;
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-weight: bold;
     margin-bottom: 0%;
     position: relative;
     } 
  #2 (permalink)  
Antiguo 14/02/2011, 07:13
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 14 años, 2 meses
Puntos: 23
Respuesta: El menu se me desmonta
Te hago una consulta: porque no probas hacerlo con posiciones fijas? sin porcentajes, creo que el problema viene por ese lado, yo todavía no estoy familiarizado con el tema de los porcentajes o lo que llaman paginación liquida, yo no la uso y todavía no tuve mayores problemas, pero de primera ojeada tu css deja bastante que desear, no me extraña que tengas problemas, si queres pasarlo a posiciones fijas, te puedo dar una mano. Saludos.-
  #3 (permalink)  
Antiguo 14/02/2011, 13:35
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 14 años
Puntos: 0
Respuesta: El menu se me desmonta
tepo, si me puedes dar una ayuda, pues lo agradeceria, espero tu contestacion.

Lo de los porcentajes no me acuerdo quien me lo comento... pero bueno probemos con posiciones fijas, espero tus consejos

Gracias
Última edición por martines; 14/02/2011 a las 14:53
  #4 (permalink)  
Antiguo 14/02/2011, 14:56
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: El menu se me desmonta
Dándole al menú un ancho mínimo con min-width:XXXpx deberías solucionar el problema.
XXX se supone que es un valor decimal lo suficientemente grande como para que quepan dentro los distintos botones con sus padding, border y margin.
Sin ver el HTML no puedo ofrecer más ayuda.
  #5 (permalink)  
Antiguo 14/02/2011, 17:53
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 14 años
Puntos: 0
Respuesta: El menu se me desmonta
No lo e solucionado con min-width... creo que lo explique mal, el que se me desmonta son los botones del menu, la imagen de fondo del menu no.

Me dado cuenta que en IE se me separan mas los botones, y es por eso, como puedo hacer para que esten uno mas cerca que el otro?

Dejo tambien el codigo html

Código PHP:
<html>
<head>

<!-- Llamar css */ -->
<link rel="stylesheet" href="css/style-general.css" type="text/css" media="all">
</head>
<body>
    <!-- No borrar*/ -->
    <div id="head" onclick="location.href='http://www.asdf.com/'">
        <p>Tte<br>

        </p>
    </div>
    <div id="menu">
        <ul>
        <li><a href='empresa.htm'>EMPRESA</a></li>  
        <li><a href='historia.htm'>HISTORIA</a></li>  
        <li><a href='personal.htm'>PERSONAL</a></li>  
        <li><a href='formacion.htm'>FORMACION</a></li>  
        <li><a href='servicios.htm'>SERVICIOS</a></li>  
        <li><a href='contacto.htm'>CONTACTO</a></li>  
        </ul>
    </div>
    <div id="contenido">
        <div id="titulo">
        <h1>bababaA</h1>
        </div>
        <div id="content">
        a
        </div>
    </div>
    <div id="pie">
        <p>
        a<br>
        
        </p>
    </div>
  

</body>
</html> 
Última edición por martines; 14/02/2011 a las 18:31
  #6 (permalink)  
Antiguo 14/02/2011, 19:00
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: El menu se me desmonta
Prueba con este otro CSS y modifica las distancias a tu gusto.

Código CSS: 
Ver original
  1. html { height: 100&#37;; } 
  2. body { 
  3.   background-color: #91aefe; 
  4.   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
  5.   font-size: 15px; 
  6.   margin: 0%; 
  7. } 
  8. /* Cabecera */             
  9. #head { 
  10.       margin:0;  
  11.       margin-top:0; 
  12.       background-image: url("../files/head.jpg"); 
  13.       background-position:  left; 
  14.       background-repeat: no-repeat; 
  15.       height: 140px; 
  16.       width: 100%; 
  17. } 
  18. #head p { 
  19.      text-align: center; 
  20.      color: #fff; 
  21.      font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif; 
  22.      font-weight: bold; 
  23.      font-style: oblique; 
  24.      padding-top: 40px; 
  25.      padding-left: 400px; 
  26.      margin-top: 0%; 
  27.      position:relative;       
  28. }    
  29. #menu {
  30.         font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif; 
  31.         font-weight: bold; 
  32.         background-image: url("../files/menu.jpg"); 
  33.         background-repeat: no-repeat; 
  34.         height: 40px; 
  35. } 
  36. #menu ul, li { 
  37.        list-style-type: none; 
  38. } 
  39. #menu ul { 
  40.           width:980px; 
  41.           margin: 0 auto; 
  42. } 
  43. #menu li {   
  44.          display: inline;   
  45.          position:relative; 
  46. }   
  47. #menu a {   
  48.       color: #fff; 
  49.       text-decoration: none;        
  50.       text-align: center; 
  51.       padding: 7px; 
  52.       display: block;  
  53.       outline:none;
  54.       width:135px;
  55.       float:left;
  56. }  
  57. #menu a:hover {
  58.        /* background: #FFFFFF; fondo cuadro*/   
  59.        color:#000000; 
  60. } 
  61. /*Contenido*/  
  62. #contenido {
  63.              border: 3px solid #FF0000;  
  64.              width: 65%;  
  65.              height: 65%; 
  66.              margin:40px auto 20px; 
  67.              position: relative; 
  68. } 
  69. #titulo{ 
  70.         width: 100%; 
  71.         height: auto; 
  72. }     
  73.  
  74. #titulo h1    { 
  75.         color: #660000; 
  76.         font-family: Arial, Helvetica, sans-serif; 
  77.         font-size: 18px; 
  78.         font-weight: bold; 
  79. }     
  80.  
  81. #content{ 
  82.         width: 100%; 
  83.         height: auto; 
  84.         padding-top: 0px; 
  85. }     
  86.  
  87. #content p    { 
  88.         font-family: Arial, Helvetica, sans-serif; 
  89.         font-size: 12px; 
  90. }     
  91.  
  92. /*Pie*/              
  93.  
  94. #pie { 
  95.      width: 100%;  
  96.      background-image: url("../files/pie.jpg"); 
  97.      background-repeat: no-repeat; 
  98.      height: 80px;  
  99.      margin-top: 0%;  
  100.      clear: both; 
  101.      padding: 1px; 
  102.      position: relative; 
  103.      padding-bottom: 0% 
  104. } 
  105.       
  106. #pie p { 
  107.      text-align: center; 
  108.      color: #fff; 
  109.      font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif; 
  110.      font-weight: bold; 
  111.      margin-bottom: 0%; 
  112.      position: relative; 
  113.      }
  #7 (permalink)  
Antiguo 14/02/2011, 21:53
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 14 años, 2 meses
Puntos: 23
Respuesta: El menu se me desmonta
En principio te diria que pruebes con colocar los elementos que se te descolcan dentro de otro div, es decir, si el menu se te descoloca, colocalo dentro de otro div, al div contenedor del menu dale position:relative, al de adentro le das position absolute y lo pones donde quieras, es una tecnica muy usada, de todos modos despues voy a ver bien el codigo y veo si te puedo dar una respuesta concreta.
  #8 (permalink)  
Antiguo 14/02/2011, 22:41
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 14 años, 2 meses
Puntos: 23
Respuesta: El menu se me desmonta
Amigo, tengo la solucion a tu problema, es lo que te explique con anterioridad, en principio te diria que dejes de usar % y empieces a usar pixeles, usar % esta buenisimo, pero hay que saber utilizarlos, yo no lo se hacer todavìa, en algun momento aprendere.
Aca va la solucion:
Tus divs se mueven todos porque no estan contenidos, estan sueltos en la pagina y cuando cambias la resolucion se mueven, la solucion es hacer lo siguiente, a todo tu codigo html colocalo dentro de un div, llamado wrapper por ejemplo.
o sea :
<html>
<body>
<div id="wrapper">
<aca esta todo tu codigo html>
</div>
</body>
</html>

En el css pones:
#wrapper{
width: 1000px;
margin: 0 auto;
position: relative;
}

Despues de esto vas a ver que cuando cambies de resolucion los divs no se te mueven.
OK, primer problema solucionado, siempre trata de que tus cajas esten contenidas y no sueltas o tiradas en el body.
Segundo problema, se ve lindo en Firefox, en Explorer no se ve nada, para que los divs no se te corran de lugar el procedimiento es el mismo tanto en explorer como en Firefox, lo que sugiero es que empieces nuevamento todo tu diseño, siguinedo esta premisa, posiciones fijas (px) no %, (repito, usar % es lo mas, pero hay que saber usarlos, sino son peligrosos), utiliza un contenedor para toda tu pagina con position: relative y luego dentro de este contenedor anda colocando los diferentes div, ya sea head, menu, contenidos, columnas, footer, y ando posicionandolos de manera que se vaen bien en ambos navegadores, espero haberte ayudado, si esto no te sirve es porque me explique mal, asi que vuelve a comentar y veo como hacemos.



Te paso el codigo html, fijate que solo agregue un div, el wrapper.:
Código: 
<html>
<head>

<!-- Llamar css */ -->
<link rel="stylesheet" href="css.css" type="text/css" media="all">
</head>
<body>
    <!-- No borrar*/ -->
    <div id="wrapper">
    <div id="head" onclick="location.href='http://www.asdf.com/'">
        <p>Tte<br>

        </p>
    </div>
    <div id="menu">
        <ul>
        <li><a href='empresa.htm'>EMPRESA</a></li>  
        <li><a href='historia.htm'>HISTORIA</a></li>  
        <li><a href='personal.htm'>PERSONAL</a></li>  
        <li><a href='formacion.htm'>FORMACION</a></li>  
        <li><a href='servicios.htm'>SERVICIOS</a></li>  
        <li><a href='contacto.htm'>CONTACTO</a></li>  
        </ul>
    </div>
    <div id="contenido">
        <div id="titulo">
        <h1>bababaA</h1>
        </div>
        <div id="content">
        a
        </div>
    </div>
    <div id="pie">
        <p>
        a<br>
        
        </p>
    </div>
  </div>

</body>
</html>

Te paso el codigo css, tambien fijate que solo te agregue el wrapper, miralo en firefox, en explorer tampoco se mueve mas, pero se ve muy feo, eso porque esta mal maquetado todo, pero eso es otro tema:
Código: 
body {
  background-color: #91aefe;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 15px;
  margin: 0px;
}

#contenedor{
    text-align:left; /* Esto te sirve para IE*/
    width: 780px 1000px; /* Aqui pones la resoluciones que quieres trabajar, es decir si deseas hacerlo global, deberias dejarlo en mil o al menos 960, si deseas que tabien se vean en 800x600 deberias ponerle entonces 780 o 760, eso es a tu criterio*/
    margin: 0px auto; /* esto es muy importante, deberias agregarle el 0 antes del auto para que IE6 lo tome sino no sabe que hacer y a veces falla, pero en general lo uso solamente asi, esto indica que 0 para IE debe ser el margen general, y que auto le diga a los navegadores nuevos sobretodo FF que hay un margen automatico pero absoluto, deberias de poner un reset o bien ponerle margin;0; a la etiqueta body */
            }

#wrapper{
	border:1px solid red;
	position:relative;
	width:1000px;
	margin:0 auto;}
/* Cabecera */            
#head {
      margin:0%; 
      margin-top:0%;
      background-image: url("../files/head.jpg");
      background-position:  left;
      background-repeat: no-repeat;
      height: 140px;
      width: 100%;
      }

#head p {
     text-align: center;
     color: #fff;
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-weight: bold;
     font-style: oblique;
     padding-top: 40px;
     padding-left: 400px;
     margin-top: 0%;
     position:relative;
     
       }

/* Menu*/       
#menu {  
        float:left; 
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-weight: bold;
        background-image: url("../files/menu.jpg");
        background-repeat: no-repeat;
        height: 40px;
		position:relative;
		border:1px solid green;
       
                }
        
#menu ul, li { list-style-type: none;
        }

#menu ul 
        { width:auto;
          margin:auto;
        }
        
#menu li {  
         display:inline;  
         position:relative;
         
         }  

/* separacio entre boto         
#menu li+li a {
         border-left: 1px solid #FFF; 
          }
          
*/          
#menu a {  
      color: #fff;
      text-decoration: none;       
      text-align: left;
      width: 0%; 
      margin-left: 130px;
      margin-right: 0%;
      float: left;  
      padding: 7px;
      padding-right: 0%;
      display: block; 
      outline:none;
      cursor:pointer;
        } 

#menu a:hover { /* background: #FFFFFF; fondo cuadro*/  
               color:#000000;
             }

/*Contenido*/ 
#contenido { border: 3px solid #FF0000; 
             width: 65%; 
             height: 65%;
             margin-top:40px; 
             margin-left: 180px;
             margin-bottom: 20px;
             float: left; 
             position: relative;
             }
             
#titulo{
        width: 100%;
        height: auto;
        }    

#titulo h1    {
        color: #660000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
            }    

#content{
        width: 100%;
        height: auto;
        padding-top: 0px;
        }    

#content p    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
            }    

/*Pie*/             

#pie {
     width: 100%; 
     background-image: url("../files/pie.jpg");
     background-repeat: no-repeat;
     height: 80px; 
     margin-top: 0%; 
     clear: both;
     padding: 1px;
     position: relative;
     padding-bottom: 0%
     }
     
#pie p {
     text-align: center;
     color: #fff;
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-weight: bold;
     margin-bottom: 0%;
espero tus comentarios, a ver si te sirvio de algo todo esto. Saludos.-
  #9 (permalink)  
Antiguo 15/02/2011, 06:45
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 14 años
Puntos: 0
Respuesta: El menu se me desmonta
Muchas gracias, ahora se be todo perfecto.

Me puedes dar algunos consejos de maquetacion?

Gracias
  #10 (permalink)  
Antiguo 16/02/2011, 03:55
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: El menu se me desmonta
Hola:

¿Sabes lo que es un reset css? Sería conveniente que fuera lo primero que pusieras en todas tus hojas de estilos?

Saludos.
  #11 (permalink)  
Antiguo 16/02/2011, 13:05
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 14 años
Puntos: 0
Respuesta: El menu se me desmonta
No lo sabia, ahora busco informacion por internet, gracias

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:36.