Foros del Web » Creando para Internet » CSS »

Hipervínculos: texto e imagen.

Estas en el tema de Hipervínculos: texto e imagen. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/01/2010, 08:56
 
Fecha de Ingreso: enero-2010
Mensajes: 29
Antigüedad: 7 años, 11 meses
Puntos: 0
Hipervínculos: texto e imagen.

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!
  #2 (permalink)  
Antiguo 25/01/2010, 12:20
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Hipervínculos: texto e imagen.

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 26/01/2010, 11:21
 
Fecha de Ingreso: enero-2010
Mensajes: 29
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: Hipervínculos: texto e imagen.

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&nbsp;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">&nbsp;</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
  #4 (permalink)  
Antiguo 26/01/2010, 17:38
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Hipervínculos: texto e imagen.

Hola:

De entrada tienes el <li> inicio mal colocado:

Cita:
Iniciado por nueve Ver Mensaje
<ul id="botones">
<a href="#"><li>Inicio</li></a>
<li><a href="#">Quienes&nbsp;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
  1. <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.

Etiquetas: Ninguno
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 16:54.