menu con listas

[cuideru]

Hola, estoy haciendo un menú vertical hecho con listas que me da un problema, veamos:

#menu{margin:0px; padding:0px;}
#menu li{width:217px; height:54px;}

si pongo una celda vacía, sin link: <li></li> respeta el tamaño
pero si pongo un enlace: <li>< a href....></a></li>, el tamaño de la celda aumenta 1 o 2px. ¿Como puedo evitar ésto?

Gracias,
Cuideru

[fer10]

puedes poner el codigo mas extenso?

eso no nos dice mucho

[cuideru]

Gracias por el interés. Este es el código; como digo la lista con link varía su tamaño, pero no veo el motivo.

#menu2 {
list-style:none;
margin-left:300;
padding:0;
}

#menu2 li {
width:217px;
height:54px;
border-style:solid;
border-color:red;
border-width:1px;
}


#menu2 li a.enlaces {
width:217px;
height:54px;
display: block;
position: relative;
}

#menu2 li a.enlaces:hover {
background-color: white;
}

<DIV>

<ul id="menu2">

<li style="margin-bottom:20px;"></li>

<li style="margin-bottom:20px;"><a href="#" class="enlaces"></a></li>

</ul>

</DIV>

[fer10]

yo lo veo igual puedes poner un prinsreen

o ser un poco mas explicito para entender mejor la pregunta, con que navegador experimentas el problema? y pasa con otros ??



ahy un error con ie y las listas a veces necesitas dejar un <a href=""> {espacio}</a> al final del link para que funcione no se si sea este tu caso..

[Mikmoro]

Esto lo puedes solucionar poniendo al selector #menu2 li a.enlaces un height de 52px.
¿A qué se debe? Firefox y creo que el reso (menos IE), al crear una caja asignan el tamaño tomando como referencia height+border+padding, mientras que IE asigna el tamaño del conjunto como height. Me explico mejor:

caja = height 100px
border = 1px (1 arriba y otro abajo = 2px)

Para firefox, esta caja mide 102px, porque la caja sigue midiendo 100px y le suma al conjunto los 2px del borde.

Para IE, el conjunto mide 100px, pero ahora la caja en sí mide 98px, porque lo que hace es que el conjunto siga midiendo lo mismo en global, para lo que le resta al height original el valor de los bordes.

¿Cómo afect esto a tu caso? Tú pones una caja de 54px, y le das un borde de 1px. Luego metes dentro un elemento que nuevamente tiene 54px.

Para firefox no hay problema, porque la caja interior encuentra el espacio real de 54px y se acomoda. Pero como IE ha reducido el interior a 52px para que el conjunto de caja+borde tenga 54px, al meterle un elemento de 54px le hace crecer a la caja contenedora, por lo que ahora mide 54px de la caja interior más los 2px del borde de la exterior.

Pasa exactamente lo mismo con el width, así que width de 215px para tu enlace.

Vamos, yo juraría que es lo que está ocurriendo en tu caso. A mi me ha ocurrido algo parecido en alguna ocasión.

Mikel.

[cuideru]

Lo primero de todo, gracias por vuestro tiempo. A ver si me sé explicar bien:

Tengo un menu vertical de 4 botones hecho con listas, donde los botones son imágenes 217x54. He comprobado que cuando los botones tienen link, el borde que configuré en la lista (lo verás en el código de mi mensaje anterior) se ajusta a la img.

Ok, ahora viene lo curioso. Sustituyo un botón por otra imágen (también 217x54) y no la linko (porque sirve para indicar en qué parte de la web estás). Entonces el borde se amplía 1o2px hacia abajo y dcha, separándose de la imágen. Es como si añadiera padding a la img. (pero observa: padding:0;).

En Firefox se ve correctamente. Es el IE7 el que hace poltergeists.

Gracias de nuevo,
Cuideru.

[Mikmoro]

Imagino que escribías este mensaje mientras yo ponía mi respuesta.

Mikel.

[cuideru]

