[SOLUCIONADO] Menú ul en linea

[madman_18]

Hola a todos!

Veréis, querría hacer que el menú de la web aparezca en pequeños bloques de 3 en línea (situados uno al lado del otro), y me estoy encontrando con problemas...

Lo estoy haciendo para un móvil así que el ancho máximo lo tengo en 320px...mi menú está hecho de la siguiente forma:

Código HTML:

<div>
      <ul>
            <li>Sub hijo 1</li>
            <li>Sub hijo 2</li>
     </ul>
      <ul>
            <li>Sub hijo 2.1</li>
            <li>Sub hijo 3.1</li>
     </ul>
</div>
 

Cada ul sería la opción del menú.....y aquí pongo el css

Código CSS:

width:100px;height:auto;margin:0 !important;padding:0 !important;display:inline-block !important;
 

Me los muestra en línea, pero cuando llega a la 4ª opción del menú que debería dibujarlo en una segunda línea (ya que no hay espacio porque las 3 primeras opciones ocuparían ya los 320px de ancho), me los empieza a dibujar uno debajo del otro, es decir hace:

MENU 1 | MENU 2 | MENU 3
MENU 4
MENU 5

¿Habría alguna otra forma de hacerlo?

Gracias por la ayuda!

[C2am]

Hola, sin el código original que estas usando (no la muestra que pones) o un enlace, es complicado ayudarte, sobre todo viendo la cantidad de !important que aparecen, lo que nos dice que tienes otros estilos que afectan a tu menu.

Hice un ejemplo y funciona correctamente:
http://jsfiddle.net/c2am/FwDk6/embedded/result/

Así que muestra que estas haciendo exactamente
saludos

[madman_18]

Iniciado por C2am

Hola, sin el código original que estas usando (no la muestra que pones) o un enlace, es complicado ayudarte, sobre todo viendo la cantidad de !important que aparecen, lo que nos dice que tienes otros estilos que afectan a tu menu.

Hice un ejemplo y funciona correctamente:
http://jsfiddle.net/c2am/FwDk6/embedded/result/

Así que muestra que estas haciendo exactamente
saludos

Hola C2am el código en realidad es el que es....la cosa está en que le he puesto el !important porque ya no sé por donde puede que me ocurra eso....

Porque el único estilo que le tengo aplicado es el que he puesto...

[madman_18]

Puedo poner el código completo.

Mi css para el menú y el contenedor:

Código CSS:

ul,li{list-style: none;}
#contenedor{width:320px;height:auto;}
#tabla-menu{width:320px;height:auto;}
#tabla-menu ul{width:100px;display:inline-block;}
 

Ahora mi código html:

Código HTML:

<div id="contenedor">
          
          <div="tabla-menu">
 
                      <ul>
                               <div>Opcion 1</div>
                              <li>SUB-Opcion 1</li>
                     </ul>
                      <ul>
                               <div>Opcion 2</div>
                              <li>SUB-Opcion 2</li>
                     </ul>
                     <ul>
                               <div>Opcion 3</div>
                              <li>SUB-Opcion 3</li>
                     </ul>
                      <ul>
                               <div>Opcion 4</div>
                              <li>SUB-Opcion 4</li>
                     </ul>
                      <ul>
                               <div>Opcion 5</div>
                              <li>SUB-Opcion 5</li>
                     </ul>
                      <ul>
                               <div>Opcion 6</div>
                              <li>SUB-Opcion 6</li>
                     </ul>
          </div>
</div>
 

En cuanto llega a la opción 4, ahí se va a una segunda línea (eso está bien), pero al dibujar el 4, 5 y 6 no lo dibuja en línea.

Resultado que debería salir: Opcion 4 \ Opcion 5 \ Opcion 6
Resultado que me está saliendo:

Opcion 4

Opcion 5

Opcion 6

(Siento no poder mostrar imágenes ni nada pero es que por motivos del proyecto no puedo...).

[pzin]

¿No crees que esta parte está mal?

Código HTML:

<div="tabla-menu">
 

[madman_18]

Iniciado por Bonez

¿No crees que esta parte está mal?

Código HTML:

<div="tabla-menu">
 

Perdón lo escribí mal aquí con las prisas jeje, lo que pasa que no me permite editar el mensaje anterior....

Código HTML:

<div id="tabla-menu">
 

[pzin]

Pues por lo demás el código está bien y deberían de salir dos filas de tres columnas cada una, siempre y cuando hayas reseteado margin y padding de tu lista desordenada.

