El modelo de cajas (box model) establece que el alto de un elemento es igual
a la suma de 'height' + 'padding-top' + 'padding-bottom' + 'border-top' +
'border-bottom' + 'margin-top' + 'margin-bottom'. Si al elemento en cuestión
le añades un borde de 'x' píxeles, por la fórmula anterior la altura
aumentará, por eso se te desplazan el resto de los elementos.
Hay varios "trucos" para evitar esto. Uno de ellos puede ser eliminar esos
píxeles "nuevos", que añades como 'border-bottom' en estado ':hover', de
cualquiera de los atributos mencionados al comienzo de la respuesta,
obteniendo distintos efectos dependiendo de qué atributo sea el modificado,
pero siempre manteniendo la composición "inamovible" (en teoría, pero evita
utilizar los márgenes porque estos tienen un tratamiento especial
dependiendo de los márgenes de elementos contiguos). Otro podría ser
establecer siempre un 'border-bottom', del grosor que quieras, en estado
normal y del color de su fondo ('background-color') con lo cual no se vería
en estado "normal", y cambiarlo de color ('border-bottom-color') en su
estado ':hover'.

Un saludo, David Merino.

On 12/30/05, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
>
> Estimados amigos:
> Es mi primer post en esta lista y a ver si me podeis echar una manilla.
> Estoy haciendo un menú vertical en una web donde quiero poner como efecto
> HOVER el que aparezca un borde BOTTOM en cada una de las opciones del menú.
> Podeis verlos en
> http://www.hostalgranduque.net/habitaciones_confortables.html
> El efecto no queda bien porque cuando paso por encima de una de las
> opciones, el resto se desplaza.
> (Como nota aclaratoria, si pongo el efecto para el borde TOP, eso no
> ocurre)
> A ver si me podeis ayudar porque ya tengo la cabeza que me va a explotar
> Muchas gracias a todos
> >:-)
>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
>
>
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo

Responder a