Consulta...hipervinculos no subrayados

hoberwilly · #1 (**permalink**) 25/02/2009, 12:49

Hola amigos,
Quisiera una ayuda con respecto a este codigo, el cual no domino bien el tema por tanto espero me sepan orientar

Código php:

Ver original<!-- <html>
<head>
<style type='text/css'>
.tit{text-decoration: none;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="1000" class="tit">
<tr>
 <td height="15" colspan="6"></td>
</tr>
<tr>
 <td height="70" colspan="6"></td>
</tr>
<tr>
 <td align="center" height="32" width="57"><a href="index.php" class="cabecera_menu" >INICIO</a></td>
 <td align="center" width="103"><a href="index.php?p=1" class="cabecera_menu">NOSOTROS</a></td>
 <td align="center" width="99"><a href="index.php?p=2" class="cabecera_menu">PRODUCTOS</a></td>
 <td align="center" width="79"><a href="index.php?p=3" class="cabecera_menu">NOTICIAS</a></td>
 <td align="center" width="115"><a href="index.php?p=4" class="cabecera_menu">CONTACTENOS</a></td>
 <td width="542" align="right" class="menu_izquierdo_texto"></td>
</tr>
</table>
</body> -->

se requiere que los enlaces no tengan subrayado.

Gracias de antemano,

Mikmoro · #2 (**permalink**) 25/02/2009, 12:56

Modifica:

Cita:

o bien

Cita:

hoberwilly · #3 (**permalink**) 25/02/2009, 16:20

Gracias amigo Mikmoro por tu respuesta, estoy anotando.
Otra solucion que encontre en la web y quisiera me podrias ayudar es el siguiente:
1. tener un archivo externo de css

Código php:

Ver original<!-- <link href="css/tienda.css" rel="stylesheet" type="text/css"> -->

2. Este es parte del codigo:

Código php:

Ver original<!-- .cabecera_menu:link{
    font-family: Arial;
    font-size: 14px;
    color: #C60063;
    text-decoration: none;
}
.cabecera_menu:visited{
    font-family: Arial;
    font-size: 14px;
    color: #C60063;
    text-decoration: none;
}
.cabecera_menu:hover{
    font-family: Arial;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
}
.cabecera_menu:active{
    font-family: Arial;
    font-size: 14px;
    color: #C60063;
    text-decoration: none;
} -->

La consulta es el siguiente:
a. Que diferencias se tienen entre: link, visited, hover, active
b. Y como implementarlo para k al pasar el raton por una celda (<td>)pinte esta

Código php:

Ver original<!-- <td align="center" height="32" width="57" onmouseover='this.style.background="#C10061"' onmouseout='this.style.background=""'><a href="index.php" class="cabecera_menu" >INICIO</a></td> -->

avanze con esto pero me parece no adecuado
c. Y existe la manera de como al momento de pasar por la celda ya se realiza un link (no al pasar el mouse en la palabra INICIO, que eso ya esta), osea por las dos maneras?

Gracias de antemano,

malcomxar · #4 (**permalink**) 25/02/2009, 21:14

Hola hoberbilly, la diferencia es que cumplen disitnta funcion
link es el el estilo que se muestra apenas entras a la pagina, visited es el estilo del link que te indica que ya lo visitaste, hover es cuando le pasas el mouse por encima y active es el estilo cuando lo clikeas.

En el codigo que vos pegas lo podes simplificar de la siguiente manera

Código:

 .cabecera_menu:link, .cabecera_menu:visited, .cabecera_menu:hover,  .cabecera_menu:active {
    font-family: Arial;
    font-size: 14px;
    color: #C60063;
    text-decoration: none;

Ves que queda mas "limpio"??
Eso siempre y cuando quieras que el estilo de link, active, hover y visited sea el mismo...
Ahora si los queres trabajar por separado con distintos estilos cada uno te conviene dejarlos como los tenes.

Para que una celda se "pinte" cuando le pasas por arriba tenes que usar el atributo hover
Podes hacer asi

Código:

td:hover {
background: #ff0000;
}

Tenes que adaptarlo vos porque aplicado de ese modo afectaria a todas las tablas y todas las "TD" de tu pagina.

En cambio si lo queres para una td especifica podes usar

Código:

td.pintada:hover {
background: #ff0000;
}

para ser mas especifico y pintar la que vos quieras usando el siguiente esquema

Código:

<table>
<tr>
<td class="pintada">Esta celda se pinta cuando le pases el mouse</td>
<td>Esta celda no se pinta cuando le pases el mouse</td>
</tr>
</table>

La pregunta C no la entendi :S

Espero se haya entendido.

Saludos ;)

hoberwilly · #5 (**permalink**) 26/02/2009, 07:06

Muchas gracias Malcomxar, de hecho que tus explicaciones me han servido de mucho para enterderlo el codigo.
Al respecto de la pregunta C:
Quisiera se ingresara al siguiente link (http://www.emitations.com/), aqui en los links al pasar el mouse por la celda (ojo no pasar por las palabra INICIO, que tambien es correcto) se linkea a la otra pagina:

<td align="center" height="32" width="57" onmouseover='this.style.background="#C10061"' onmouseout='this.style.background=""'><a href="index.php" class="cabecera_menu" >INICIO</a></td>

Espero quede claro esta ultima consulta, gracias otra vez

Mikmoro · #6 (**permalink**) 26/02/2009, 07:57

Deberías hacerlo así:

HTML:

Cita:

<td align="center" height="32" width="57"><a href="index.php" class="cabecera_menu" >INICIO</a></td>

CSS:

Cita:

a.cabecera_menu {display: block;
width: 100%;
height: 100%;
}
a.cabecera_menu:hover {background-color: #C10061;}

Ejemplo funcionando

hoberwilly · #7 (**permalink**) 26/02/2009, 13:53

Muchas gracias otra vez Mikmoro, solo una consultita al realizar el arreglo los links se me visualizan en la parte superior de las celdas?

Mikmoro · #8 (**permalink**) 26/02/2009, 16:06

Prueba añadiendo a "a.cabecera_menu", line-height: 32px;

hoberwilly · #9 (**permalink**) 26/02/2009, 16:34

Para cerrar el tema, con unas consultas al respecto por favor,
Quisiera saber como funciona display: block; width: 100%; y este ultimo line-height: 32px (porque 32px);

Saludos,

hoberwilly · #10 (**permalink**) 27/02/2009, 08:30

Estuve leyendo el manual, y encontre unas respuestas que por favor me podrian ayudar:
1. display: block. Textualmente dice: Permite mostrar un elemento como si fuera un elemento de bloque, independientemente del tipo de elemento que se trate.
...a esto no entiendo a que se llaman elementos de bloque (aqui esta creo enterder la respuesta de su funcionalidad???)
2. porque la anchura al 100%???? (width), idem para el height.
3. con este line-height (interlineado) estamos al 50% de la respuesta, solo falta la duda del porque 32px...sera por la altura que presenta el <td>???

Gracias de antemano,

hoberwilly · #11 (**permalink**) 11/03/2009, 17:02

Hola Mikmoro, recurro de nuevo para pedir por favor me sepan orientar a la siguiente implementación.
Tengo el css, según las sugerencias arriba mencionadas:

Código php:

Ver original<!-- <style type="text/css">
<!--
.visita {
    font-family:  Arial;
    font-size: 13px;
    font-weight: semi-bold;
    color: blue;
    background-color: "#F2F2F2"; 
}
.encabezado {
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    color: white;
    background-color: #48A4FF;
}
a.menu_izq:link,a.menu_izq:visited{
    font-family: Arial;
    font-size: 12px;
    font-weight: semi-bold;
    color: blue;
    text-decoration: none;
    background-color: "#F2F2F2"; 
}
a.menu_izq:hover,a.menu_izq:active{
    font-family: Arial;
    font-size: 13px;
    font-weight: semi-bold;
    color: #FF9D3C;
    text-decoration: underline;
    background-color: "#F2F2F2"; 
}
a.menu_izq{
    display: block;
    width: 100&#37;;
    height: 100%;
    line-height: 65px;
    text-indent: 5px;
}
-->
</style> -->

y este es mi pagina php:

Código php:

Ver original<!-- <body>
<table width="162" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="2" height="28" align="center" valign="middle" class="encabezado">Categor&iacute;as</td>
</tr>
<tr>
    <td><img src="img/linea_menu.gif" width="85" height="2"></td>
    <td><img src="img/linea_menu.gif" width="77" height="2"></td>
</tr>
<tr>
    <td valign="middle"><a href="index.php?p=1" class="menu_izq">Para Ellas</a></td>
    <td valign="middle"><a href="index.php?p=1"><img src="fotos/ella.jpg" width="77" height="65" alt="Para Ellas" border="0"></a></td>
</tr>
<tr>
    <td><img src="img/linea_menu.gif" width="85" height="2"></td>
    <td><img src="img/linea_menu.gif" width="77" height="2"></td>
</tr>
</table>
</body> -->

El tema esta en que quisiera consultar si se puede hacer que al momento de pasar el mouse por la imagen el link se active tambien (ojo que esta cuando pasa el mouse sobre el link)...esto es algo como la sgte pagina:
http://www.uwiener.edu.pe/sigunet.aspx

Gracias de antemano por la ayuda,