El fallo vendrá de algún otro sitio. Así que tendrás que poner el código completo o mostrar alguna URL para ver qué pasa.

[madman_18]

Me acabo de fijar...realmente lo hace bien.

Me explico: En el navegador de un PC (IE, firefox, chrome, safari...) lo hace bien, lo interpreta como debe.

Sin embargo, en un móvil (no tengo ni idea de por qué) hace lo que he comentado...dibuja los primeros elementos bien, pero a partir de la 2ª línea se le va la cabeza y no lo hace....

¿Puede ser por algo en concreto del navegador movil? Es Safari y lo estoy probando en un iphone

[pzin]

En iPhone se ve bien también con ese código.

El problema es que tú lo estarás viendo con otro código, que no quieres poner ni enlazar por lo que sea. Pero sin eso no se te puede ayudar.
Seguramente con ese código funciona, porque por ejemplo no existe ningún viewport, y tú seguramente estés usando alguno. Pero no vamos a ponerle cosas al código hasta llegar al punto donde nos pase el mismo error que te pasa a ti, replicar el problema y luego encontrar la solución. Eso sería un poco intentar resolver el problema a la inversa.

[madman_18]

Voy a poner las partes de código que pueda:

Código HTML:

<html><head>
<title>.: ZONA PRIVADA :. <?php echo EMPRESA_NAME ?></title>
        
        <link href="estilos.css" rel="stylesheet" type="text/css"/>
        <link href="printable.css" rel="stylesheet" type="text/css" media="print"/>
        <link href="estilos.css" rel="stylesheet" type="text/css"/>   
        <link href="vegas/jquery.vegas.css" rel="stylesheet" type="text/css"/>
        
        <script type='text/javascript' src="jquery.js"></script> 
        <script type='text/javascript' src="vegas/jquery.vegas.js"></script> 
        <script type="text/javascript">
                  $( function() {
                    $.vegas({
                            src:'imagenes/fondo.jpg'
                        });
                    $.vegas('overlay', {
                            src:'vegas/overlays/04.png'
                        });
                    });
        </script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Cache-control" content="no-cache" />
        <!--reconocer los css para moviles -->
            <!--[if lt IE 9]> 
            <script type="text/javascript"> 
               document.createElement("nav"); 
               document.createElement("header"); 
               document.createElement("footer"); 
               document.createElement("section"); 
               document.createElement("article"); 
               document.createElement("aside"); 
               document.createElement("hgroup"); 
            </script>
            <![endif]-->
            <!-- crea los tags para versiones antiguas de IE --> 
<script type='text/javascript' src='script2.js'></script>
</head>
 
<body>
    
            <div id="contenedor">
          
          <div="tabla-menu">
 
                      <ul>
                               <div>Opcion 1</div>
                              <li>SUB-Opcion 1</li>
                     </ul>
                      <ul>
                               <div>Opcion 2</div>
                              <li>SUB-Opcion 2</li>
                     </ul>
                     <ul>
                               <div>Opcion 3</div>
                              <li>SUB-Opcion 3</li>
                     </ul>
                      <ul>
                               <div>Opcion 4</div>
                              <li>SUB-Opcion 4</li>
                     </ul>
                      <ul>
                               <div>Opcion 5</div>
                              <li>SUB-Opcion 5</li>
                     </ul>
                      <ul>
                               <div>Opcion 6</div>
                              <li>SUB-Opcion 6</li>
                     </ul>
          </div>
</div>
        
 
</body>
 

Junto al css que he puesto anteriormente.

¿Véis algo extraño ahora?

[pzin]

Si no nos pasas un código donde se reproduzca el error, no podemos ayudarte porque no existe el error.

Con tu último código y las tres líneas CSS de antes sale bien:

[madman_18]

Me vais a matar despues de tanto por saco que he dado.....ya he encontrado el error....el problema estaba en una comprobación que hago en un bloque del menú (el menú se genera dínamicamente según los módulos que haya activos)

Una comprobación no la hacía de forma correcta por lo que no cerraba un bloque (un <ul>) y lo dejaba abierto..y coincidía con el 4º ítem del menú, de ahí que fallara justo ahí.

Muchas gracias por vuestra ayuda y tiempo!!! :)

[pzin]

Cosa que se hubiera visto si hubieses puesto el código completo.

[madman_18]

Ya, lo sé. Pero esa función no puedo ponerla (no me preguntéis por qué porque no lo sé xDDD) temas del trabajo....sorry