114
Maîtrise des CSS
navigation.qui.possède.la.classe.news.qui.affiche.l’état.sélectionné..Pour.compléter.l’effet,.
j’ai.changé.le.style.de.curseur.pour.afficher.le.curseur.de.flèche.par.défaut..Si.on.survole.le.
lien.sélectionné,.le.curseur.ne.change.pas.d’état :.on.n’est.donc.pas.tenté.de.cliquer.sur.le.
lien.vers.la.page.où.l’on.se.trouve.déjà.
Création d’une barre de navigation horizontale simple
Imaginez. que. vous. ayez. une. page. de. résultats. de. recherche. et. que. vous. souhaitiez. créer.
une.liste.de.navigation.paginée.simple.comme.celle.de.la.Figure 6.3..Pour.cela,.vous.devez.
commencer.par.créer.une.liste.numérotée.de.vos.options.de.navigation..
Figure 6.3
La barre de navigation
horizontale des
résultats de recherche.
Vous.remarquerez.que.j’ai.utilisé.l’attribut.rel.pour.signaler.les.pages.précédente.et.suivante.du.jeu.de.résultats..C’est.un.excellent.moyen,.qui.va.se.révéler.pratique.par.la.suite,.
lorsque.nous.souhaiterons.donner.une.autre.apparence.à.ces.liens.en.particulier..
Comme.avec.les.autres.exemples.de.liste.du.chapitre,.vous.devez.commencer.par.supprimer.
les. styles. de. marge,. de. remplissage. et. de. liste. par. défaut. du. navigateur.. Bien. des. développeurs.–.et.j’en.fais.partie.–.préfèrent.utiliser.une.réinitialisation.globale.au.début.de.leur.
feuille.de.styles..Si.vous.le.faites,.sautez.cette.première.étape..
ol.pagination {
margin: 0;
padding: 0;
list-style-type: none;
}
Pour.que.les.éléments.de.la.liste.s’alignent.horizontalement.et.non.verticalement,.attribuez.
la.valeur.inline.à.leur.propriété.display..Pour.la.mise.en.forme.des.listes.horizontales.
plus.complexes,.vous.aurez.cependant.un.meilleur.contrôle.si.vous.faites.flotter.les.éléments.
puis.si.vous.utilisez.des.marges.pour.les.espacer.les.uns.des.autres.
ol.pagination li {
float: left;
margin-right: 0.6em;
}
Maîtrise des CSS
navigation.qui.possède.la.classe.news.qui.affiche.l’état.sélectionné..Pour.compléter.l’effet,.
j’ai.changé.le.style.de.curseur.pour.afficher.le.curseur.de.flèche.par.défaut..Si.on.survole.le.
lien.sélectionné,.le.curseur.ne.change.pas.d’état :.on.n’est.donc.pas.tenté.de.cliquer.sur.le.
lien.vers.la.page.où.l’on.se.trouve.déjà.
Création d’une barre de navigation horizontale simple
Imaginez. que. vous. ayez. une. page. de. résultats. de. recherche. et. que. vous. souhaitiez. créer.
une.liste.de.navigation.paginée.simple.comme.celle.de.la.Figure 6.3..Pour.cela,.vous.devez.
commencer.par.créer.une.liste.numérotée.de.vos.options.de.navigation..
Figure 6.3
La barre de navigation
horizontale des
résultats de recherche.
Vous.remarquerez.que.j’ai.utilisé.l’attribut.rel.pour.signaler.les.pages.précédente.et.suivante.du.jeu.de.résultats..C’est.un.excellent.moyen,.qui.va.se.révéler.pratique.par.la.suite,.
lorsque.nous.souhaiterons.donner.une.autre.apparence.à.ces.liens.en.particulier..
Comme.avec.les.autres.exemples.de.liste.du.chapitre,.vous.devez.commencer.par.supprimer.
les. styles. de. marge,. de. remplissage. et. de. liste. par. défaut. du. navigateur.. Bien. des. développeurs.–.et.j’en.fais.partie.–.préfèrent.utiliser.une.réinitialisation.globale.au.début.de.leur.
feuille.de.styles..Si.vous.le.faites,.sautez.cette.première.étape..
ol.pagination {
margin: 0;
padding: 0;
list-style-type: none;
}
Pour.que.les.éléments.de.la.liste.s’alignent.horizontalement.et.non.verticalement,.attribuez.
la.valeur.inline.à.leur.propriété.display..Pour.la.mise.en.forme.des.listes.horizontales.
plus.complexes,.vous.aurez.cependant.un.meilleur.contrôle.si.vous.faites.flotter.les.éléments.
puis.si.vous.utilisez.des.marges.pour.les.espacer.les.uns.des.autres.
ol.pagination li {
float: left;
margin-right: 0.6em;
}