Menú horizontal en Firefox
2 seguidores
Problema: Quiero hacer una botonera horizontal con listas. Y cada botón quiero que mida lo mismo, al margen del texto que lleve. Si el texto es corto todo sale bien tanto en Iexplorer como en Firefox. Pero cuando unos botones tienen más longitud de texto que otros, en IE se puede jugar con el padding para obtener dos líneas de texto, pero el Firefox parece ignorarlo, con lo que descuadra la barra navegadora.
Y todo ello dentro de un contenedor para que quede centrado en la página. Con lo que me gustaría además separar los botones entre ellos sin perder la simetría.
¿Hay solución? Gracias
orange
Dale un width a los LIs y tendrás un tamaño fijo. Si el texto sobrepasa ese tamaño discurrirá en líneas.
regedito
Gracias orange.
Abusando de tu sabiduría, ¿podrías decirme cual es la manera más correcta de alinear en el centro una lista horizontal? Yo lo intento así pero no acierto. En FF no funciona y en IE no hace centrado exacto.
<code>#menuh {font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#menuh ul, li {list-style-type: none;}
#menuh ul {margin: 0 auto; padding: 0 ;}
#menuh li {float: left; width: 130px;}
#menuh a {text-decoration: none; color: #000000; text-align: center;
background-color: #CCCCCC; display: block;
border: 1px solid #000000; padding-right: 10px;
padding-left: 10px; line-height: 14px; margin-right: 5px;
margin-left: 5px;}</code>
Un Saludo.
orange
Define un width para #menuh ul El método de centrado con los margins funciona bien*, pero tienes que definirle un width (el ancho total del menú)
* De Explorer 6 para arriba, no funciona en Explorer 5.0 ni 5.5 de Windows
regedito
Derrotado y cabizbajo abandono la contienda. Tras mirar y copiar varios ejemplos encontrados por internet no he conseguido superar el problema. El centrado que consigo con IE no es el deseado, pues he comprobado varias capturas en Photoshop y no coinciden los márgenes como debieran. Con FF no consigo ni siquiera que los rellenos me provoquen un salto de línea en botones con texto más largo. Sin duda, el error estará en la ubicación de código en lugares erróneos...pero por hoy es suficiente.
Gracias por tu ayuda.