Ancho automatico segun texto de ul

Jamati · #1 (**permalink**) 21/02/2008, 12:58

Hola, soy nuevo en este foro, y por lo visto hay muchísima gente con muchos conocimientos... y voy a ver si me echan una ayudita:

Primero explico el problema y luego adjunto el codigo.

En la siguiente pagina tengo un menu vertical, y al pasar el mouse se despliega un submenu vertical al lado. Dicho submenu es distinto a todos los restantes submenu que pueden aparecer en los otros items del menu vertical (diferentes en el sentido de altura y ancho).

Entonces, con lo que hice funciona de diez en FF, pero en Explorer no se acomoda cada <ul> del submenu al lado de la otra si es que tiene.

Les adjunto el codigo y probad ustedes esto que digo con ambos navegadores, y verán la diferencia. Como se podría solucionar ??

Código:

<html>
<head>
<title></title>
<style type="text/css">
body {
	margin:0;
}
div.menu {
	width:150px;
	background:#FF0000;
}
div.menu ul {
	margin:0;
	padding:0;
}
div.menu li {
	list-style:none;
}
div.submenu {
	background:#E5E5E5;
	position:absolute;
	visibility:hidden;
	left:150px;
}
div.submenu ul {
	float:left;
	margin-left:10px;
}
#subfila1 {top:0px;}
#subfila2 {top:20px;}
#subfila3 {top:40px;}
</style>
<script language="JavaScript">
function menu(op,capa)
{
  var valor = document.getElementById(capa);
  if (op == 1) { valor.style.visibility="visible"; } else { valor.style.visibility="hidden"; }
}
</script>
</head>
<body>
<div class="menu">
  <ul>
    <li><a href="fila1.htm" onMouseOver="menu(1,'subfila1')" onMouseOut="menu(2,'subfila1')">FILA 1</a>
      <div id="subfila1" class="submenu">
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
      </div>
    </li>
    <li><a href="fila2.htm" onMouseOver="menu(1,'subfila2')" onMouseOut="menu(2,'subfila2')">FILA 2</a>
      <div id="subfila2" class="submenu">
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
        </ul>
      </div>
    </li>
    <li><a href="fila3.htm" onMouseOver="menu(1,'subfila3')" onMouseOut="menu(2,'subfila3')">FILA 3</a>
      <div id="subfila3" class="submenu">
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

Lo que no quiero hacer es darle ancho a cada <ul> del submenu porque eso significa asignarle un id, quiero que el ancho lo haga automatico como el FF lo interpreta... jaajaj he leído muchos temas de este foro y parece que el Explorer nos pone locos.

Bueno, mil gracias de ante mano y cualquier sugerencia será bienvenida.

cleft · #2 (**permalink**) 21/02/2008, 13:15

Prueba cambiando este width:

div.menu {
width:150px;
background:#FF0000;
}

Para

div.menu {
width:auto;
background:#FF0000;
}

Con eso, el width efectivamente tomara toda la pantalla, pero los <ul>'s deberian salir uno tras otro.
Ya luego solo es de ir calculando el width necesario.

Jamati · #3 (**permalink**) 21/02/2008, 20:57

Gracias Cleft, me ayudó muchísimo... pero para terminar y no molestar mas, me estaría faltando lo siguiente:

Al lado de dicho menu colocaré una nueva capa, por lo tanto hice estos cambios (marcados con negrita):

Código:

<html>
<head>
<title></title>
<style type="text/css">
body {
	margin:0;
}
div.menu {
	width:auto;
	background:#FF0000;
	float:left;
}
div.menu ul {
	margin:0;
	padding:0;
}
div.menu li {
	list-style:none;
}
div.submenu {
	background:#E5E5E5;
	position:absolute;
	visibility:hidden;
	left:150px;
}
div.submenu ul {
	float:left;
	margin-left:5px;
}
#subfila1 {top:0px;}
#subfila2 {top:20px;}
#subfila3 {top:40px;}

div.nueva {
	float:left;   */esta capa sera la nueva ubicada a la izquierda del menu*/
}
</style>
<script language="JavaScript">
function menu(op,capa)
{
  var valor = document.getElementById(capa);
  if (op == 1) { valor.style.visibility="visible"; } else { valor.style.visibility="hidden"; }
}
</script>
</head>
<body>
<div class="menu">
  <ul>
    <li><a href="fila1.htm" onMouseOver="menu(1,'subfila1')" onMouseOut="menu(2,'subfila1')">FILA 1</a>
      <div id="subfila1" class="submenu">
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
      </div>
    </li>
    <li><a href="fila2.htm" onMouseOver="menu(1,'subfila2')" onMouseOut="menu(2,'subfila2')">FILA 2</a>
      <div id="subfila2" class="submenu">
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
        </ul>
      </div>
    </li>
    <li><a href="fila3.htm" onMouseOver="menu(1,'subfila3')" onMouseOut="menu(2,'subfila3')">FILA 3</a>
      <div id="subfila3" class="submenu">
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
        <ul>
          <li><a href="aaa.asp">SUBFILA 1</a></li>
          <li><a href="aaa.asp">SUBFILA 2</a></li>
          <li><a href="aaa.asp">SUBFILA 3</a></li>
          <li><a href="aaa.asp">SUBFILA 4</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

<div class="nueva">
  <span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
  <span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
  <span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
  <span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
  <span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
  <span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
  <span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
</div

</body>
</html>

Entonces, al ponerle float:left a la capa div.menu, el submenu se muestra mal en el explorer. Como que al ubicarle la nueva capa, ya deja de tener un width:auto y me deja todo en una columna.

Yo lo que quiero es:
1) el menu rojo tenga un ancho de 150 px
2) el submenu que se despliega de cada item rojo, se ajuste automaticamente en columnas tal como me lo corregista anteriormente
3) al lado del menu rojo, ira flotada otra capa (una imagen grande)

Bueno, desde ya muchísimas gracias por la anterior respuesta, se nota que sabes porque nunca se me hubiese ocurrido.

Cualquier otra respuesta será bienvenida.... muchísimas gracias.

cleft · #4 (**permalink**) 22/02/2008, 14:27

Pues, mira, para definirle el ancho de 150px a la capa, seria como lo tenias: width: 150px;
Para colocar los <ul> en columnas, "me parece" que lo ideal seria asignarle width y posicionarlos absolutamente. Eso te conlleva a definirle una class para cada ul.
Bueno, tal vez alguien mas tenga una mejor idea sobre como solventarlo. :)

Jamati · #5 (**permalink**) 22/02/2008, 20:10

Muchas gracias nuevamente Cleft.

Entonces, aparentemente la unica solución sería que a cada <ul> del submenu le asigne una clase distinta. Pero esto mucho no me convence porque si quiero tener 10 filas, en vez de 3 como en el ejemplo, eso significa agregarle al archivo de css 10 clases mas, no ?... porque sería la única forma de posicionar cada <ul> absolutamente.

Mil gracias de ante mano por preocuparte en este tema, y a cualquiera que me pueda ayudar será bienvenido.