Re: [Ovillo] Porque no me funciona el RollOver
Como no tengo la imagen no se bien como va pero prueba con esto
ul#menu {
list-style-type: none;
margin: 0;
padding: 0;
float:left;
}
li a {
display:inline;
}
li#historia {
background:url(imagenes/16-arrow-right.png) no-repeat;
display:inline;
padding-left:25px;
}
el padding-left es para separar el texto si la imagen fuera como un bullet si
la imagen es solo fondo no lo pongas, pero prueba a mi me funciona almenos se
pone en linea y sale el bullet en todos los li.
por cierto has puesto el id historia y los demas li tienen otro id, miralo
ya me cuentas, saludos
Reynier Perez Mira [EMAIL PROTECTED] escribió:
Hola he probado pero no me sale como debería ser. Este es mi HTML (reducido)
para no hacer el correo SPAM ni nada ilegible:
Historia
Objetivos
Eventos
Cursos
Luego el CSS me queda así:
ul#menu {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
}
li#historia {
text-indent: -100em;
background-image: url(images/grmnet_r2_c2.gif);
float: left;
}
Ahora para explicar un poco. Lo de display:block en li a me queda con
dudas. En este mismo mensaje Santiago me explicaba que poniendo esa propiedad
en esa forma el LI se adaptaría al tamaño de la imagen por lo que no debería
especificar width ni height que era como lo tenía anteriormente. Corrijanme
si me equivoco.
Ahora el li#historia lo puse así siguiendo las orientaciones de stripTM. Ya que
me indica que así es como debería hacerlo para poder hacer el RollOver.
El caso es que la imagen del li#historia no sale por ninguna parte y la ruta
esta correcta porque ya la he comprobado. Será el flota:left ese que le puse?
Pues bueno debe ir porque tengo que poner un LI al lado de otro de forma tal
que me quede un menú horizontal.
Alguna idea de que animalada es la que estoy cometiendo ahora?
Salu2
--
ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la
estupidez humana. Y del Universo no estoy seguro.
___
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
-
LLama Gratis a cualquier PC del Mundo.
Llamadas a fijos y móviles desde 1 céntimo por minuto.
http://es.voice.yahoo.com
___
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] Porque no me funciona el RollOver
Reynier Perez Mira escribió:
Hola he probado pero no me sale como debería ser. Este es mi HTML (reducido)
para no hacer el correo ...
li#historia {
text-indent: -100em;
background-image: url(images/grmnet_r2_c2.gif);
float: left;
}
Ahora para explicar un poco. Lo de display:block en li a me queda con
dudas. En este mismo mensaje Santiago me explicaba que poniendo esa propiedad
en esa forma el LI se adaptaría al tamaño de la imagen por lo que no debería
especificar width ni height que era como lo tenía anteriormente.
Corrijanme si me equivoco.
Ahora el li#historia lo puse así siguiendo las orientaciones de stripTM. Ya
que me indica que así es como debería hacerlo para poder hacer el RollOver.
El caso es que la imagen del li#historia no sale por ninguna parte y la ruta
esta correcta porque ya la he comprobado. Será el flota:left ese que le
puse? Pues bueno debe ir porque tengo que poner un LI al lado de otro de
forma tal que me quede un menú horizontal.
Alguna idea de que animalada es la que estoy cometiendo ahora?
Tienes que definir el tamaño del li#historia que será el tamaño de la
imagen que vas a poner de fondo, te añado un color para que aunque no
tengas la imagen lo veas:
ul#menu {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
float: left;
text-indent: -100em;
}
li#historia {
background-image: url(images/grmnet_r2_c2.gif);
background-color:red;
width: 120px;
height: 50px;
}
--
Saludos -=stripTM=-
___
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] Porque no me funciona el RollOver
Reynier Perez Mira escribió:
Bueno ahora el hecho del RollOver. Si se dieron cuenta en el HTML que les
envie lo que tengo es una imagen con un vínculo en cada elemento LI, por
ejemplo aquí:
li class=li0 id=li0a href=#img src=img/img_r2_c1.png alt=
//a/li
Ahora se preguntarán porque no usar una imagen de fondo y arriba poner el
texto con el enlace y así lograr fácilmente el efecto que quiero, pues bien
el caso es que el diseñador me ha dado las imágenes con texto y todo por lo
que no debo ponerle por encima otro texto, primero porque no tendría lógica y
luego porque se vería un poco feo.
Tu código debería ser
li id=li0a href=#Opción/a/li
la imagen la pondría de fondo del a href... el texto lo puedes quitar
con un text-indent negativo y grande y de esa forma no tienes el
problema de querer modificar el contenido (img /) desde el css.
#li0 a {
display: block;
text-indent: -100em;
background-image: url(img/img_r2_c1.png);
}
--
Saludos -=stripTM=-
___
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] Porque no me funciona el RollOver
Hola he probado pero no me sale como debería ser. Este es mi HTML (reducido)
para no hacer el correo SPAM ni nada ilegible:
ul id=menu
li id=historiaa href=#Historia/a/li
li id=objetivosa href=#Objetivos/a/li
li id=eventosa href=#Eventos/a/li
li id=cursosa href=#Cursos/a/li
/ul
Luego el CSS me queda así:
ul#menu {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
}
li#historia {
text-indent: -100em;
background-image: url(images/grmnet_r2_c2.gif);
float: left;
}
Ahora para explicar un poco. Lo de display:block en li a me queda con
dudas. En este mismo mensaje Santiago me explicaba que poniendo esa propiedad
en esa forma el LI se adaptaría al tamaño de la imagen por lo que no debería
especificar width ni height que era como lo tenía anteriormente. Corrijanme
si me equivoco.
Ahora el li#historia lo puse así siguiendo las orientaciones de stripTM. Ya que
me indica que así es como debería hacerlo para poder hacer el RollOver.
El caso es que la imagen del li#historia no sale por ninguna parte y la ruta
esta correcta porque ya la he comprobado. Será el flota:left ese que le puse?
Pues bueno debe ir porque tengo que poner un LI al lado de otro de forma tal
que me quede un menú horizontal.
Alguna idea de que animalada es la que estoy cometiendo ahora?
Salu2
--
ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la
estupidez humana. Y del Universo no estoy seguro.
___
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] Porque no me funciona el RollOver
Hola a todos y gracias por sus respuestas: Bueno les cuento que no tenía ni idea de que poniendo la propiedad display:block lograba que el LI me ocupase el tamaño de la imagen. Más o menos ya he optimizado un poco mi CSS. Bueno ahora el hecho del RollOver. Si se dieron cuenta en el HTML que les envie lo que tengo es una imagen con un vínculo en cada elemento LI, por ejemplo aquí: li class=li0 id=li0a href=#img src=img/img_r2_c1.png alt= //a/li Ahora se preguntarán porque no usar una imagen de fondo y arriba poner el texto con el enlace y así lograr fácilmente el efecto que quiero, pues bien el caso es que el diseñador me ha dado las imágenes con texto y todo por lo que no debo ponerle por encima otro texto, primero porque no tendría lógica y luego porque se vería un poco feo. El tutorial que me deja Yurkevich está muy bueno y me ha enseñado unas cuantas cosas pero no sirve para mi caso ya que como dije ante son imágenes. Alguna otra sugerencia o idea? Salu2 -- ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. ___ 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] Porque no me funciona el RollOver
Querido Reynier; recien levantado y viéndo tu caso (uno de los muchos que
posteas) muy por encima, deduzco que es normal que no veas ningún efecto de
rollover dentro de cada elemento de lista ya que el a:hover que defines en
el css siempre va a quedar por debajo de cada una de las imagenes que
posicionas en cada li; prueba a definir dos estados para cada li, el
original con la imagen que ahora mismo está incrustada inline y el segundo
con la imagen que quieres que sustituya a la original.
Buen domingo a todos.
- Original Message -
From: Reynier Perez Mira [EMAIL PROTECTED]
To: ovillo@lists.ovillo.org
Sent: Sunday, July 02, 2006 5:51 AM
Subject: [Ovillo] Porque no me funciona el RollOver
Hola lista:
Tengo este UL y dentro algunos LI que lo que tiene son imagines. Aquí esta
el código HTML correspondiente:
ul id=r2ul
li class=li0 id=li0a href=#img src=img/img_r2_c1.png alt=
//a/li
li class=li1 id=li1a href=#img src=img/img_r2_c2.png alt=
//a/li
li class=li2 id=li2a href=#img src=img/img_r2_c3.png alt=
//a/li
li class=li3 id=li3a href=#img src=img/img_r2_c4.png alt=
//a/li
li class=li4 id=li4a href=#img src=img/img_r2_c5.png alt=
//a/li
li class=li5 id=li5a href=#img src=img/img_r2_c6.png alt=
//a/li
/ul
Estas son las reglas CSS que he creado:
.li0 { width: 139px; }
.li1 { width: 123px; }
.li2 { width: 122px; }
.li3 { width: 122px; }
.li4 { width: 122px; }
.li5 { width: 131px; }
.li1 a:hover {
background: url(../img/img_r2_c2_h1.png);
width: 123px;
height: 47px;
}
.li2 a:hover {
background: url(../img/img_r2_c3_h1.png);
width: 122px;
height: 47px;
}
.li3 a:hover {
background: url(../img/img_r2_c4_h1.png);
width: 122px;
height: 47px;
}
.li4 a:hover {
background: url(../img/img_r2_c5_h1.png);
width: 122px;
height: 47px;
}
.li5 a:hover {
background: url(../img/img_r2_c6_h1.png);
width: 131px;
height: 47px;
}
Pero cuando paso el Mouse por encima de los LI que contienen las imágenes
no me hace el efecto de RollOver. Que es lo que estoy haciendo mal?
Salu2
--
ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la
estupidez humana. Y del Universo no estoy seguro.
___
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
--
Estoy usando la versión gratuita de SPAMfighter para usuarios privados.
Ha eliminado 779 correos spam hasta la fecha.
Los usuarios de pago no tienen este mensaje en sus correos.
Obtenga SPAMfighter gratis aquí: http://www.spamfighter.com/les
___
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] Porque no me funciona el RollOver
viéndo tu caso (uno de los muchos que posteas) Mis disculpas por postear tanto en la lista, créanme que antes de hacerlo me doy varios cabezazos buscando la posible solución, doy vueltas en Google, leo mensajes en la lista y me parece que he visto la solución antes pero no logro encontrarla, así que nuevamente mis disculpas. prueba a definir dos estados para cada li, el original con la imagen que ahora mismo está incrustada inline y el segundo con la imagen que quieres que sustituya a la original. Hmmm ¿podrías explicar un poco mejor a que te refieres con dos estados? Se me ocurre que pudiera ser algo con los ID pero no creo que sea eso lo que me quieres decir. De todas formas saludos y gracias por responder hoy domingo pero es que estoy atrasado y quiero terminarlo todo antes de tomar mis vacaciones. -- ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. ___ 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] Porque no me funciona el RollOver
deberías pasar el tag a a display block. asi asume el width y height.
#r2ul a {display:block;width: 122px; height: 47px}
y borras los atributos repetidos a los otros.
El 2/07/06, Reynier Perez Mira[EMAIL PROTECTED] escribió:
viéndo tu caso (uno de los muchos que posteas)
Mis disculpas por postear tanto en la lista, créanme que antes de hacerlo me
doy varios cabezazos buscando la posible solución, doy vueltas en Google, leo
mensajes en la lista y me parece que he visto la solución antes pero no logro
encontrarla, así que nuevamente mis disculpas.
prueba a definir dos estados para cada li, el
original con la imagen que ahora mismo está incrustada inline y el segundo
con la imagen que quieres que sustituya a la original.
Hmmm ¿podrías explicar un poco mejor a que te refieres con dos estados? Se me
ocurre que pudiera ser algo con los ID pero no creo que sea eso lo que me
quieres decir.
De todas formas saludos y gracias por responder hoy domingo pero es que estoy
atrasado y quiero terminarlo todo antes de tomar mis vacaciones.
--
ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la
estupidez humana. Y del Universo no estoy seguro.
___
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] Porque no me funciona el RollOver
El 2/07/06, Reynier Perez Mira[EMAIL PROTECTED] escribió: viéndo tu caso (uno de los muchos que posteas) Mis disculpas por postear tanto en la lista, créanme que antes de hacerlo me doy varios cabezazos buscando la posible solución, doy vueltas en Google, leo mensajes en la lista y me parece que he visto la solución antes pero no logro encontrarla, así que nuevamente mis disculpas. prueba a definir dos estados para cada li, el original con la imagen que ahora mismo está incrustada inline y el segundo con la imagen que quieres que sustituya a la original. Hmmm ¿podrías explicar un poco mejor a que te refieres con dos estados? Se me ocurre que pudiera ser algo con los ID pero no creo que sea eso lo que me quieres decir. De todas formas saludos y gracias por responder hoy domingo pero es que estoy atrasado y quiero terminarlo todo antes de tomar mis vacaciones. -- ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo no estoy seguro. ___ 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 Saludos. Me parece que no estas haciendolo como debe ser, esta equivocado tu concepto del menu rollover usando XHTML + CSS. Esta es una de las muchas formas _correctas_ de hacerlo[1], tambien te convendria leer este articulo[2] pues tarde o temprano el asqueroso ie te provocará mas de un dolor de cabeza. Un plus!![3] [1] Crear menus de navegación en CSS usando listas http://cristalab.com/tutoriales/130/crear-menus-de-navegacion-en-css-usando-listas [2] CSS Rollover Flicker In Internet Explorer http://www.ibloomstudios.com/articles/css_rollover_flicker_in_internet_explorer/ [3] CSSPlay http://www.cssplay.co.uk/index.html ___ 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
[Ovillo] Porque no me funciona el RollOver
Hola lista:
Tengo este UL y dentro algunos LI que lo que tiene son imagines. Aquí esta el
código HTML correspondiente:
ul id=r2ul
li class=li0 id=li0a href=#img src=img/img_r2_c1.png
alt= //a/li
li class=li1 id=li1a href=#img src=img/img_r2_c2.png
alt= //a/li
li class=li2 id=li2a href=#img src=img/img_r2_c3.png
alt= //a/li
li class=li3 id=li3a href=#img src=img/img_r2_c4.png
alt= //a/li
li class=li4 id=li4a href=#img src=img/img_r2_c5.png
alt= //a/li
li class=li5 id=li5a href=#img src=img/img_r2_c6.png
alt= //a/li
/ul
Estas son las reglas CSS que he creado:
.li0 { width: 139px; }
.li1 { width: 123px; }
.li2 { width: 122px; }
.li3 { width: 122px; }
.li4 { width: 122px; }
.li5 { width: 131px; }
.li1 a:hover {
background: url(../img/img_r2_c2_h1.png);
width: 123px;
height: 47px;
}
.li2 a:hover {
background: url(../img/img_r2_c3_h1.png);
width: 122px;
height: 47px;
}
.li3 a:hover {
background: url(../img/img_r2_c4_h1.png);
width: 122px;
height: 47px;
}
.li4 a:hover {
background: url(../img/img_r2_c5_h1.png);
width: 122px;
height: 47px;
}
.li5 a:hover {
background: url(../img/img_r2_c6_h1.png);
width: 131px;
height: 47px;
}
Pero cuando paso el Mouse por encima de los LI que contienen las imágenes no
me hace el efecto de RollOver. Que es lo que estoy haciendo mal?
Salu2
--
ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la
estupidez humana. Y del Universo no estoy seguro.
___
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
