Re: [Ovillo] problema con márgenes negativos en IE
Grácias Nicolás, lo acabo de probar y tampoco va (en IE, en Firefox sigue
viéndose correctamente)
Por cierto que ahora me doy cuenta que al pegar antes el código html sólo se
ha pegado el contenido.
Lo vuelvo a poner:
div id=navcontenidor
div id=navlist
div class=sizer
ul id=nav
li id=activea href=# id=current22/a/li
lia href=#Item two/a/li
lia href=#Item three/a/li
lia href=#Item four/a/li
lia href=#Item five/a/li
li/li
/ul
/div
/div
/div
Hola Nuria mira a ver si añadiendo esto sale lo que tu quieres
#navlist ul
{
margin-left:-60px!important;
margin-left:0px;
position: relative;
z-index: 2;
}
Núria Ramoneda [EMAIL PROTECTED] escribió:
Estoy tratando de hacer una versión vertical de un menú horizontal que
aparece en listamatic [1].
El caso es que el menu en Firefox se ve perfectamente, pero en IE sólo se ve
la mitad, debido a que no muestra lo que hay más allà del margen negativo
que utilizo para crear la línia (borde) entre los elementos de la lista. He
estado mirando sobre el tema y probando pero no encuentro la solución y
quizás sea porqué no acabo de entender cómo manejar el problema (cierto) o
porque no hay solución.
Un ejemplo en: http://www.filsalvent.net/provamenuvertical.htm
En fin, si alguien tiene una idea o una referencia en dónde pueda encontrar
ideas... se agradece de antemano.
Núria
Aqui va la css:
*{margin:0;padding:0;}
#navcontenidor{
margin-left: 50px;
}
#navlist
{
width:60px;
margin-left: 60px;
padding:10px 0 10px 0;
border-left: 3px solid #00A0D8;
z-index: 1;
}
#navlist ul
{
margin-left:-60px;
position: relative;
z-index: 2;
}
#navlist li
{
list-style-type: none;
text-align: center;
margin-bottom:20px;
overflow: visible;}
#navlist li a
{
padding: 1px 7px;
color: #00A0D8;
background-color: #fff;
border: 2px solid #ccc;
text-decoration: none;
font-weight:bold;
display:block;
}
#navlist li a:hover
{
color: #000;
border: 2px solid #00A0D8;
border-top: 2px solid #00A0D8;
border-bottom: 2px solid #00A0D8;
}
I aquí el código xhtml:
22
Item two
Item three
Item four
Item five
[1] http://css.maxdesign.com.au/listamatic/horizontal19.htm
___
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] problema con márgenes negativos en IE
Pero ahora que es lo que te sucede con lo anterior lo que hacíamos era anular
para el ie el valor negativo del margin.
Núria Ramoneda [EMAIL PROTECTED] escribió: Grácias Nicolás, lo acabo de
probar y tampoco va (en IE, en Firefox sigue
viéndose correctamente)
Por cierto que ahora me doy cuenta que al pegar antes el código html sólo se
ha pegado el contenido.
Lo vuelvo a poner:
22
Item two
Item three
Item four
Item five
Hola Nuria mira a ver si añadiendo esto sale lo que tu quieres
#navlist ul
{
margin-left:-60px!important;
margin-left:0px;
position: relative;
z-index: 2;
}
Núria Ramoneda escribió:
Estoy tratando de hacer una versión vertical de un menú horizontal que
aparece en listamatic [1].
El caso es que el menu en Firefox se ve perfectamente, pero en IE sólo se ve
la mitad, debido a que no muestra lo que hay más allà del margen negativo
que utilizo para crear la línia (borde) entre los elementos de la lista. He
estado mirando sobre el tema y probando pero no encuentro la solución y
quizás sea porqué no acabo de entender cómo manejar el problema (cierto) o
porque no hay solución.
Un ejemplo en: http://www.filsalvent.net/provamenuvertical.htm
En fin, si alguien tiene una idea o una referencia en dónde pueda encontrar
ideas... se agradece de antemano.
Núria
Aqui va la css:
*{margin:0;padding:0;}
#navcontenidor{
margin-left: 50px;
}
#navlist
{
width:60px;
margin-left: 60px;
padding:10px 0 10px 0;
border-left: 3px solid #00A0D8;
z-index: 1;
}
#navlist ul
{
margin-left:-60px;
position: relative;
z-index: 2;
}
#navlist li
{
list-style-type: none;
text-align: center;
margin-bottom:20px;
overflow: visible;}
#navlist li a
{
padding: 1px 7px;
color: #00A0D8;
background-color: #fff;
border: 2px solid #ccc;
text-decoration: none;
font-weight:bold;
display:block;
}
#navlist li a:hover
{
color: #000;
border: 2px solid #00A0D8;
border-top: 2px solid #00A0D8;
border-bottom: 2px solid #00A0D8;
}
I aquí el código xhtml:
22
Item two
Item three
Item four
Item five
[1] http://css.maxdesign.com.au/listamatic/horizontal19.htm
___
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
__
Correo Yahoo!
Espacio para todos tus mensajes, antivirus y antispam ¡gratis!
Regístrate ya - http://correo.yahoo.es
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] problema con márgenes negativos en IE
Verás, ahora se ve todo el texto del elemento (antes sólo la mitad) pero el borde queda a la izquierda al ser margin=0 para IE. He subido la modificación para que veas el efecto ahora: http://www.filsalvent.net/provamenuvertical.htm Puede que ésto que en FF o Opera se ve bien no se pueda conseguir con IE. No? N. de nicolas carrera Enviado el: martes, 13 de junio de 2006 16:08 Pero ahora que es lo que te sucede con lo anterior lo que hacíamos era anular para el ie el valor negativo del margin. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] problema con márgenes negativos en IE
Prueba tal vez con un float:
#navlist ul {
margin-left: -60px;
float: left;
position: relative;
}
On 6/13/06, Núria Ramoneda [EMAIL PROTECTED] wrote:
Verás, ahora se ve todo el texto del elemento (antes sólo la mitad) pero el
borde queda a la izquierda al ser margin=0 para IE.
He subido la modificación para que veas el efecto ahora:
http://www.filsalvent.net/provamenuvertical.htm
Puede que ésto que en FF o Opera se ve bien no se pueda conseguir con IE.
No?
N.
de nicolas carrera
Enviado el: martes, 13 de junio de 2006 16:08
Pero ahora que es lo que te sucede con lo anterior lo que hacíamos era
anular para el ie el valor negativo
del margin.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
--
Manuel Razzari
YO - http://ultimorender.com.ar/funkascript
CVAM - http://conVistaAlMar.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] problema con márgenes negativos en IE
En primer lugar dar gracias por lo mucho que he aprendido en esta lista.
Solo decir que creo que en principio para que una ul se coloque en
posicion igual en distintos navegadores a parte de los margin hay que tener
en cuenta los padding. Todo a cero en un principo y de ahi a hacer calculos
y hacks si fueran necesarios.
Gracias
2006/6/13, Manuel Razzari [EMAIL PROTECTED]:
Prueba tal vez con un float:
#navlist ul {
margin-left: -60px;
float: left;
position: relative;
}
On 6/13/06, Núria Ramoneda [EMAIL PROTECTED] wrote:
Verás, ahora se ve todo el texto del elemento (antes sólo la mitad) pero
el
borde queda a la izquierda al ser margin=0 para IE.
He subido la modificación para que veas el efecto ahora:
http://www.filsalvent.net/provamenuvertical.htm
Puede que ésto que en FF o Opera se ve bien no se pueda conseguir con
IE.
No?
N.
de nicolas carrera
Enviado el: martes, 13 de junio de 2006 16:08
Pero ahora que es lo que te sucede con lo anterior lo que hacíamos era
anular para el ie el valor negativo
del margin.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
--
Manuel Razzari
YO - http://ultimorender.com.ar/funkascript
CVAM - http://conVistaAlMar.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] problema con márgenes negativos en IE : solucionado
Poniendolo en float tampoco va, incluso entonces en FF se pierde el borde.
Pero bueno, rascando aquí y allá y probando más he dado con la solución (la
habia, pués).
He tenido que añadirle al UL un width:100% (lo tenia antes en un div de
clase, pero no le gustaba)
También añadir el mismo ancho dado al contenedor (navlist en este caso y
100px) al li, para compensar el poner el a en display:block, lo que hace que
el ancho de los li quede a merced del texto introducido.
Por otro lado, para que la línea quede centrada respecto a los li, hay que
poner como margen izquierdo del navlist la mitad del width, y en el ul poner
esa misma mitad en negativo.
En fin, grácias a todos por la colaboración.
Ahí queda el menu, por si alguien le quiere echar un ojo:
http://www.filsalvent.net/provamenuvertical.htm
Núria
de Manuel Razzari
Prueba tal vez con un float:
#navlist ul {
margin-left: -60px;
float: left;
position: relative;
}
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
