Hipervínculos: texto e imagen.

nueve · #1 (**permalink**) 25/01/2010, 08:56

Hola, estoy haciendo mis primeras páginas y ando un poco perdido.

Hasta ahora, siempre que hice un enlace sólo se trataba de texto, así que colocaba <a href="#"> </a> entre el texto en cuestión y luego lo editaba con css.

Si quiero que el enlace además de texto sea un pequeño recuadro alrededor, ¿tengo que introducir una imagen? ¿Y modificarla para cada estado (over...)? ¿Hay alguna otra manera? ¿La celda de una tabla puede convertirse en botón?

Gracias!

Calizman · #2 (**permalink**) 25/01/2010, 12:20

Saludos!

Para eso, puedes ponerle al CSS un border: 1px solid #000; Eso le hará un recuadro al hipervinculo. Si deseas hacerlo mas grande, puedes modificar el tamaño interno de el recuadro con padding.

Ahora te recomiendo esto: Si lo que vas a hacer es un menu entero, lo mejor es usar una lista desordenada (<ul><li></li></ul>) y entre cada <li> pones hipervinculos. Mira este enlace que seguro te sirve.

Hasta Luego!

nueve · #3 (**permalink**) 26/01/2010, 11:21

Gracias Calizman

He borrado el código anterior y he hecho una lista como me recomendabas, pero sigo teniendo el mismo problema.

Sólo funciona como botón el texto en cuestión, y yo quiero que todo el recuadro sea un botón. ¿Cómo puedo hacerlo?

Además, en IE queda alineado a la izquierda con un margin, tal y como yo quiero. Pero no lo consigo en Firefox ni en Chrome, ¿qué debería utilizar para eso?

Adjunto los códigos:

<body id="tapiz">

<div id="despliegue">

<div id="encabz">
</div>

<div id="contenido">
<table width="100%" border="0" cellspacing="15px" id="tablagrande">
<tr>
<td id="cbotones">
<ul id="botones">
<a href="#"><li>Inicio</li></a>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Contacto</a></li>
</ul>

</td>
<td id="ccontenido"></td>
<td id="cenlaces"> </td>
</tr>
</table>

</div>

</div>

</body>
</html>

@charset "utf-8";

}

body {
background-color: #97BEC6;
}
#tapiz {
background-color: #97BEC6;
background-image: url(images/azul.jpg);
}

#despliegue {
background-color: #003C65;
width: 1000px;
margin: 0px auto;
height: 625px;
margin-top: 0px;
}

#encabz {
background-color: #03F;
height: 150px;
width: 980px;
margin: 0px auto;
margin-top: 10px;
padding-top: 0px;
background-image: url(images/titulo.jpg);
}

#contenido {
background-color: #FFF;
width: 980px;
margin: 0px auto;
margin-top: 30px;
height: 425px;
}
#tapiz #despliegue #contenido #tablagrande tr #cbotones {
width: 15%;
}
#tapiz #despliegue #contenido #tablagrande tr #ccontenido {
width: 65%;
}
#tapiz #despliegue #contenido #tablagrande tr #cenlaces {
width: 20%;
}
#tapiz #despliegue #contenido #tablagrande tr #cbotones #botones {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
list-style-position: outside;
list-style-image: none;
list-style-type: none;
margin-left: -5px;
}
#tapiz #despliegue #contenido #tablagrande tr #cbotones #botones li {
height: 20px;
padding: 5px;
background-color: #003C65;
float: none;
display: block;
margin: 10px;
text-align: center;
vertical-align: middle;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

saludos

jomaruro · #4 (**permalink**) 26/01/2010, 17:38

Hola:

De entrada tienes el <li> inicio mal colocado:

Cita:

Iniciado por nueve

<ul id="botones">
<a href="#"><li>Inicio</li></a>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Contacto</a></li>
</ul>

Deberías colocarlo así:

Código CSS:

Ver original<li><a href="#">Inicio</a></li>

Para el cambio de imagen busca información sobre las pseudoclases.

Saludos.

P.D.: Como veo que estás empezando te recomendaré que te leas los manuales sobre CSS de la página www.librosweb.es, donde también podrás encontrar información sobre las pseudoclases.