Es completamente entendible, IE añade esos 2px y Firefox mantiene el aspecto original. Pero el problema que tengo no es ese -creo- puesto que sólo se produce (y ahí está lo más curioso) cuando <li> </li> está linkado. Si le quito el <a href...> se ajusta el borde al botón (insertado como backg-img).

A ver, lo he resuelto por la vía cómoda. Antes el borde lo ponía en CSS y ahora lo pongo en los botones (con Pshp). Se acabó el problema, pero sigo sin saber porqué sucede.

cuideru

[Mikmoro]

Iniciado por Mikmoro

¿Cómo afecta esto a tu caso? Tú pones una caja de 54px, y le das un borde de 1px. Luego metes dentro un elemento que nuevamente tiene 54px.

Ah, disculpa. Pues creo que hay algo de mi respuesta que no estás entendiendo, y que imagino que no has probado.

En IE, la caja ya no mide 54px, sino 52px. Si metes dentro cualquier otro elemento mayor que eso, la caja crecerá para adaptarse al contenido (cosa que no hacen el resto de navegadores). Significa esto que si tú ahora metes un elemento "a", con display block y un tamaño de 54px, la caja que medía 52px se ve agrandada por el link de 54px, y ahora el conjunto mide 56px.
Eso hace que tengas un desborde de 2px de un "li" con link sobre otro sin link. Pero no es por el link; mete cualquier otro elemento al que hayas dado un display block y una altura de 54px y te pasará lo mismo.

¿Has probado lo que te he dicho de reducir el link a 52px por 215px? Es que a mi se me iguala sin ningún problema.

Mikel.

[cuideru]

Lo siento pero no me sale como dices. Si reduzco a 52px en a.enlaces, afecta a la <li> linkada y el problema sucede en la <li> que no lo está. Pongo el código más sencillo de todos para que lo puedas ver:

#menu{
margin:0px;
padding:0px;
list-style:none;
}


#menu li{
width: 217px;
height: 54px; (si lo cambio por 52px, no veo que varíe)
margin-bottom:20px;
padding:0px;
border:1px solid white; (el borde problemático)
}


#menu li a.enlace{
width: 217px;
height: 54px;
display: block;
position: relative;
background-image: url(botones/mando1.jpg);
background-repeat: no-repeat;
}


Ahora hacemos una lista de dos ítems:

<ul id="menu">

<li ><img src="botones/mando1.jpg"></li> (ésta es la img que tiene separación de borde)
<li><a href "#" class="enlace"></a></li> (ésta se ajusta perfectamente)

</ul>

observa ahora lo que pasa con la <li> que no tiene a href



Aguardo tu respuesta.
Cuideru.

[Mikmoro]

Hola, cuideru.
No, lo que yo te digo es justo al revés:

#menu li{
width: 217px;
height: 54px;
margin-bottom:20px;
padding:0px;
border:1px solid white;
}


#menu li a.enlace{
width: 215px;
height: 52px;
display: block;
position: relative;
background-image: url(botones/mando1.jpg);
background-repeat: no-repeat;
}

Es el link el que hace crecer al "li", cuando no queremos que ocurra esto, por lo que, lo que debemos hacer es que el link tenga un tamaño que no obligue a crecer a su contenedor "li".

Pruébalo así y me comentas.

Mikel.

[cuideru]

Hola Mikel, yo entiendo lo que me dices pero no es lo que me sucede. Me gustaría si tienes 1 minuto, copies el código que escribí en mi post anterior para que veas el resultado. Observa que el botón insertado como img dentro de la <li> sin a href... es el que tiene el borde desajustado (la 1ª <li>) Mientras que el botón metido como background-image (2ª <li>) y que está linkado, tiene su borde correcto.

Haz la prueba y verás,
Un saludo y gracias por tu tiempo,
Cuideru

[Mikmoro]

Ah, bueno, pues no es lo que había entendido hasta ahora. Hasta ahora decías:

"si pongo una celda vacía, sin link: <li></li> respeta el tamaño
pero si pongo un enlace: <li>< a href....></a></li>, el tamaño de la celda aumenta 1 o 2px. ¿Como puedo evitar ésto?"

Y luego:

"Gracias por el interés. Este es el código; como digo la lista con link varía su tamaño, pero no veo el motivo."

"puesto que sólo se produce (y ahí está lo más curioso) cuando <li> </li> está linkado."

Es decir, que el que te daba error era el "li" que contenía el link. Eso es lo que entendía.

Bien, como no puedo ver los botones no lo sé con seguridad, pero en este caso, y siguiendo con la explicación en la que te decía que no sólo la etiqueta "a" la que te produciría el efecto de aumento, sino cualquier etiqueta que pusieras dentro del li con ese tamaño, lo que parece evidente es que es la imagen la que tiene un tamaño que hace crecer más de la cuenta el li. Y digo parece, porque desconozco el tamaño que tiene tu imagen del botón.

¿Lo tienes subido a alguna parte para poder verlo? Creo que sería más sencillo.

Mikel.

[cuideru]

Siento la confusión Mikel, me alegro de que me hayas comprendido ahora.
No lo tengo subido aún, pero puedes hacer la prueba con cualquier img.

Hay algo que me queda claro de todo ésto. A la img insertada entre <li></li> se le amplía el borde, mientras que a la misma img. metida como background-image no. Entonces intenté cambiar el tamaño en #menu li pero no me hace caso.

Como me entró curiosidad probé si este desfase con el borde ocurriría también con la etiqueta <span> y comprobé que no. En este caso, las dos img. tenían el borde ajustado.

Un saludo,
Cuideru

[Mikmoro]

La diferencia básicamente es que la imagen insertada ocupa un espacio físico igual a su tamaño, si nada dice lo contrario, pero la imagen como background no ocupa espacio, lo ocupa la caja que lo contenga.

Yo probaría a reducir el tamaño de la imagen 2px por cada lado (vertical y horizontal), o bien a limitarle el tamaño con css

li img {width: 52px;
height: 215px;
}

Mikel.

[cuideru]

He probado a reducir la img. y la img. se deforma pero el borde sigue sin ajustarse. Permíteme insistir en que todo este asunto sucede tan solo en las listas, porque usando la etiqueta <span> no hay ningún problema.

Pruébalo y verás,
Un saludo,
Cuideru

[Mikmoro]

¿Qué temaño exacto tiene tu botón, para que pueda generar uno y probar con tu código?

Mikel.

[cuideru]

217x54, pero puedes probar con cualquier otra img. Simplemente haz un menu vertical con un par de <li>, uno lo linkas (con la img en background) y en el otro insertas la misma img.

Ya me contarás.

Cuideru

[cuideru]

Aporto otra solución que funciona en IE: He creado un estilo que contiene en background-image el botón que no tiene link. De esta manera todos los botones tienen el mismo borde, y por tanto, se ven iguales.

Como digo, en IE va bien, pero en Opera y Firefox se descuadra. No se me ocurre nada más de momento.

Saludos,
Cuideru

[Mikmoro]

Dios, qué fácil hubiera sido poner desde el principio una captura de pantalla:



Al poner tu código pero no meterle nada dentro, veía que tenían diferente tamaño, pero no podía ver qué era lo que ocurría realmente, y es en realidad un histórico fallo de Explorer.

Con este código se soluciona, al menos en Firefox y Explorer:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Lista</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
body { background-color: rgb(255, 204, 255);
margin-top: 20px;
margin-left: 20px;
}
#menu { margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu li { border: 1px solid white;
padding: 0px;
width: 217px;
height: 54px;
margin-bottom: 4px;
display: block;
}
#menu li a.enlace { width: 217px;
height: 54px;
display: block;
position: relative;
background-image: url(boton.jpg);
background-repeat: no-repeat;
}
li img { float: left;
}
  </style>
</head>
<body>
<ul id="menu">
  <li><img style="width: 217px; height: 54px;" alt=""
 src="boton.jpg" hspace="0"></li>
  <li><a href="#" class="enlace"> </a></li>
