144
Maîtrise des CSS
table.cal {
border-collapse: separate;
border-spacing: 0;
text-align: center;
color: #333;
}
.cal th, .cal td {
margin: 0;
padding: 0;
}
La.spécification.CSS.inclut.une.propriété.border-spacing.qui.permet.de.contrôler.l’espacement.entre.les.cellules..Malheureusement,.Internet.Explorer 7.et.ses.versions.antérieures.
ne.la.comprennent.pas..Vous.devez.donc.vous.rabattre.sur.l’ancien.attribut.cellspacing.
qui.a.au.moins.le.mérite.d’être.fiable..Cet.attribut.est.à.strictement.parler.un.attribut.de.présentation..Il.s’agit.cependant.encore.de.HTML.valide,.et.c’est.le.seul.moyen.de.contrôler.
l’espacement.des.cellules.dans.Internet.Explorer 6.et 7.

Ajout de style visuel
Le.travail.de.fond.est.réalisé..Il.est.maintenant.temps.d’ajouter.le.style.visuel..Pour.faire.en.
sorte.que.la.légende.de.tableau.ressemble.un.peu.plus.à.un.titre.standard,.vous.pouvez.augmenter.la.taille.de.la.police.et.la.passer.en.gras..Vous.pouvez.également.donner.à.la.légende.
un.peu.d’espace.en.appliquant.un.remplissage.vertical.
.cal caption {
font-size:1.25em;
padding-top: 0.692em;
padding-bottom: 0.692em;
background-color: #d4dde6;
}
Pour.positionner.les.liens.Précédent.et.Suivant.des.deux.côtés.du.mois.courant,.donnez-leur.
une.marge.horizontale.et.faites-les.respectivement.flotter.à.gauche.et.à.droite..Vous.pouvez.
ensuite.leur.attribuer.une.zone.réactive.plus.importante.en.appliquant.un.remplissage..Pour.
mettre.en.forme.ces.liens,.j’ai.choisi.le.sélecteur.d’attribut.afin.de.cibler.leurs.attributs.rel..
Pour.une.prise.en.charge.par.les.anciens.navigateurs,.vous.pouvez.cependant.ajouter.une.
classe. à. chaque. lien.. Une. fois. que. vous. avez. positionné. ces. liens,. mettez-les. en. forme. à.
votre.idée..Dans.cet.exemple,.je.me.contente.de.changer.leur.couleur.d’arrière-plan.lorsque.
l’utilisateur.les.survole.
.cal caption [rel="prev"] {
float: left;
margin-left: 0.2em;
}
.cal caption [rel="next"] {
Précédent

- 161/308

Suivant