Foros del Web » Creando para Internet » CSS »

Problema con subrayado en enlaces

Estas en el tema de Problema con subrayado en enlaces en el foro de CSS en Foros del Web. Saludos. Estoy intentando construir un menú de navegación, basándome en las css. El problema que estoy teniendo, es que a aquellos vínculos que tiene un ...
  #1 (permalink)  
Antiguo 22/01/2008, 16:07
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Problema con subrayado en enlaces

Saludos.
Estoy intentando construir un menú de navegación, basándome en las css.
El problema que estoy teniendo, es que a aquellos vínculos que tiene un enlace como tal, no le desaparece el subrayado, mientras que los que no apuntan a ningún enlace, sólo ejecutan un javascript, sí se los elimina.
¿Dónde me estoy equivocando?
Os pongo el código:

Código HTML:
...
<td width="100" height="40" valign="middle" class="MenuPrincipal"><a href="empresa.html" target="_self" class="menun"> La
              Empresa </a> </td> // A éste no le quita el subrayado
<td width="100" height="40" class="MenuPrincipal"><a href="#" class="menun" onclick="despliega('2.1');despliega('i21');despliega('2.2');despliega('i22');despliega('2.3');despliega('i23');despliega('2.4');despliega('i24');despliega('2.5');despliega('i25');despliega('2.6');despliega('i26');return false;"> Servicios </a> </td> //A éste sí
...
Código:
Estilo para el menu de navegacion*/
A.menun:link    {
	color: #6C2233;
	background-color: #FFFFFF;
	background-position: right center;
	font-family: Verdana;
	font-size: 12px;
	text-decoration:none;
};
A.menun:visited { 
	color: #6C2233;
	background-color: #FFFFFF;
	background-position: right center;
	font-family: Verdana;
	font-size: 12px;
	text-decoration: none;
};
A.menun:active  {
	color: #0E2050;
	background-color: #FFFFFF;
	background-position: right center;
	font-family: Verdana;
	font-size: 12px;
	text-decoration: none;
};
A.menun:hover {
	color: #0E2050;
	background-color: #FFFFFF;
	background-position: right center;
	font-family: Verdana;
	font-size: 12px;
	text-decoration: none;
};
La otra clase, MenuPrincipal, es para la celda, para ponerle un borde inferior.

Código:
.MenuPrincipal{
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: #CCCCCC;
	font-family: Verdana;
	font-size: 12px;
	font-color: #6C2233;
	text-align: left;	
}
Gracias
  #2 (permalink)  
Antiguo 22/01/2008, 22:10
Avatar de Pameliux  
Fecha de Ingreso: diciembre-2007
Mensajes: 24
Antigüedad: 10 años
Puntos: 0
Re: Problema con subrayado en enlaces

Amm.. mi ra yo tengo esta forma de hacerlo.

