Foros del web, para los que viven de bits

monorendon · 31-jul-2006, 11:33

Hola, alguien me puede ayudar con esto??? Tengo un hipervínculo que es imagen y texto, pero no quiero que la imagen se me subraye, estoy haciendo así:

<A href="paginita"><IMG src="/images/utils/Users.png"> Administración de Grupo de Usuarios </A>

La palabra está bien que se subraye pero no la imagen, cuando el mouse no esta encima no pasa nada, pero cuando el mouse pasa por encima de la imagen, pues esta se subraya junto con el texto, lo que quiero que ocurra es que se subraye el texto solamente, sin subrayarse la imagen.... como hago eso???? me imagino que se lo puede arreglar con CSS verdad???

monorendon · 31-jul-2006, 11:54

Segun yo el problema lo estoy teniendo es apartir de esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML LANG="en">

Porque sin eso, no hay problema y la imagen no se subraya con CSS que aplica que no tenga text decoration, pero con ese DTD hace que se subraye.... como soluciono eso

PD: no puedo quitar ese

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML LANG="en">

tiene que estar de obligacion

webosiris · 31-jul-2006, 12:03

Cita:

Iniciado por monorendon

tiene que estar de obligacion

si, eso no se puede quitar... y además el que pones está incompleto. Debería decir

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Ahora, si nos mostraras el css que tenés sería más fácil... probá a agregar a tu CSS

Código:

a img {text-decoration:none}

GoRaK · 31-jul-2006, 12:19

Cita:

Iniciado por monorendon

<A href="paginita"><IMG src="/images/utils/Users.png"> Administración de Grupo de Usuarios </A>

Cambio lo que tienes por:

<a href="paginita" title="algo"><img src="/images/utils/Users.png" title="algo" alt="algo" style="border:0;"/> Administración de Grupo de Usuarios </a>

monorendon · 31-jul-2006, 12:56

ok my css es este:

BODY,A,TH,SELECT,INPUT,TEXTAREA,FONT,TD,H1,H2,H3,H 4,H5,H6 {
font: 11.5px tahoma, arial, sans-serif;
}

BODY {
margin: 0 0 0 0;
background: #FFFFFF;
color: #3d3d3d;
}

A IMG {
border: 0px;
text-decoration:none;
}

A:link,A:visited {
color: #000080;
text-decoration: none;
}

A:hover,A:active {
text-decoration: underline;
color: #ff4400;
}

SELECT,INPUT,TEXTAREA {
color: rgb(27, 25, 131);
font-size:11px;
}

FONT,TD,TH {
color: #3d3d3d;
}

Y no sirve como dices GoRaK, lo mismo que nada...

webosiris · 31-jul-2006, 13:02

hola, tenés un pequeño problema con la cascada y la herencia... lo que yo te dije ponelo DESPUÉS de

Código:

A:hover,A:active {
    text-decoration: underline;
    color: #ff4400;
}

ya que esto último lo sobreescribe y entonces claro, no funciona.

PD: acostumbrate a escribir todas las etiqeutas y atributos (a, img, h1..) en minúscula.
PD 2: por favor, disminuí tu firma, solo se permiten 4 líneas. Gracias.

monorendon · 31-jul-2006, 13:30

Perdón... no igual me sigue subrayando... Es como si no le hiciera caso a la clausula text-decoration: none;

Bueno, no se si este dato sirva, pero el <a> está dentro de un <td> y este dentro de varias tablas... y a la final dentro de un div llamado <main> el cual está contenido dentro del <body>, beno, espero que sirva esta info....

monorendon · 31-jul-2006, 18:35

Acaso nadie sabe como resolver este problema??

webosiris · 31-jul-2006, 18:57

a lo que yo te dije, agregale !important.. así:

Código:

a img {text-decoration:none !important;}

Cita:

dentro de varias tablas.

