problem CSS... :)
a ver como se me da esto del CSS... he creado una hoja de estilos, donde he definido para el vínculo el siguente estilo....
<code>
a {
color: #888;
background-color: #FFF;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px;
text-decoration: none;
}
</code>
he dejado un vínculo con fondo, donde el fondo es dos pixels más de ancho por cada extremo para dejar margen entre el fondo y el texto que lo contiene...
le problem: Cuando el vínculo es una imagen, tambien me deja esos 2 px de padding a los lados... he creado el estilo:
<code>
imgvinculo {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
</code>
aplicandolo de la siguiente manera...
<code>
<a href="constructoras.asp" target="contenido"><img name="boton_consturctoras" src="img/esqueleto/boton_consturctoras.gif" width="137" height="20" border="0" alt="constructoras" class="imgVinculo"></a></code>
pero me sigue dejando espacios a los lados...
Sé que podría renombrar a y aplicarselo a todos los links que cree, pero me gustaría evitar eso...
No sé si me explico... GRACIAS
black
arreglado... :)
estaba mal nombrado imgvinculo (le falta el punto delante) y se lo he aplicado al vínculo en vez de a la imagen :)
gracias por tu respuesta tan rápida black
de nada black :)
Usuario desconocido
Vamos a tener que pasar control anti-doping... ;)
black
Wences
Vamos a tener que pasar control anti-doping... ;)
todavía es temprano para mi... la noche fue muy larga... :)
hartum
Yo doy positivo en casi todo, soy politoxicomano, pero solo en justa medida.
dirarck
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
<head>
<title>title here!</title>
<meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"' />
<style type="text/css">
a {
color: #888;
background-color: #FFF;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px;
text-decoration: none;
}
a img {
padding-right: 0;
padding-left: 0;
width: 137px;
height:20;
border:0;
}
</style>
</head>
<body>
<p>
<a href="#">
<img id="boton_consturctoras" src="img/esqueleto/boton_consturctoras.gif" alt="constructoras" />
</a>
<a href = "#">
enlace
</a>
</p>
</body>
</html>
De esta manera aprovechas la herencia de CSS y escribes menos código, con la consiguiente reducción de peso de la página
dirarck
<code>
<p>
<a href="#">
<img id="boton_consturctoras" src="img/esqueleto/boton_consturctoras.gif" alt="constructoras" />
</a>
<a href = "#">
enlace
</a>
</p>
</code>
Perdón, no active la opción de código
black
si, es otra opción! :)
gracias! lo adaptaré a mi codigo! :)
meddle
bingo, usar selectores es mas mejor ;P
black
meddle
bingo, usar selectores es mas mejor ;P
palabra de dios... ;)
cbp
¿si escribes "a img" significa que ese estilo sólo lo va a aplicar a los hipervínculos que sean imágenes? si es así, que descubrimiento más chulo... :D
¿qué es un selector y qué otros hay? ¿es algo así cómo el "a:hover"?
black
funsiona en IE... pero no en mozilla...
yo tenía esto...
<code>
a {
color: #888;
background-color: #FFF;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px;
text-decoration: none;
}
a:hover {
color: #FFF;
background-color: #888;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px;
text-decoration: none;
}
</code>
por lo tanto al poner una imagen me salia con espacios a los lados... entonces cree esto:
<code>
.imgvinculo {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.imgvinculo:hover {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
</code>
mi descubrimiento personal, es que no sabía que se puderia poner ":hover" a un estilo creado por mi... :)
alguna idea de por que no funciona en mozilla?
meddle
raro que no funcione, tienes un link?
tambien puedes probar a > img
o mirar la especificacion
cbp
meddle
la especificacion
uf, aquí hay cosas que no conocía y que son muuuuuuuuuuuy útiles :D
meddle
es que os cuido bien, eh? :P
dirarck
<code>
A:link {text-decoration:none;color:#660000;}
A:visited {text-decoration:none;color:#660000;}
A:active {text-decoration:none;color:#660000;}
A:hover {text-decoration:none;color:#FF9966;background: #aa0000; width: 1px;}
</code>
Lo hago de esa manera y no me da problemas en ningún navegador que soporte CSS
black
jeje! padaso de link :)
no tengo nada colgado todavía... no puedo subir nada.. :(
se supone que con esto es más que suficiente no?
<code>a {
color: #888;
background-color: #FFF;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px;
text-decoration: none;
}
a img {
padding-right: 0px;
padding-left: 0px;
}
a:hover {
color: #FFF;
background-color: #888;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px;
text-decoration: none;
}</code>
y no hace falta meterle nada a la imagen, es decir que esto está bien...
<code>
<img src="img/esqueleto/boton_consturctoras.gif" />
</code>
meddle
sastamente
black
pues entonces no me lo explico... será porque todavía me quedan tablas dando vueltas por ahí... :)
de todas formas, ya lo solucioné de la otra manera...
cuando tenga un poco más de tiempo le hecho un vistazo... :)
GRASIAS!
meddle
pon la solucion que has encomntrado, plis.
tambien tenias la opcion de hacer a > img
puedes leer mas sobre selectores en el link de antes o en http://css.maxdesign.com.au/selectutorial/
cbp
meddle
es que os cuido bien, eh? :P
po zi, la verdad :D
black
meddle
pon la solucion que has encomntrado, plis.
tambien tenias la opcion de hacer a > img
puedes leer mas sobre selectores en el link de antes o en http://css.maxdesign.com.au/selectutorial/
lo puse antes... creo el selector (se llama así?) imgvinculo
<code>
.imgvinculo {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.imgvinculo:hover {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
</code>
y se lo aplico de esta manera...
<code>
<a href="constructoras.asp" target="contenido" class="imgvinculo"><img name="boton_consturctoras" src="img/esqueleto/boton_consturctoras.gif" width="137" height="20" border="0" alt="constructoras"></a>
</code>
es válido?
por cierto, no entiendo lo de a>img
meddle
lo que has puesto ahi no tiene mucho sentido. le estas diciendo que el enlace tenga padding 0 y al hacer hover tambien. Pero no dices nada de la imagen. Creo que dirarck ya te ha puesto el codigo bueno, revisalo y en cualquier caso si no funciona usa a > img (que no es lo mismo que a>img).
EDIT:
Es decir, <code>a.imgvinculo, a.imgvinculo img {padding : 0px}</code> o <code>a.imgvinculo, a.imgvinculo > img {padding : 0px}</code>
Pero el uso de una clase .imgvinculo solo estaria justificado si hay otros muchos enlaces (que no deban llevar padding 0) o que otros enlaces sean de imagen.
Klein
Con esto te tendría que sobrar:
a {
color: #888;
background-color: #FFF;
padding: 0px 2px 0px 2px;
text-decoration: none;
}
a:hover
{
color: #FFF;
background-color: #888;
}
a.imgvinculo{padding:0px}
Meddle, yo creo que lo que quiere Black es quitar el padding al enlace y no a la imagen, por eso no necesita "a img" y tampoco "a > img"
black
Si, claro! el padding que le sale a la imagen es porque es un vínculo!
Al vínculo le añados dos pixeles de padding por la izquierda y por la derecha, por tema estético. La imagen no tiene inigún tipo de padding! :) pero cuando a esta imagen le pongo un link, la imagen "gana" dos pixeles por cada lado, provocando así una deformación...
Lo que tu propones, klein, está mejorque lo que hago yo. Si señó :)
si es que me explico con el culet-e! :)