XHTML CSS et a:hover + img

Résolu/Fermé

crou - 3 juin 2007 à 19:09
FiX067 Messages postés 1 Date d'inscription vendredi 23 novembre 2012 Statut Membre Dernière intervention 23 novembre 2012 - 23 nov. 2012 à 19:03

Bonjour,

Dans mon css, j'ai mis:

a:hover {
color : #ffffff;
text-decoration : none;
background-color : #4c0000;
font-style : normal;
}

Ce qui signifie que le lien aura un background plutot rouge (4c0000). Mais dans la ban j'ai voulu mettre un lien menant a l'index. Et a cause de ce a:hover je n'arrive pas a enlever ce background rouge qui s'affiche juste derriere l'image.

J'ai voulu créer un img{ ... } mais quoi que je mette a part border-width: 0; il ne veut rien entendre et laisse ce background.

Avez vous une idée pour le retirer ?
Merci d'avance.

A voir également:

XHTML CSS et a:hover + img
Enlever couleur lien css ✓ - Forum CSS
Mettre une image à gauche css ✓ - Forum CSS
Css retour à la ligne ✓ - Forum CSS
Saut de lignes sans <br/> ✓ - Forum Webmastering
Css exposant ✓ - Forum CSS

10 réponses

Réponse 1 / 10

crou
3 juin 2007 à 19:50

Qu'est ce que tu veux dire par la ?
dans img:

border : 0; ?
Exemple:

img {
border-width : 0;
border : 0;
}

Ca ne fonctionne pas :/
J'ai effectivement (comme avant ) pas la bordure autour. Mais dès que je passe la souris j'ai en bas seulement de la page (avec IE et Firefox) Une bordure rouge comme sur les liens comme si c'était un texte.

Merci

Réponse 2 / 10

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
3 juin 2007 à 19:19

Salut,
autour d'une image avec lien, le seul moyen que je connaisse pour enlever la bordure, c'est effectivement le border 0px (car par défaut à 1)

Réponse 3 / 10

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
3 juin 2007 à 22:10

l'image est décalée vers le haut.
à défaut de corriger cela, tu peux appliquer une règle de style spécifique au moyen d'une classe :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" >

	<head>
	<title>Un titre</title>
	<style type="text/css" media="screen">
		img {
		border : none;
		}
		a:link {
		color : red;
		text-decoration : none;
		font-weight : normal;
		font-style : normal;
		}
		a:visited {
		color : red;
		text-decoration : none;
		}
		a:hover {
		color : #ffffff;
		text-decoration : none;
		background-color : green;
		font-style : normal;
		}
		a:active {
		color : green;
		text-decoration : none;
		}
		a.image:hover{
		background-color:transparent;
		}
	</style>
	</head>
	<body>
	<p>Une ban:
	<a href="index.html" class="image"><img width="276px" height="110px" src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="Test"/></a>
	</p>
	
	<p>Un lien:
	<a href="#">Un lien!</a>
	</p>
	</body>
	
</html>

ps : les autres règles sont à mon avis inutiles.

Réponse 4 / 10

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
3 juin 2007 à 19:57

dans tous les cas, il faut rajouter px ou em ou autre pour des valeurs...
mais en l'occurence, me suis peut etre trompé, essaye avec

border : none;

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 10

crou
3 juin 2007 à 20:03

Même chose:
j'ai l'impression que le a:hover est au dessus de ça et que pour le changer il faudrait faire en sorte que ce hover agisse après la bannière.

Sinon, je ne vois, peut-être as tu une autre idée?

Réponse 6 / 10

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
3 juin 2007 à 20:10

Donnes le code html de la page avec... que je vois comment tu as construit la page, ou un lien!

Réponse 7 / 10

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
3 juin 2007 à 21:05

salut,

je confirme, pour enlever la bordure d'une image contenue dans un lien il faut bien :

img{
border: none;
}

ou {border-width: 0;}, l'unité est inutile.

mais pour l'histoire d'arrière plan, sans le code…

Réponse 8 / 10

crou
3 juin 2007 à 21:48

J'ai donné la partie du code qui gènere le background-color sur l'image. Mais voici tout le code source:

Exemple.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" >

	<head>
	<title>Un titre</title>
	<style type="text/css" media="screen">@import "style.css";</style>
	</head>
	<body>
	<p>Une ban:
	<a href="index.html"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="Test"/></a>
	</p>
	
	<p>Un lien:
	<a href="#">Un lien!</a>
	</p>
	</body>
	
</html>

(Bon il est pas xhtml w3c validator only pour l'exemple) :]

et le style.css:

html {
position : absolute;
overflow : scroll;
}

body {
height : 50px;
font-family : Arial;
}

img {
border-width : none;
border : none;
border-style: none;
}

a:link {
color : red;
text-decoration : none;
font-weight : normal;
font-style : normal;
}

a:visited {
color : red;
text-decoration : none;
font-weight : normal;
font-style : normal;
}

a:hover {
color : #ffffff;
text-decoration : none;
background-color : green;
font-style : normal;
}

a:active {
color : green;
text-decoration : none;
font-style : normal;
}

Voila.
Si vous testez, vous remarquerez une barre en dessous du logo de google ! c'est cette barre que je veux retirer, et les a:* me gene :(

Merci de votre aide.

Réponse 9 / 10

crou
3 juin 2007 à 22:14

Merci de la réponse, ca marche.
Les autres règles ne sont pas inutiles dans la page que je construis. Ca m'aide beaucoup. Décidément, les CSS c'est puissant.

résolu !
a++ !

Réponse 10 / 10

FiX067 Messages postés 1 Date d'inscription vendredi 23 novembre 2012 Statut Membre Dernière intervention 23 novembre 2012
23 nov. 2012 à 19:03

Ce message date mais bon... j'ai actuellement le même soucis.

Pour le régler, rien de plus simple :

Au lieu de mettre un

a:hover img {...}

qui est censé fonctionner... il faut mettre un

a:link img { 
border:none; 
overflow:hidden; 
display:block; 
}

Cela fonctionne. Super, non ?!

Discussions similaires

[CSS] Forcé retour à la ligne

trait horizontal avec du css

HTML - définir taille bouton

[CSS] Mettre un objet au premier plan

Enlever le soulignement sous les liens en HTML/CSS

Discussions similaires

Newsletters