No tiene que ver con tu problema pero ya que lo comentás... lee porque diseñar con tablas es estúpido (el título suena "fuerte" pero es una traducción bastante literal de un art. en inglés)

monorendon · 31-jul-2006, 19:36

Pues hombre, dejame decirte que tampoco funciona...

webosiris · 31-jul-2006, 19:41

pasa entonces el enlace a ver...

monorendon · 31-jul-2006, 20:02

que enlace???

webosiris · 31-jul-2006, 20:20

Cita:

Iniciado por monorendon

que enlace???

no lo tenés subido a algún lado para poder verlo online?

También probá a validar tu CSS, a ver si no te falta ningún ;

monorendon · 31-jul-2006, 20:26

pues no...

jesusbet · 31-jul-2006, 20:32

<A href="paginita"><IMG style="text-decoration: none; border: 0" border="0" src="/images/utils/Users.png"> Administración de Grupo de Usuarios </A>

NopalStudio · 31-jul-2006, 23:41

Hola monorendon

La respuesta a tu problema ya te la han dado, lo unico que voy hacer es resumirla;

1.- Debes agregar en tu img la opcion de border="0"

Código:

Ejemplo:
<img src="images/utils/Users.png" border="0">

2.- Debes cambiar en tu CSS la opcion de text-decoration: underline; por la siguiente text-decoration: none;

Código:

Ejemplo:
A:hover,A:active {
text-decoration: none;
color: #ff4400;
}

monorendon · 01-ago-2006, 10:22

mm... como que no se entiende... pero weno, me voy hacer explicar otra vez...

Lo que tengo es esto: un hipervínculo de la siguiente manera:

<A href="paginita"><IMG src="/images/utils/Users.png"> Administración de Grupo de Usuarios </A>

Ahora, mi CSS es este:

BODY,A,TH,SELECT,INPUT,TEXTAREA,FONT,TD,H1,H2,H3,H 4,H5,H6 {
font: 11.5px tahoma, arial, sans-serif;
}

BODY {
margin: 0 0 0 0;
background: #FFFFFF;
color: #3d3d3d;
}

A IMG {
border: 0px;
text-decoration:none;
}

A:link,A:visited {
color: #000080;
text-decoration: none;
}

A:hover,A:active {
text-decoration: underline;
color: #ff4400;
}

SELECT,INPUT,TEXTAREA {
color: rgb(27, 25, 131);
font-size:11px;
}

FONT,TD,TH {
color: #3d3d3d;
}

IMG {
border: 0px;
}

y tiene por encabezado HTML esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML LANG="en">

En ie me aparece así:

Imagen Click aqui para irse a no se donde...

Pero al cambio en Firefox me aparece así:

Imagen Click aqui para irse a no se donde...

con "Imagen" estoy haciendo referencia que allí está hubicada una imágen...

Lo que yo quiero es que en Firefox no se subraye la Imagen...

Ahora si... como hago eso????

MaXaC · 01-ago-2006, 10:51

y si pruebas con esto, en vez de border 0 le pones none

Código:

<A href="paginita"><IMG style="text-decoration: none; border: none" src="/images/utils/Users.png"><br>Administración de Grupo de Usuarios<br></A>

monorendon · 01-ago-2006, 11:04

No, se sigue subrayando... la única solución que encontrado a esto es eliminar esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML LANG="en">

Pero si lo elimino se me dañan otras cosas que hice... entonces no lo puedo eliminar... Ya dijo esto solo me ocurre en Firefox...

ePorroa · 01-ago-2006, 11:28

Hola, podrias probar con esto.

Código:

span{
    text-decoration:underline;
}
a img, a{
    text-decoration:none;
}

<a href="paginita"><img style="border:0;" src="/images/utils/Users.png"><br><span>Administración de Grupo de Usuarios</span><br></a>

Agrego el span para poder aplicar el underline a este mas no a la imagen, seria bueno que actualices tu web :D (quizas a HTML 4.1 transitional) ..

