Foros del Web » Creando para Internet » CSS »

Menu con listas

Estas en el tema de Menu con listas en el foro de CSS en Foros del Web. Hola! es la primera vez escribo en este foro. Gracias de antemano por la ayuda que me puedan prestar. Tengo un menu basado en una ...
  #1 (permalink)  
Antiguo 17/11/2009, 02:03
 
Fecha de Ingreso: noviembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Menu con listas

Hola! es la primera vez escribo en este foro. Gracias de antemano por la ayuda que me puedan prestar.

Tengo un menu basado en una lista con el siguiente codigo:

<td class="menu">
<ul class="menuList">
<li><strong><a href="/bla/">bla bla bla</a></strong></li>
<li>
<ul class="submenuList">
<li><a href="/lelele">lelele</a></li>
<li><a href="lilili">lilili</a></li>
</ul>
</li>
</ul>
</td>


El css que lo controla es:


.menu ul{
list-style-type:none;
margin:0px;
padding:0px;

}

.menuList li{
list-style-type:none;
margin:0px;
padding:0px;
}

.menuList li a, .menuList1 li a:focus{
display: block;
background-color: #AD2624;
border: 1px solid #FFFFFF;
margin: 0px;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 10px;
padding: 3px;
}

ul.menuList li ul.submenuList{
margin:0px;
padding:0px;
list-style-type:none;
}

.menuList li a:hover {
background-color: #F2E4E4;
border: 1px solid #AD2624;
color:#AD2624;
}


.submenuList li a, .submenuList1 li a:focus {
display: block;
background-color: #E6E6E6;
border: 1px solid #FFFFFF;
margin: 0;
text-decoration: none;
color: #AD2624;
font-family: Verdana,Arial,Helvetica;
font-size: 10px;
padding: 3px;

}


Lo que quiero es que me salga un menu con cuadrados uno debajo de otro. En Firefox funciona perfectamente pero en internet explorer me deja un margen entre bla bla bla y lelele como si hubiera un <br>.

Alguien sabe donde puede estar el fallo??
Gracias
  #2 (permalink)  
Antiguo 17/11/2009, 03:06
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Menu con listas

el aparente espacio se debe a los bordes de un pixel.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 17/11/2009, 08:42
 
Fecha de Ingreso: noviembre-2009
Mensajes: 11
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Menu con listas

<td class="menu">
<ul class="menuList">
<li><strong><a href="/bla/">bla bla bla</a></strong></li>
<li style="display:inline;">
<ul class="submenuList">
<li><a href="/lelele">lelele</a></li>
<li><a href="lilili">lilili</a></li>
</ul>
</li>
</ul>
</td>

Esto soluciona tu problema.

El block aplicado a ese li hace que en ie7 guarde un espacio (como si fuese un <br />).
  #4 (permalink)  
Antiguo 17/11/2009, 09:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu con listas

¿Tienes un doctype declarado y usas algún tipo de reset + css?

No se puede entrar en muchos detalles porque falta código css (si la lista interior es un desplegable)

Chotuno: quiere que se muestren en vertical ("uno debajo de otro") según creí entender yo. Y si estamos en un foro de css utilizando css, queda incongruente sembrar estilos entre las etiquetas del body.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 17/11/2009, 11:47
 
Fecha de Ingreso: noviembre-2009
Mensajes: 11
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Menu con listas

Cita:
Iniciado por kseso? Ver Mensaje
Chotuno: quiere que se muestren en vertical ("uno debajo de otro") según creí entender yo. Y si estamos en un foro de css utilizando css, queda incongruente sembrar estilos entre las etiquetas del body.
En vertical quedan.
Y lo de el estilo en medio del html ya se que es incorrecto pero es la posible solución que encontré, depende ya de él sustituirlo por una clase o buscar una alternativa.

Saludos.
  #6 (permalink)  
Antiguo 17/11/2009, 12:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu con listas

Cita:
Iniciado por chotuno Ver Mensaje
<li style="display:inline;">
Cita:
Iniciado por chotuno Ver Mensaje
En vertical quedan.
¿Seguro?
A no ser que algún ancestro tenga definido el width y que su tamaño las obligue a bajar a la línea siguiente es algo improbable que el valor "inline" por sí mismo consiga un apilamiento en la vertical. Al menos hasta donde yo recuerdo.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 17/11/2009, 16:24
 
Fecha de Ingreso: noviembre-2009
Mensajes: 11
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Menu con listas

Tienes razón pero a veces más vale no buscar la lógica xD si funciona funciona..
Sólo puedo decir que lo probe y lo vi bien, tal cual lo he puesto (añadiendo el resto del código pertiente claro está - <table> etc.)
  #8 (permalink)  
Antiguo 17/11/2009, 17:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu con listas

Cita:
Iniciado por chotuno Ver Mensaje
Tienes razón pero a veces más vale no buscar la lógica xD si funciona funciona..
Sinceramente, ni entiendo ni comprendo semejante planteamiento. Además de encontrarlo de todo punto reprobable.
Pero eso explica muchas de las preguntas y actitudes de estos foros (y las reacciones a ciertas respuestas).

Pero nada, si tu estás a gusto con esa filosofía, a mi me es indiferente por completo.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 18/11/2009, 01:30
 
Fecha de Ingreso: noviembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Respuesta: Menu con listas

Veo que se ha originado una especie de debate. Agradezco a todos vuestras respuesta, ya solucione parte del codigo pero ahora resulta que el menu me funciona perfectamente en IE7, Firefox, Opera, Safari y Chrome, el unico donde no me funciona es en IE6. No tengo ni idea de el porque.

Mi intención es que se vea cada botón uno debajo del otro, sin margenes ni viñetas ni nada, simplemente como sucesiòn.

alguien sabe porque en IE6 no se ve bien?, me sale un espacio debajo de cada li dentro de submenuList.

alguna idea? hay algo en mi codigo incompatible con IE6???

gracias.

Aqui dejo el codigo:

CSS............................................... ...................

.menu ul{
list-style-type:none;
margin:0px;
padding:0px;
}

.menuList li a, .menuList1 li a:focus{
display: block;
background-color: #AD2624;
border: 1px solid #FFFFFF;
margin: 0px;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 10px;
padding: 3px;
}

.menuList li a:hover {
background-color: #F2E4E4;
border: 1px solid #AD2624;
color:#AD2624;
text-decoration: none;
}


.submenuList li a, .submenuList1 li a:focus {
display: block;
background-color: #E6E6E6;
border: 1px solid #FFFFFF;
margin: 0;
text-decoration: none;
color: #AD2624;
font-family: Verdana,Arial,Helvetica;
font-size: 10px;
padding: 3px;

}


html.............................................. ...................
<td class="menu">
<ul class="menuList">
<li><strong><a href="/blablabla">blablabla</a></strong>
<ul class="submenuList">
<li><a href="lalala">lalala/a></li>
<li><a href="lelele">lelele</a></li>
<li><a href="lilili">lilili</a></li>
</ul>
</li>
</ul>
</td>
  #10 (permalink)  
Antiguo 18/11/2009, 02:09
 
Fecha de Ingreso: noviembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Respuesta: Menu con listas

SOLUCIONADO:

En el css he puesto:



/* IE6 Only */

*html .menuList li{
display:inline;
}

y funciona perfectamente. Muchisimas gracias a todos por vuestra atención.
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




La zona horaria es GMT -6. Ahora son las 05:28.