Foros del Web » Creando para Internet » CSS »

Igual longitud para pestañas de menú

Estas en el tema de Igual longitud para pestañas de menú en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/07/2007, 12:24
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Igual longitud para pestañas de menú

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?
  #2 (permalink)  
Antiguo 18/07/2007, 12:27
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2099
Re: Igual longitud para pestañas de menú

Con width lo solucionas, aunque sin ver código alguno es difícil decir algo.
  #3 (permalink)  
Antiguo 18/07/2007, 12:47
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Igual longitud para pestañas de menú

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.
  #4 (permalink)  
Antiguo 18/07/2007, 12:54
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Igual longitud para pestañas de menú

De acuerdo, probaré con los width a ver qué pasa.
  #5 (permalink)  
Antiguo 19/07/2007, 11:52
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Igual longitud para pestañas de menú

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.
  #6 (permalink)  
Antiguo 19/07/2007, 11:59
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Igual longitud para pestañas de menú

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,
  #7 (permalink)  
Antiguo 19/07/2007, 12:02
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Igual longitud para pestañas de menú

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/
  #8 (permalink)  
Antiguo 19/07/2007, 12:05
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Igual longitud para pestañas de menú

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

Un saludo
  #9 (permalink)  
Antiguo 19/07/2007, 18:24
 
Fecha de Ingreso: junio-2002
Ubicación: Madrid, España
Mensajes: 22
Antigüedad: 15 años, 5 meses
Puntos: 2
Re: Igual longitud para pestañas de menú

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
  #10 (permalink)  
Antiguo 20/07/2007, 05:47
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Igual longitud para pestañas de menú

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
  #11 (permalink)  
Antiguo 23/07/2007, 11:44
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Igual longitud para pestañas de menú

¿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...
  #12 (permalink)  
Antiguo 08/08/2007, 12:46
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Igual longitud para pestañas de menú

Bueno... si ese menú es incorregible, ¿alguien conoce alguno que funcione sin problemas? (Un menú CSS horizontal, quiero decir...)
  #13 (permalink)  
Antiguo 09/08/2007, 01:29
Avatar de Kamarada_Malkav  
Fecha de Ingreso: octubre-2005
Ubicación: Madrid
Mensajes: 70
Antigüedad: 12 años, 1 mes
Puntos: 0
Re: Igual longitud para pestañas de menú

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.
  #14 (permalink)  
Antiguo 09/08/2007, 12:08
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Igual longitud para pestañas de menú

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

Gracias y un saludo.
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 17:46.