Salu2

monorendon · 01-ago-2006, 13:04

Es que no se que es el HTML 4.1 transitional y además no encuentro un manual como HTML 4.1 para tontos... jeje...

Pues bueno, tu solución es un poco más práctica... pero va a tocar incluir a los que quiero que son vinculos se subrayen... he allí el gran problema... Pero ahora se me ocurre una mejor solución, que tal si es a la imagen que va dentro del span.... para que no se subraye??? jeje... es una opinión...

ePorroa · 01-ago-2006, 14:09

De todas formas creo que esta es la solucion que mas rapido podria hacer parar un dolor de cabeza :D

Salu2
PD: Mas sobre el elemento span.
http://webdesign.about.com/od/htmlta...ltags_span.htm

GoRaK · 01-ago-2006, 16:49

En IE funciona como te había respondido antes. Pero en firefox parece que no hay solución posible. De todas formas puedes probar con algún "truquillo" bajando un poco la imagen de manera que oculta el borde.

<a href="paginita" title="algo"><img src="/images/utils/Users.png" title="algo" alt="algo" style="display:block;margin-bottom:-3px;"> Administración de Grupo de Usuarios </a>

Saludos!

31-jul-2006, 11:33	#1 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	IMG no subrayada Hola, alguien me puede ayudar con esto??? Tengo un hipervínculo que es imagen y texto, pero no quiero que la imagen se me subraye, estoy haciendo así: <A href="paginita"><IMG src="/images/utils/Users.png"><br>Administración de Grupo de Usuarios<br></A> La palabra está bien que se subraye pero no la imagen, cuando el mouse no esta encima no pasa nada, pero cuando el mouse pasa por encima de la imagen, pues esta se subraya junto con el texto, lo que quiero que ocurra es que se subraye el texto solamente, sin subrayarse la imagen.... como hago eso???? me imagino que se lo puede arreglar con CSS verdad??? __________________ Sincerely, Guido Rendón

31-jul-2006, 11:54	#2 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	Segun yo el problema lo estoy teniendo es apartir de esto: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML LANG="en"> Porque sin eso, no hay problema y la imagen no se subraya con CSS que aplica que no tenga text decoration, pero con ese DTD hace que se subraye.... como soluciono eso PD: no puedo quitar ese <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML LANG="en"> tiene que estar de obligacion __________________ Sincerely, Guido Rendón

31-jul-2006, 12:03	#3 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 5.965	Cita: Iniciado por monorendon tiene que estar de obligacion si, eso no se puede quitar... y además el que pones está incompleto. Debería decir Código: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Ahora, si nos mostraras el css que tenés sería más fácil... probá a agregar a tu CSS Código: a img {text-decoration:none} __________________ Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código.

31-jul-2006, 12:19	#4 (permalink)
GoRaK Fecha de Ingreso: julio-2005 Mensajes: 217	Cita: Iniciado por monorendon <A href="paginita"><IMG src="/images/utils/Users.png"><br>Administración de Grupo de Usuarios<br></A> Cambio lo que tienes por: <a href="paginita" title="algo"><img src="/images/utils/Users.png" title="algo" alt="algo" style="border:0;"/><br/>Administración de Grupo de Usuarios<br/></a>

31-jul-2006, 12:56	#5 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	ok my css es este: BODY,A,TH,SELECT,INPUT,TEXTAREA,FONT,TD,H1,H2,H3,H 4,H5,H6 { font: 11.5px tahoma, arial, sans-serif; } BODY { margin: 0 0 0 0; background: #FFFFFF; color: #3d3d3d; } A IMG { border: 0px; text-decoration:none; } A:link,A:visited { color: #000080; text-decoration: none; } A:hover,A:active { text-decoration: underline; color: #ff4400; } SELECT,INPUT,TEXTAREA { color: rgb(27, 25, 131); font-size:11px; } FONT,TD,TH { color: #3d3d3d; } Y no sirve como dices GoRaK, lo mismo que nada... __________________ Sincerely, Guido Rendón

