28173 sujets
CSS et mise en forme, CSS3
Bonjour,
Tu cherches donc à obtenir quelque chose comme wikipédia?
Je n'ai jamais essayé personnellement mais je pense qu'en partant sur ton idée de classe on peux faire quelque chose d'assez simple:
- Assigner une image en background du lien, qu'on aligne à droite du "bloc"
- Définir un padding sur le côté droit du "bloc", suffisant pour qu'apparaisse l'image.
Bien sûr il faudra veiller à ce que la hauteur de l'image soit adaptée à ta plus petite taille de fonte.
J'ai pas tenté le coup, mais ça me paraît une bonne idée de départ.
/bricolage off
Tu cherches donc à obtenir quelque chose comme wikipédia?
Je n'ai jamais essayé personnellement mais je pense qu'en partant sur ton idée de classe on peux faire quelque chose d'assez simple:
- Assigner une image en background du lien, qu'on aligne à droite du "bloc"
- Définir un padding sur le côté droit du "bloc", suffisant pour qu'apparaisse l'image.
Bien sûr il faudra veiller à ce que la hauteur de l'image soit adaptée à ta plus petite taille de fonte.
J'ai pas tenté le coup, mais ça me paraît une bonne idée de départ.
/bricolage off
Ne serait-ce point de ceci dont il est question ?
pcamliti a écrit :
Oui c'est exactement cela ! mais comment réaliser la même chose pour IE ?
Avec une classe sur l'image et une image de fond sur le lien (avec padding-right qui va bien pour faire de la place), c'est jouable. C'est ce que fait Wikipédia.
a.external {
background: url(external.png) no-repeat right center;
padding-right: 13px;
}La limite du système, c'est que si le lien s'étale sur deux lignes l'image est masquée dans IE (6 et 7), tandis que ça marche toujours correctement avec les autres navigateurs.
La solution la plus compatible est d'utiliser une image:
<a href="...">bla bla mon lien <img alt="" src="externe.png" /></a>On peut aussi indiquer l'information dans l'attribut alt, si on pense qu'il faut l'indiquer clairement dans tous les contextes de navigation:
<a href="...">bla bla mon lien <img alt="(lien externe)" src="externe.png" /></a>Le problème va être d'automatiser tout ça...
À ce sujet: CSS 3 définit (dans l'état actuel du module css3-selectors) une syntaxe spécifique pour le sélecteur d'attribut (élément[attribut=valeur], cf. CSS 2.1) qui permet de sélectionner un élément en fonction d'une partie de la valeur d'un de ses attributs.
Concrètement, ça donne ceci:
a[href^=http] {color: red;}
/* Les liens dont l'attribut href a une valeur commençant par "http" seront en rouge */La bonne nouvelle, c'est que bien qu'il s'agisse d'une spécification CSS 3, c'est implémenté par la plupart des navigateurs, dont: IE7, FF2, Opera9, Safari3. À voir pour Safari 2 (pas sous la main). Par contre, ça n'est bien sûr pas possible avec IE6, qui ne comprend pas du tout le sélecteur d'attribut (sous quelque forme que ce soit).
Mais niveau automatisation d'une information utile mais pas indispensable, je trouve que c'est une solution plutôt élégante (combinée à une image de fond comme le fait Wikipédia).
Enfin, on pourra aussi utiliser la pseudo-classe :after, mais on gardera à l'esprit qu'elle n'est toujours pas implémentée par IE7.
Page de test:
<!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="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="" />
<style type="text/css">
a[href^=http] {color: red;}
a[href^=http]:after {content: " (lien externe)";
</style>
</head>
<body>
<p>Un lien <a href="#">interne</a> et <a href="interne.html">un autre</a>.</p>
<p>Un lien <a href="http://www.example.com">externe</a>.</p>
</body>
</html>