</ul>
</body>
</html>

No obstante, esto tiene bastante poco que ver con lo que era tu consulta original de los 4 primeros mensajes, por la que te pegué todo el discurso del diferente tratamiento de las cajas y bordes de firefox y explorer.

Mikel.

[cuideru]

Tienes razón, una imágen vale + que mil plabros, pero ésto no me deja insertar imágenes aún.

A ver, he probado tu código, y se elimina el problema del borde. Quise hacer la prueba del algodón y le quité tu margin-bottom: 4px y observa el resultado en ambos navegadores. Se puede corregir el desajuste?

Un saludo,
Cuideru

[Mikmoro]

Ah, pues lo siento, no sabía que no podías poner imágenes.

Siempre el asunto del explorer con los márgenes de la imágenes y cosas de esas es un coñazo tremendo. No sé si definitivamente lo quieres hacer así, mezclando imágenes insertadas con otras en background, o es ya una cuestión de amor propio .

A mi lo único que se me ocurre es usar un comentario condicional para IE y darle una clase al elemento li que llevará imagen incrustada:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Lista</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
body { background-color: rgb(255, 204, 255);
margin-top: 20px;
margin-left: 20px;
}
#menu { margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu li {border: 1px solid white;
padding: 0px;
width: 217px;
height: 54px;
}
#menu li a.enlace { width: 217px;
height: 54px;
display: block;
position: relative;
background-image: url(boton.jpg);
background-repeat: no-repeat;
}
li img { float: left;
}
  </style>
<!--[if IE]>
<style>.imagen {margin-bottom: -4px;}</style>
<![endif]-->
</head>
<body>
<ul id="menu">
  <li class="imagen"><img src="boton.jpg"
 hspace="0"></li>
  <li><a href="#" class="enlace"> </a></li>
</ul>
</body>
</html>

Había puesto ese margen antes para que con la distancia se viera bien la diferencia, y no sabía que querías que fueran pegadas.

A ver si esto te sirve de algo, aunque igual hay que concretar en el comentario qué versión de IE, porque no sé si en el 7 también se producía este problema.

Mikel.

[cuideru]

Enhorabuena, el problema del borde rebelde se ha resuelto (y con ello muchos quebraderos de mi cabeza) El siguiente asunto es: tengo los tres botones en sus <li> correspondientes. 2 están enlazados y uno no. Algo tipo:

home

gallery

mail

Cuando salto de un apartado a otro, el menú no queda fijo en IE (sí en FFox), se mueve varios píxeles, y he comprobado que es debido a la imagen que no es rollover. He probado a variar márgenes en el condicional de IE que apuntaste, pero no he conseguido que se quede quieto. Como se podría resolver ésto?

[Mikmoro]

¿Has añadido algún :hover? Si es así, ¿lo has añadido también en el condicional?

A ver ese código

Mikel.

[cuideru]

Lo que se mueve es la img no linkada. Lo hace sólo en IE, por tanto sólo puedo mover parámetros dentro del condicional. Ahora mismo no veo una solución, pero estoy quemado con el dichoso menú. Mañana sigo

Cuideru

[Mikmoro]

¿Por qué quieres poner una imagen insertada en el li (la no linkada), y las otras como background? ¿hay alguna razón en especial?

Mikel.

[cuideru]

Buen día, ya estamos otra vez acá. El motivo es que la img. no linkada indica la sección en la que estás. Me explico:

home

gallery

mail


Ok, te cuento lo que se me ocurrió hoy y que funciona a medias:

<ul>
<li>home</li>
<li></li>
<li>gallery</li>
<li></li>
<li>mail</li>
</ul>

supongamos que esa lista mide en vertical 200px. En IE se ve bien, en FFox se descuadra (porque FFox disminuye su tamaño considerablemente). ¿Qué es lo que conseguí solucionar? Ayer, en lugar de introducir una <li> de separación, utilizaba margin-bottom y sucedía que al pasar de una pestaña a otra, el menú en IE se movía en función de la img. que no estaba linkada. Al usar hoy una <li> como elemento separador, por fin el menú se queda fijo en todos los navegadores.