31-jul-2006, 13:02	#6 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 5.965	hola, tenés un pequeño problema con la cascada y la herencia... lo que yo te dije ponelo DESPUÉS de Código: A:hover,A:active { text-decoration: underline; color: #ff4400; } ya que esto último lo sobreescribe y entonces claro, no funciona. PD: acostumbrate a escribir todas las etiqeutas y atributos (a, img, h1..) en minúscula. PD 2: por favor, disminuí tu firma, solo se permiten 4 líneas. Gracias. __________________ Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código.

31-jul-2006, 13:30	#7 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	Perdón... no igual me sigue subrayando... Es como si no le hiciera caso a la clausula text-decoration: none; Bueno, no se si este dato sirva, pero el <a> está dentro de un <td> y este dentro de varias tablas... y a la final dentro de un div llamado <main> el cual está contenido dentro del <body>, beno, espero que sirva esta info.... __________________ Sincerely, Guido Rendón Última edición por monorendon; 31-jul-2006 a las 13:39.

31-jul-2006, 18:35	#8 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	Acaso nadie sabe como resolver este problema?? __________________ Sincerely, Guido Rendón

31-jul-2006, 18:57	#9 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 5.965	a lo que yo te dije, agregale !important.. así: Código: a img {text-decoration:none !important;} Cita: dentro de varias tablas. No tiene que ver con tu problema pero ya que lo comentás... lee porque diseñar con tablas es estúpido (el título suena "fuerte" pero es una traducción bastante literal de un art. en inglés) __________________ Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código.

31-jul-2006, 19:36	#10 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	Pues hombre, dejame decirte que tampoco funciona... __________________ Sincerely, Guido Rendón

31-jul-2006, 19:41	#11 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 5.965	pasa entonces el enlace a ver...

31-jul-2006, 20:02	#12 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	que enlace??? __________________ Sincerely, Guido Rendón

31-jul-2006, 20:20	#13 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 5.965	Cita: Iniciado por monorendon que enlace??? no lo tenés subido a algún lado para poder verlo online? También probá a validar tu CSS, a ver si no te falta ningún ;

31-jul-2006, 20:26	#14 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	pues no... __________________ Sincerely, Guido Rendón

31-jul-2006, 20:32	#15 (permalink)
jesusbet Fecha de Ingreso: mayo-2004 Ubicación: Monterrey, MX Mensajes: 2.677	<A href="paginita"><IMG style="text-decoration: none; border: 0" border="0" src="/images/utils/Users.png"><br>Administración de Grupo de Usuarios<br></A> __________________ 512 Megas

