Ils ont besoin de votre aide

21:04 Problème windows defender! (Virus/Sécurité)
21:04 problème connexion internet (Internet)
21:03 Fichier Outlook .pst écrasé (Messagerie/Chat)
20:59 script yahoo ralentit (Internet)
20:59 internet et tele2 (Internet)
20:58 Ipod Touch version B ?? (Audio numérique)

Statut : Résolu

XHTML CSS et a:hover + img

Posté par

crou, le dimanche 3 juin 2007 à 19:09:08

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.

Configuration: Windows XP
Firefox 2.0.0.4

Répondre à crou Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

gryzzly, le dimanche 3 juin 2007 à 19:19:26

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épondre à gryzzly

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

crou, le dimanche 3 juin 2007 à 19:50:42

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épondre à crou

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

gryzzly, le dimanche 3 juin 2007 à 19:57:27

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;

Répondre à gryzzly

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

crou, le dimanche 3 juin 2007 à 20:03:21

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épondre à crou

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

gryzzly, le dimanche 3 juin 2007 à 20:10:06

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

Répondre à gryzzly

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Dalida, le dimanche 3 juin 2007 à 21:05:53

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…
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien&hellip;

Répondre à Dalida

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

crou, le dimanche 3 juin 2007 à 21:48:01

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&quot; 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épondre à crou

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Dalida, le dimanche 3 juin 2007 à 22:10:45

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&quot; alt="Test"/></a>
	</p>
	
	<p>Un lien:
	<a href="#">Un lien!</a>
	</p>
	</body>
	
</html>

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

Il y a surement des pandas pour ne dépendre de rien&hellip;

Répondre à Dalida

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

crou, le dimanche 3 juin 2007 à 22:14:39

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épondre à crou

Posez votre question Répondre

Trucs & astuces pertinents trouvés dans la base de connaissances

12/01 15h04	[Blogs] Choisir un hébergeur de blog et créer son blog	Blogs
26/01 11h01	la css pour présenter vos images	CSS
24/11 21h44	[CSS] Créer facilement des CSS	CSS
22/05 11h52	[Gravure] Graver ou lire un fichier .IMG / .CCD / .SUB	Gravure
27/01 16h03	=CHANGER L ASPECT DU CURSEUR EN CSS=	CSS

Plus d'astuces sur « XHTML CSS et a:hover + img »

Discussions pertinentes trouvées dans le forum

23/07 09h10	[CSS] hover pas sur tous les éléments	4
25/04 18h10	[XHTML - CSS] Couleur listes à puces ?	2
16/12 22h35	Probleme menu horizontal xhtml/css	2
29/06 11h31	Pb alignement images Dreamweaver XHTML / CSS	5

Plus de discussions sur « XHTML CSS et a:hover + img »

Logiciels pertinents trouvés dans les téléchargements

	ImgBurn - ImgBurn est une application de gravure de CD / DVD / HD DVD / Blu-ray. ImgBurn supporte une grande variété de formats, dont...	Catégorie: Gravure Licence: Freeware/gratuit
	Firstpage - First Page 2006 est un éditeur html gratuit et excellent. Il permet de travailler un code HTML en couleur, ainsi que de...	Catégorie: Editeurs HTML Licence: Freeware/gratuit
	HoverSnap - HoverSnap est tout simplement un programme de capture d'écran. Il est très intuitif et supporte les formats jpg, bmp, png,...	Catégorie: Capture Licence: Freeware/gratuit
	Amaya - Amaya est un éditeur Web, développé conjointement par l'INRIA et le W3C, pour éditer et publier très simplement des pages...	Catégorie: Editeurs HTML Licence: Open Source

Plus de logiciels gratuits sur « XHTML CSS et a:hover + img »

Produits relatifs

TNB CSSP1	Catégorie: Casque audio	7.49 € Alapage
TNB CSSP2	Catégorie: Casque audio	7.49 € Alapage
TNB CSSP4BL	Catégorie: Casque audio	8.69 € Alapage
TNB CSSF033272	Catégorie: Casque audio	44.90 € Alapage

Plus de produits sur « XHTML CSS et a:hover + img »