Alguna solución para que la lista ahora se vea de igual tamaño en IE y en FFox?

Cuideru

[Mikmoro]

Perdoname pero es que sigo sin ver para qué necesitas que el botón que indica la página en la que estás esté incrustado en lugar de estar como fondo.

Esta es la clásica forma de cómo se suele hacer, diferenciando en el que estás con una clase:

http://www.menoslobos.com/mikel/foro...a/pagina1.html

Esta forma ni se mueve, ni necesita elementos vacíos, ni comentarios condicionales ni nada. No sé si te servirá.

Mikel.

[cuideru]

Entiendo lo que dices. No me gusta que al pasar el ratón por encima del activo, parezca que te llevará a otro lado. Imagina por un momento, si tuvieras algo en flash en esa página, se cargaría cada vez que lo cliken.

Yo hice ayer un estilo distinto que tenía como background-image la img. del botón (sin link) que indica la página. El menu en IE va bien, en FFox se descuadra.

Luego te apunto el código a ver qué solución puede tener.

Y gracias por tu tiempo,
Cuideru

[cuideru]

Mira, ésta es la mejor solución que encontré:

Código:

#menu2 {

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


#menu2 li {
	
	margin:0px;	
}

#menu2 li a.enlaces { 
	width: 219px;
	height: 56px;
	display: block;
	position: relative;
	background-image: url(botones/gal80.jpg);
	background-repeat: no-repeat;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;
}


#menu2 li a.enlaces:hover { 
	background-color: transparent;
	background-image: url(botones/gal80b.jpg);
	background-repeat: no-repeat;
}

#menu2 li a.enlaces2 { 
	width: 219px;
	height: 56px;
	display: block;
	position: relative;
	background-image: url(BOTONES/gal90.jpg);
	background-repeat: no-repeat;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;
}


#menu2 li a.enlaces2:hover { 
	background-color: transparent;
	background-image: url(BOTONES/gal90b.jpg);
	background-repeat: no-repeat;
}


	
#menu2 li a.enlaces3 { 
	width: 219px;
	height: 56px;
	display: block;
	position: relative;
	background-image: url(BOTONES/gal00.jpg);
	background-repeat: no-repeat;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;
}


#menu2 li a.enlaces3:hover { 
	background-color: transparent;
	background-image: url(botones/gal00b.jpg);
	background-repeat: no-repeat;
}


#celda{
	width:219;
	height:53;
	background-color:#71352b;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;	
}


#celda3{

	width:219px;
	height:56px;
	background-image:url(botones/gal80b.jpg);
	background-repeat:no repeat;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;
}

.cajali{
	width:230;
	height:350;
	border-color:blue;
	border-style:solid;
	border-width:0px;
	top:50px;
	float:left;	

}

</style>
</HEAD>

<body>

<DIV class="cajali">

      <ul id="menu2">

<li id="celda" style="margin-bottom:19px;"></li>
<li id="celda3"style="margin-bottom:19px;"></li>
<li style="margin-bottom:19px;"><a href="gal90.htm" class="enlaces2"></a></li>
<li style="margin-bottom:19px;"><a href="gal00.htm" class="enlaces3"></a></li>
<li id="celda"></li>

      </ul>
</DIV>

</body>
</HTML>

Donde .celda3 es un estilo creado para contener la img de fondo del botón que indica la página. Como ves no es "pinchable" puesto que no lleva link.

¿Cual es el problema de este código? Sumando todas las cantidades en vertical, salen 350px, y de hecho lo metí en una caja (.cajali) de height:350px;. Ok, frente a este menú hice otra caja de 350px que contiene fotos. En IE está bien cuadradas ambas cajas. En FFox el menú llega más abajo (10px quizá) que la caja de las fotos, aunque ambos tienen 350px.

Cuideru