Código HTML:
.menu {font-size:7pt;font-family:Verdana;background-color:#463b1f;color:#070115;}

.menu a { color: #070115; text-decoration: none;}

.menu a:active { color: #070115; text-decoration: none;}

.cmenu a:visited { color: #070115; text-decoration: none;}

.menu a:hover { color: #ab9e77; text-decoration: underline}
- El primero "menu" es como quiero el menu.

- "menu a" es el link, pero es lo mismo que "menu".

- "menu a:active" pues tambien el mismo color.

- "menu a:visited" tambien pongo lo mismo, porque no me gusta el link visitado.

- "menu:ahover" es como quiero que sea el menu cuando el puntero del raton este encima de el.

espero te haya ayudado, talvez no me explique bien, pero el code es facil de entender a mi me funciona bien!
  #3 (permalink)  
Antiguo 23/01/2008, 01:41
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: Problema con subrayado en enlaces

Añado a mi pregunta anterior ...
En iexplorer sí funciona, es en Firefox donde me deja el subrayado.
¿Qué incompatibilidad o diferencia hay entre el mismo código css entre un navegador y otro?
¿Cómo solucionarlo?

Gracias
  #4 (permalink)  
Antiguo 23/01/2008, 04:59
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: Problema con subrayado en enlaces

Saludos
He probado lo que me recomienda Pameliux, y funciona en cuanto a que me quita el subrayado, pero no me cmbia de color al hacer el hover.

¿Ayudita? por favor ...
  #5 (permalink)  
Antiguo 23/01/2008, 05:06
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Problema con subrayado en enlaces

Hola AJDC

El orden en el que se deben poner los estilos es.

a
a:visited
a: hover
a: active

Saludos,
  #6 (permalink)  
Antiguo 23/01/2008, 05:17
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: Problema con subrayado en enlaces

Pues tampoco ....
  #7 (permalink)  
Antiguo 23/01/2008, 05:42
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: Problema con subrayado en enlaces

Os pongo el codigo css que uso en toda la pagina...

Código:
/* CSS Document */

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: justify;
	font-family: Verdana;
	font-size: 11px;
	font-color: #666666;
}

.TablaMenuSup{
	border-width: 0px 0px 1px 1px;
	border-style: solid;
	border-color: #FF9966;
	font-family: Verdana;
	font-size: 9px;
	font-color: #999999;
}
.MenuPrincipal{
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: #CCCCCC;
	/*font-family: Verdana;*/
	/*font-size: 12px;*/
	/*font-color: #6C2233;*/
	text-align: left;
	text-decoration:none;
	
}
.TablaCentral{
	border-width: 0px 1px 1px 0px;
	border-style: solid;
	border-color: #CCCCCC;
	font-family: Verdana;
	font-size: 9px;
	font-color: #999999;
}
.TablaLineaInf{
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: #CCCCCC;
}
.TablaCopyRight{
	border-width: 0px 1px 1px 0px;
	border-style: solid;
	border-color: #CCCCCC;
	font-family: Verdana;
	font-size: 9px;
	font-color: #666666;
	text-align: center;
	color: #CCCCCC;
	}
	
.TextoBurdeo {
	font-family: Verdana;
	font-size: 15px;
	color: #6C2233;
}
.TextoBurdeoBold {
	font-family: Verdana;
	font-size: 14px;
	color: #6C2233;
	font-weight: bold;
}
.TextoHSE {
	font-family: Verdana;
	font-size: 15px;
	color: #90ADB4;
}
.TextoHSEBold {
	font-family: Verdana;
	font-size: 14px;
	color: #90ADB4;
	font-weight: bold;
}
.TextoSafman {
	font-family: Verdana;
	font-size: 15px;
	color: #0477A3;
}
.TextoSafmanBold {
	font-family: Verdana;
	font-size: 14px;
	color: #0477A3;
	font-weight: bold;
}
.TextoMymasur {
	font-family: Verdana;
	font-size: 15px;
	color: #0E2050;
}
.TextoMymasurBold {
	font-family: Verdana;
	font-size: 14px;
	color: #0E2050;
	font-weight: bold;
}
.TextoNaranja {
	font-family: Verdana;
	font-size: 14px;
	color: #FA916D;
}
.Parrafo {
	font-family: Verdana;
	font-size: 11px;
	color: #666666;
	text-align: justify;
}
.ParrafoBurdeo {
	font-family: Verdana;
	font-size: 11px;
	color: #6C2233;
	font-weight: bold;
	text-align: justify;
}
.ParrafoHSE {
	font-family: Verdana;
	font-size: 11px;
	color: #90ADB4;
	font-weight: bold;
	text-align: justify;
}
.ParrafoSafman {
	font-family: Verdana;
	font-size: 11px;
	color: #0477A3;
	font-weight: bold;
	text-align: justify;
}
.ParrafoMymasur {
	font-family: Verdana;
	font-size: 11px;
	color: #0E2050;
	font-weight: bold;
	text-align: justify;
}
.ParrafoMymasurtodo {
	font-family: Verdana;
	font-size: 11px;
	color: #0E2050;
	text-align: justify;
}

/* =========================
Estilo para el menu de navegacion*/
.menun {
	color: #6C2233;
	background-color: #FFFFFF;
	background-position: right center;
	font-family: Verdana;
	font-size: 12px;
	text-decoration:none;
}

.menun A:visited { 
	color: #6C2233;
	/*background-color: #FFFFFF;*/
	/*background-position: right center;*/
	/*font-family: Verdana;*/
	/*font-size: 12px;*/
	/*text-decoration: none;*/
};
.menun A:hover {
	color: #0E2050;
	/*background-color: #FFFFFF;*/
	/*background-position: right center;*/
	/*font-family: Verdana;*/
	/*font-size: 12px;*/
	/*text-decoration: none;*/
};
.menun A:active  {
	color: #0E2050;
	/*background-color: #FFFFFF;*/
	/*background-position: right center;*/
	/*font-family: Verdana;*/
	/*font-size: 12px;*/
	/*text-decoration: none;*/
};



/*Actual...
.TituloFoto {
	font-family: Verdana;
	font-size: 9px;
	color: #666666;
}
.TituloParrafo {
	color: #00B0C7;
	font-size: 14px;
}
.Parrafo {
	font-family: Verdana;
	font-size: 11px;
	color: #4C4688;
	text-align: justify;
}

.TablaFoto {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: 1px solid #00B0C7;
	right: auto;
}
.Textofotos {
	color: #00B0C7;
	font-size: 14px;
	text-decoration: none;
}

.TablaMenu {
	border-width: 0px 0px 1px 0px;
	border-style: solid;
	border-color: #CCCCCC;
}

.ParrafoTitulo {
	font-family: Verdana;
	font-size: 11px;
	color: #00B0C7;
}
*/
Parte del html de página, donde esta la tabla que contiene el menu
Código HTML:
<table width="205">
        <tr valign="middle">
          <td width="15"></td>
          <td width="100" height="40" class="MenuPrincipal"><a href="javascript:abrirUrl('empresa.html')" class="menun"> La
          Empresa </a> </td>
          <td width="68"><img src="../imagenes/topoMM.gif" width="12" height="12" border="0" /></td>
        </tr>
        <tr valign="middle">
          <td width="15"></td>
          <td width="100" height="40" class="MenuPrincipal"><a href="javascript:abrirUrl('')" class="menun" onclick="despliega('2.1');despliega('i21');despliega('2.2');despliega('i22');despliega('2.3');despliega('i23');despliega('2.4');despliega('i24');despliega('2.5');despliega('i25');despliega('2.6');despliega('i26');return false;"> Servicios </a> </td>
          <td width="68"><img src="../imagenes/topoMM.gif" width="12" height="12" border="0" /></td>
        </tr>
        
        
        <tr>
          <td width="15"></td>
          
           <td height="40" colspan="2">
           <table width="100%">
           	<tr valign="middle">
             <td height="40" class="MenuPrincipal" id="2.1"><div align="right"><a href="javascript:abrirUrl('smecanico.html')" class="menun">Mec&aacute;nico</a> </div></td>
          <td width="40" height="40" id="2.1"><div align="center"><img src="../imagenes/topoMM.gif" name="i21" width="12" height="12" border="0" id="i21" /></div></td>
        </tr>
        <tr valign="middle">
          <td height="40" class="MenuPrincipal" id="2.2"><div align="right"><a href="javascript:abrirUrl('selectrico.html')" class="menun">El&eacute;ctrico</a> </div></td>
          <td width="40" height="40" id="2.2"><div align="center"><img src="../imagenes/topoMM.gif" name="i22" width="12" height="12" border="0" id="i22" /></div></td>
        </tr>
        <tr valign="middle">
          <td height="40" class="MenuPrincipal" id="2.3"><div align="right"><a href="javascript:abrirUrl('scaldeler.html')" class="menun">Caldeler&iacute;a
                y Soldadura</a> </div></td>
          <td width="40" height="40" id="2.3"><div align="center"><img src="../imagenes/topoMM.gif" name="i23" width="12" height="12" border="0" id="i23" /></div></td>
        </tr>
        <tr valign="middle">
          <td height="40" class="MenuPrincipal" id="2.4"><div align="right"><a href="javascript:abrirUrl('shidraulica.html')" class="menun">Hidr&aacute;ulica
                y Neumática</a> </div></td>
          <td width="40" height="40" id="2.4"><div align="center"><img src="../imagenes/topoMM.gif" name="i24" width="12" height="12" border="0" id="i24" /></div></td>
        </tr>
        <tr valign="middle">
          <td height="40" class="MenuPrincipal" id="2.5"><p align="right"><a href="javascript:abrirUrl('smecain.html')" class="menun">Mecanizados <br />
              IN SITU</a></p></td>
          <td width="40" height="40" id="2.5"><div align="center"><img src="../imagenes/topoMM.gif" name="i25" width="12" height="12" border="0" id="i25" /></div></td>
        </tr>
        <tr valign="middle">
          <td height="40" class="MenuPrincipal" id="2.6"><p align="right"><a href="javascript:abrirUrl('smantind.html')" class="menun">Mantenimiento
                Industrial</a></p></td>
          <td width="40" height="40" id="2.6"><div align="center"><img src="../imagenes/topoMM.gif" name="i26" width="12" height="12" border="0" id="i26" /></div></td>
            </tr>
           </table> </td>
        </tr>
    </table> 
Y el js que puedo usar también ..
Código:
// JavaScript Document
function ocultamenu(id){
	var menu = document.getElementById(id); //var menu = document.getElementById("estrategia");
	menu.style.display = "none";
}

function despliega(id){
	var menu = document.getElementById(id);  //var menu = document.getElementById("estrategia")
	if(menu.style.display == "none"){
		menu.style.display = "block";
	}
	else{
		menu.style.display = "none";
	}
}

function cambiarColorTextoover(celda) {
        celda.style.color='#6C2233';
}
function cambiarColorTextoout(celda) {
        celda.style.color='#0E2050';
}


function cambiarCol(celda) {
    var elBg = celda.style.backgroundColor;
    if( elBg === "red" ) {
        //celda.style.backgroundColor = "blue";
        celda.style.color="red";
        //celda.getElementsByTagName("A")[0].style.color = "yellow";
    }
    else {
        //celda.style.backgroundColor = "red";
        celda.style.color="green";
        //celda.getElementsByTagName("A")[0].style.color = "blue";
    }
}

function abrirUrl(url)
{
    location=url;
} /* el objeto location es la url. En la misma ventana

                                                     abre otra url */
Ufff. ... nos e si me he pasado ..
Espero vuestra ayuda
gracias
  #8 (permalink)  
Antiguo 26/01/2008, 14:04
Avatar de Pameliux  
Fecha de Ingreso: diciembre-2007
Mensajes: 24
Antigüedad: 10 años
Puntos: 0
Re: Problema con subrayado en enlaces

Y si a los <td> donde se encuntra el menu le quietas el class MenuPrincipal y le pones menun.

Y si no intnta tambien quitandole los divs y a el aliniamento se lo pones a los <td> del menu ejem : <td align="enter">
Mira:

Código HTML:
<tr valign="middle">
             <td height="40" id="2.1" align="right" class="menun"><a href="javascript:abrirUrl('smecanico.html')">Mec&aacute;nico</a></td>
          <td width="40" height="40" id="2.1" align="center"><img src="../imagenes/topoMM.gif" name="i21" width="12" height="12" border="0" id="i21" /></td>
        </tr> 
Lo que pasa es que, para el menu mandas a llamar dos class, no sabe cual leer, lo mejor es que solo utilizes un class.

Creeme me paos lo mismo que ati, y asi lo solucione.

Última edición por Pameliux; 26/01/2008 a las 14:10
  #9 (permalink)  
Antiguo 27/01/2008, 02:55
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: Problema con subrayado en enlaces

Gracias a todos ..
ya lo solucioné. El problema estaba cómo llamaba a las clases en el css ...
Al menos cambié eos y funcionó.
Lo puse de esta manera:

Código:
A.menun:link{
	color: #6C2233;
	font-family: Verdana;
	font-size: 12px;
	text-decoration: none;
}

A.menun:visited { 
	color: #6C2233;
}
A.menun:hover {
	color: #FA906C;
}
A.menun:active  {
	color: #FA906C;
}
Gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:57.