Igual longitud para pestañas de menú

[Ekbrilo]

No sé qué hago mal, pero las pestañas de un menú de navegación (dispuesto como lista horizontal) me salen de tamaño ditinto según la extensión del texto que llevan. ¿Cómo soluciono esto con CSS?

[pzin]

Con width lo solucionas, aunque sin ver código alguno es difícil decir algo.

[DragonX]

Bonez tiene razón, varia los width y vas a ver los cambios, pero también es difícil saber si ver el código.

[Ekbrilo]

De acuerdo, probaré con los width a ver qué pasa.

[Ekbrilo]

Bueno, ya que se precisa el código para ser más precisos, ahí va. El código en cuestión fue diseñado por Eric Meyers.


HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}

#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}

Al escribir el texto de los enlaces y ser éstos desiguales, el ancho de las pestañas también lo es, y el efecto resulta poco estético.

[JavierB]

Hola Ekbrilo

A ver si esto te ayuda:

Código:

#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
width:120px;
display:block;
float:left;
margin-left:5px;
}

Saludos,

[Ekbrilo]

Por cierto, me olvidaba de mencionar que el código está tomado de la extensa lista que se ofrece desde http://xyberneticos.com/index.php/20...a-tus-disenos/

[Ekbrilo]

Gracias, Javier, eso es rapidez de respuesta Bien, tomo nota de tu sugerencia y ya comentaré el resultado.

Un saludo

[blanchrt]

Bueno, Ekbrilo, a la espera de que digas si te funcionó (y ya que citáis a san Eric Meyer), me tengo que reservar.

Si no, simplemente te diría que es imposible que las pestañas de un menú horizontal tengan la misma anchura, porque para conseguir eso le has dicho que se comporte como un elemento "inline" (display: inline) y una característica de los elementos inline es que su tamaño viene determinado por el (tamaño) de su contenido.

Así que, si te funciona, ¡dínoslo enseguida!, pero si no, no le des más vueltas: es así.

Un saludo,
Paco Blanchart

[Ekbrilo]

Ciertamente algo raro hay en el código, Blanchrt, porque si bien he conseguido esa igualdad de anchura, la alineación sufre extrañas perturbaciones (aunque no recuerdo ahora mismo si alguna de ellas persiste al margen de las modificaciones anchurosas).

Para empezar, en Firefox la quinta y última pestaña aparece no en su lugar correspondiente sino justo bajo la primera (que, como no podía ser de otra manera, es la de "Inicio"). En el espacio que deja libre esa quinta pestaña errática sólo se ve una delgada línea blanca superior.

Por supuesto, IE hace honor a su fama de díscolo, y muestra las pestañas dentro de lo que parece un div al que le sobra por lo menos la mitad del espacio para albergar el menú de marras, y que tiene el mismo color de fondo que el div contenedor que sirve de recipiente a todo el contenido de la página.

Como quizá esto último tenga alguna relación con el código utilizado, lo pongo aquí por si acaso:

<style type="text/css">
body {background: gray; margin-top: 65px; margin-bottom: 120px;}

DIV {background: white; whidth: 735px; position: relative; left; left: 290px; top: 70px; margin-top: 35px;}

H1 {font-size: 24pt; font-weight: bold; font-family: Courier; color: green; text-align: center;}

H3 {font-size: 14pt; font-weight: bold; font-family: Arial; color: black; text-align: justify; text-indent: 1cm; margin_top: 20px; margin-left: 20px; margin-botton: 20px;}

E inmediatamente a continuación vendría el código del menú, en este caso con la modificación propuesta por Javier B.

Aprovecho para comentar que usando un archivo CSS externo para varios documentos html no he conseguido que aparezca el color elegido por el body ("gray" en este caso).

Saludos

[Ekbrilo]

¿Quizá tiene algo que ver con la anchura del div que le precede? Agradecería cualquier sugerencia, porque el dichoso menú de navegación se me resiste desde hace tiempo...

[Ekbrilo]

Bueno... si ese menú es incorregible, ¿alguien conoce alguno que funcione sin problemas? (Un menú CSS horizontal, quiero decir...)

[Kamarada_Malkav]

El problema de que la última pestaña se mueva a la linea de abajo me parece que es lo que dices, el width de la capa que hace de contenedor del menú es más pequeño que el width sumado de las pestañas, con lo que el último lo pone en la linea siguiente.

Prueba a darle un poco más de anchura si puedes a esa capa.

Yo tengo creado uno que tiene submenus, pero la parte inicial creo que te servirá:

Código:

#menu{
	background:			#999999;
	position:			relative;
	top:				55px;
	left:				285px;
	#left:				125px; /*IE 7.0*/
	_left:				125px; /*IE 6.0*/
	width:				388px;
	padding:			0px 0px 0px 0px;
	float:				none;
	background-color:	#ffffff;
	z-index:			1;
}

ul {
	padding: 			0;
	margin: 			0;
	list-style: 		none;
}

li {
	float: 				left;
	position: 			relative;
	width: 				97px;
	font: 				bold italic 1px arial;
}

ul li a{
	display: 			block;
	text-decoration:	none;
	color: 				#710000;
	font-size:			11px;
	background: 		#EBEBEB; /* IE6 Bug */
	padding: 			5px;
	border: 			1px solid #710000;
	border-bottom: 		1px solid #710000;
	border-top: 		1px solid #000;
	cursor:				default;
}

El HTML sería una lista sencilla de los elementos que tu quisieras dentro de un div:

Código:

<div id="menu">
				<ul id="nav">
						<li><a>Opcion 1</a></li>
						<li><a>Opcion 2</a></li>
				</ul>
			</div>

Y las posiciones y anchos a gusto del consumidor. Como verás el IE te va a dar problemas (para no variar).

Saludos.

[Ekbrilo]

Agradecido, Kamarada_Malkav, probaré ese código y ya postearé más adelante qué tal me fue la cosa.

Gracias y un saludo.