28217 sujets

CSS et mise en forme, CSS3

Paramètres CSS sur les adresses mails (liens mailto:)

je cherche à appliquer des styles sur une liste d'adresses emails (hover, visited etc...), comme on peut le faire avec des liens classiques.
Je ne trouve malheureusement pas l'astuce pour arriver à mes fins.
Est-ce seulement possible ?
C'est possible ... mais pas sur tous les navigateurs !

A priori, quelque chose comme ca par exemple : 

a[href*=mailto:]:hover { }
après vérification ma solution comme celle de Kevin marche sans problème, vérifie ton code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>tropdelaballe</title>
<style type="text/css">
<!--
a[href*="mailto"]:hover {background:red}
-->
</style>
</head>

<body>
<a href="mailto:brice@mentalwarp.com">brice</a>
</body>
</html>
mea culpa Smiley confused

@brice> Alors c'est l'accent circonflexe (^) ou l'étoile (*) ?

@+, HoPHP
Modifié par HoPHP (20 Feb 2005 - 23:40)
si tu lis un peu le lien que je donne plus haut tu trouve ceci:

E[foo ]  	an E element with a "foo" attribute  
E[foo="bar"] 	an E element whose "foo" attribute value is exactly equal to "bar"
E[foo~="bar"] 	an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar" 	
E[foo^="bar"] 	an E element whose "foo" attribute value begins exactly with the string "bar" 
E[foo$="bar"] 	an E element whose "foo" attribute value ends exactly with the string "bar" 
E[foo*="bar"] 	an E element whose "foo" attribute value contains the substring "bar"

Modifié par brice (21 Feb 2005 - 00:04)
HoPHP a écrit :
Alors c'est l'accent circonflexe (^) ou l'étoile (*) ?


L'accent circonflexe ^ veux dire "contient la chaine" et l'étoile veux dire "commence par" , ou le contraire je sais plus Smiley langue
Kevin a écrit :
L'accent circonflexe ^ veux dire "contient la chaine" et l'étoile veux dire "commence par" , ou le contraire je sais plus Smiley langue


l'inverse
Rho, j'y étais presque Smiley langue !

Enfin, de toute facon, ca fonctionne pas avec IE (j'avous que j'ai pas testé sous KHTML et Safari) ... *soupirs* Smiley ohwell
Salut,

J'ai surement pas compris la question parce que je trouve ça simple alors que j'y connais rien ... Smiley confused

Personnellement, pour avoir un style sur un lien E-Mail, je fais ça :

Page XHTML
(...)
<ul class="liens-texte">
			<li><a href="mailto:dieteticien.fr.fm@wanadoo.fr?subject=E-Mail via site"
title="E-Mail de contact">dieteticien.fr.fm@wanadoo.fr</a></li></ul>
(...)


Feuille de style CSS externe
(...)
.liens-texte {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.95em; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.liens-texte LI {
	FLOAT: left; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 5px
}
.liens-texte A {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; DISPLAY: block; BACKGROUND: gray; FLOAT: left; MARGIN: 0px; BORDER-LEFT: gray 1px solid; COLOR: #ffffff; BORDER-BOTTOM: gray 1px solid; TEXT-ALIGN: center; TEXT-DECORATION: none
}
.liens-texte A:visited {
	MARGIN: 0px; COLOR: #ffffff; TEXT-DECORATION: none
}
.liens-texte A:hover {
	BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #ccc; BORDER-LEFT: #ccc 1px solid; COLOR: #000; BORDER-BOTTOM: #ccc 1px solid
}
.liens-texte A:active {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BACKGROUND: gray; BORDER-LEFT: gray 1px solid; COLOR: red; BORDER-BOTTOM: gray 1px solid
}
(...)


Si cette réponse est un grossière erreur, elle veut bien être effacée Smiley cligne
en effet, tu fais appel à une classe 'liens-texte', c'est justement ce que l'on essaye d'éviter Smiley cligne
Sujet clos
Aller à