31-jul-2006, 23:41	#16 (permalink)
NopalStudio Fecha de Ingreso: agosto-2005 Mensajes: 107	Hola monorendon La respuesta a tu problema ya te la han dado, lo unico que voy hacer es resumirla; 1.- Debes agregar en tu img la opcion de border="0" Código: Ejemplo: <img src="images/utils/Users.png" border="0"> 2.- Debes cambiar en tu CSS la opcion de text-decoration: underline; por la siguiente text-decoration: none; Código: Ejemplo: A:hover,A:active { text-decoration: none; color: #ff4400; } __________________ NopalStudio Diseño y Desarrollo Sitios en Alta Calidad

01-ago-2006, 10:22	#17 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	mm... como que no se entiende... pero weno, me voy hacer explicar otra vez... Lo que tengo es esto: un hipervínculo de la siguiente manera: <A href="paginita"><IMG src="/images/utils/Users.png"><br>Administración de Grupo de Usuarios<br></A> Ahora, mi CSS es este: BODY,A,TH,SELECT,INPUT,TEXTAREA,FONT,TD,H1,H2,H3,H 4,H5,H6 { font: 11.5px tahoma, arial, sans-serif; } BODY { margin: 0 0 0 0; background: #FFFFFF; color: #3d3d3d; } A IMG { border: 0px; text-decoration:none; } A:link,A:visited { color: #000080; text-decoration: none; } A:hover,A:active { text-decoration: underline; color: #ff4400; } SELECT,INPUT,TEXTAREA { color: rgb(27, 25, 131); font-size:11px; } FONT,TD,TH { color: #3d3d3d; } IMG { border: 0px; } y tiene por encabezado HTML esto: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML LANG="en"> En ie me aparece así: Imagen Click aqui para irse a no se donde... Pero al cambio en Firefox me aparece así: Imagen Click aqui para irse a no se donde... con "Imagen" estoy haciendo referencia que allí está hubicada una imágen... Lo que yo quiero es que en Firefox no se subraye la Imagen... Ahora si... como hago eso???? __________________ Sincerely, Guido Rendón

01-ago-2006, 10:51	#18 (permalink)
MaXaC Fecha de Ingreso: abril-2005 Ubicación: Lima-Peru Mensajes: 314	y si pruebas con esto, en vez de border 0 le pones none Código: <A href="paginita"><IMG style="text-decoration: none; border: none" src="/images/utils/Users.png"><br>Administración de Grupo de Usuarios<br></A>

01-ago-2006, 11:04	#19 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	No, se sigue subrayando... la única solución que encontrado a esto es eliminar esto: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML LANG="en"> Pero si lo elimino se me dañan otras cosas que hice... entonces no lo puedo eliminar... Ya dijo esto solo me ocurre en Firefox... __________________ Sincerely, Guido Rendón

01-ago-2006, 11:28	#20 (permalink)
ePorroa Fecha de Ingreso: enero-2003 Ubicación: Lima Mensajes: 99	Hola, podrias probar con esto. Código: span{ text-decoration:underline; } a img, a{ text-decoration:none; } <a href="paginita"><img style="border:0;" src="/images/utils/Users.png"><br><span>Administración de Grupo de Usuarios</span><br></a> Agrego el span para poder aplicar el underline a este mas no a la imagen, seria bueno que actualices tu web :D (quizas a HTML 4.1 transitional) .. Salu2

01-ago-2006, 13:04	#21 (permalink)
monorendon Fecha de Ingreso: octubre-2005 Ubicación: En mi casita Mensajes: 100	Es que no se que es el HTML 4.1 transitional y además no encuentro un manual como HTML 4.1 para tontos... jeje... Pues bueno, tu solución es un poco más práctica... pero va a tocar incluir <span></span> a los que quiero que son vinculos se subrayen... he allí el gran problema... Pero ahora se me ocurre una mejor solución, que tal si es a la imagen que va dentro del span.... para que no se subraye??? jeje... es una opinión... __________________ Sincerely, Guido Rendón Última edición por monorendon; 01-ago-2006 a las 13:11.

01-ago-2006, 14:09	#22 (permalink)
ePorroa Fecha de Ingreso: enero-2003 Ubicación: Lima Mensajes: 99	De todas formas creo que esta es la solucion que mas rapido podria hacer parar un dolor de cabeza :D Salu2 PD: Mas sobre el elemento span. http://webdesign.about.com/od/htmlta...ltags_span.htm

01-ago-2006, 16:49	#23 (permalink)
GoRaK Fecha de Ingreso: julio-2005 Mensajes: 217	En IE funciona como te había respondido antes. Pero en firefox parece que no hay solución posible. De todas formas puedes probar con algún "truquillo" bajando un poco la imagen de manera que oculta el borde. <a href="paginita" title="algo"><img src="/images/utils/Users.png" title="algo" alt="algo" style="display:block;margin-bottom:-3px;"><br/>Administración de Grupo de Usuarios<br/></a> Saludos!

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado