99
Mise en forme des liens
a[href$=".rss"], a[href$=".rdf"] {
background: url(img/feedLink.gif) no-repeat right top;
padding-right: 10px;
}
Toutes.ces.techniques.peuvent.contribuer.à.améliorer.le.confort.d’usage.de.votre.site..En.
signalant.les.liens.externes.ou.les.documents.téléchargeables,.vous.indiquez.aux.utilisateurs.
à.quoi.ils.doivent.s’attendre.en.cliquant.sur.un.lien..Vous.leur.évitez.donc.d’être.frustrés.et.
d’avoir.à.revenir.sur.leurs.pas..
Internet.Explorer 6.et.ses.versions.antérieures.ne.prennent.malheureusement.pas.en.charge.le.
sélecteur.d’attribut..Vous.pouvez.cependant.créer.un.effet.semblable.en.ajoutant.une.classe.à.
chaque.élément.grâce.à.du.JavaScript.et.au.DOM..L’excellente.fonction.getElementBySelector.de.Simon.Willison.en.est.l’un.des.meilleurs.exemples..Pour.plus.d’informations.à.ce.
sujet,.consultez.la.page.(en.anglais).http://simonwillison.net/2003/Mar/25/getElementsBySelector/..jQuery.permet.aussi.de.réaliser.une.opération.très.similaire..
Création de liens qui ressemblent à des boutons
Les. ancres. sont. des. éléments. incorporés.. Cela. signifie. qu’elles. ne. s’activent. que. lorsque.
vous.cliquez.sur.le.contenu.du.lien..Pourtant,.il.peut.arriver.que.vous.souhaitiez.créer.des.
mécanismes.plus.proches.des.boutons,.avec.des.zones.réactives.plus.larges..Pour.cela,.vous.
devez.attribuer.la.valeur.block.à.la.propriété.display.et.modifier.la.largeur,.la.hauteur.et.
les.autres.propriétés.de.l’élément.pour.créer.le.style.et.la.zone.réactive.désirés.
a {
display: block;
width: 6.6em;
line-height: 1.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
background-color: #8cca12;
color: #fff;
}
Le.lien.résultant.est.présenté.à.la.Figure 5.8.
Figure 5.8
Lien mis en forme à la
manière d’un bouton.
À.présent,.le.lien.s’affiche.comme.un.élément.de.niveau.bloc.dans.lequel.vous.pouvez.cliquer.n’importe.où.pour.activer.le.lien..
Si.vous. examinez. le. code. CSS,. vous. verrez. que.la. largeur. a. été. explicitement. définie. en.
cadratins.(em)..Par.nature,.les.éléments.de.niveau.bloc.s’étendent.sur.toute.la.largeur.disponible..Si.la.largeur.de.leur.élément.parent.dépasse.celle.requise.pour.le.lien,.il.faut.attribuer.
la.largeur.désirée.au.lien..Il.le.faudrait.si.vous.souhaitiez.utiliser.un.lien.de.ce.type.dans.
Mise en forme des liens
a[href$=".rss"], a[href$=".rdf"] {
background: url(img/feedLink.gif) no-repeat right top;
padding-right: 10px;
}
Toutes.ces.techniques.peuvent.contribuer.à.améliorer.le.confort.d’usage.de.votre.site..En.
signalant.les.liens.externes.ou.les.documents.téléchargeables,.vous.indiquez.aux.utilisateurs.
à.quoi.ils.doivent.s’attendre.en.cliquant.sur.un.lien..Vous.leur.évitez.donc.d’être.frustrés.et.
d’avoir.à.revenir.sur.leurs.pas..
Internet.Explorer 6.et.ses.versions.antérieures.ne.prennent.malheureusement.pas.en.charge.le.
sélecteur.d’attribut..Vous.pouvez.cependant.créer.un.effet.semblable.en.ajoutant.une.classe.à.
chaque.élément.grâce.à.du.JavaScript.et.au.DOM..L’excellente.fonction.getElementBySelector.de.Simon.Willison.en.est.l’un.des.meilleurs.exemples..Pour.plus.d’informations.à.ce.
sujet,.consultez.la.page.(en.anglais).http://simonwillison.net/2003/Mar/25/getElementsBySelector/..jQuery.permet.aussi.de.réaliser.une.opération.très.similaire..
Création de liens qui ressemblent à des boutons
Les. ancres. sont. des. éléments. incorporés.. Cela. signifie. qu’elles. ne. s’activent. que. lorsque.
vous.cliquez.sur.le.contenu.du.lien..Pourtant,.il.peut.arriver.que.vous.souhaitiez.créer.des.
mécanismes.plus.proches.des.boutons,.avec.des.zones.réactives.plus.larges..Pour.cela,.vous.
devez.attribuer.la.valeur.block.à.la.propriété.display.et.modifier.la.largeur,.la.hauteur.et.
les.autres.propriétés.de.l’élément.pour.créer.le.style.et.la.zone.réactive.désirés.
a {
display: block;
width: 6.6em;
line-height: 1.4;
text-align: center;
text-decoration: none;
border: 1px solid #66a300;
background-color: #8cca12;
color: #fff;
}
Le.lien.résultant.est.présenté.à.la.Figure 5.8.
Figure 5.8
Lien mis en forme à la
manière d’un bouton.
À.présent,.le.lien.s’affiche.comme.un.élément.de.niveau.bloc.dans.lequel.vous.pouvez.cliquer.n’importe.où.pour.activer.le.lien..
Si.vous. examinez. le. code. CSS,. vous. verrez. que.la. largeur. a. été. explicitement. définie. en.
cadratins.(em)..Par.nature,.les.éléments.de.niveau.bloc.s’étendent.sur.toute.la.largeur.disponible..Si.la.largeur.de.leur.élément.parent.dépasse.celle.requise.pour.le.lien,.il.faut.attribuer.
la.largeur.désirée.au.lien..Il.le.faudrait.si.vous.souhaitiez.utiliser.un.lien.de.ce.type.dans.