Bonjour,
Je me suis mis au CSS il y a quelque temps, grâce à l'excellent bouquin de Raphael Goetter sur le sujet. J'en profite pour appliquer mes nouvelles connaissances au site web de ma boîte, qui en a bien besoin.
Je suis parti d'un des gabarits disponibles sur ce site. Je l'ai épluché à fond, et je l'ai peaufiné et adapté à mes besoins.
Voici ce que donne le premier jet (il n'y a qu'une page, et le contenu est plus ou moins bidon):
http://www.microlinux.fr/nouveau/test.html
Vu la taille relativement réduite du site, je ne me suis pas fait suer à mettre en place un CMS. C'est du XHTML statique, et pour le menu de chaque page, je fais simplement un coup de copier/coller.
En revanche, j'aimerais bien que dans mon menu de navigation, la page actuelle se distingue des autres. J'ai réfléchi à la chose, et je vois grosso modo deux possibilités. Voici donc mon menu de navigation:
Notez qu'ici, la page actuelle est un lien qui pointe vers soi-même (a href="#").
Le bout de CSS qui va avec :
Alors comment faire pour que mon "lien" (bidon) vers ma page actuelle apparaisse autrement, par exemple en rouge (vous inquiétez pas pour l'esthétique, je peaufinerai la palette après).
Je vois en gros deux possibilités.
1) Soit je crée une classe .page_actuelle, dans laquelle je définis un color: red;
2) Soit j'opère une autre distinction: j'enlève le <a href=""> </a> autour de ma page actuelle (puisque de toute façon c'est un lien qui pointe vers soi-même), et j'obtiens un simple <li>.
J'avoue que je suis un peu confus pour ça. Je sens que la solution peut être simple et tenir en quatre ou cinq lignes. Mais plus j'y réfléchis, plus je trouve des trucs qui me semblent inutilement compliqués.
Quelqu'un a une idée salvatrice? Un truc simple et orthodoxe?
Modifié par kikinovak (02 Nov 2009 - 14:32)
Je me suis mis au CSS il y a quelque temps, grâce à l'excellent bouquin de Raphael Goetter sur le sujet. J'en profite pour appliquer mes nouvelles connaissances au site web de ma boîte, qui en a bien besoin.
Je suis parti d'un des gabarits disponibles sur ce site. Je l'ai épluché à fond, et je l'ai peaufiné et adapté à mes besoins.
Voici ce que donne le premier jet (il n'y a qu'une page, et le contenu est plus ou moins bidon):
http://www.microlinux.fr/nouveau/test.html
Vu la taille relativement réduite du site, je ne me suis pas fait suer à mettre en place un CMS. C'est du XHTML statique, et pour le menu de chaque page, je fais simplement un coup de copier/coller.
En revanche, j'aimerais bien que dans mon menu de navigation, la page actuelle se distingue des autres. J'ai réfléchi à la chose, et je vois grosso modo deux possibilités. Voici donc mon menu de navigation:
<div id="navigation">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="public.html">Public concerné</a></li>
<li><a href="configurations.html">Configurations sur mesure</a></li>
<li><a href="avantages.html">Linux, c'est mieux ?</a></li>
<li><a href="#">Linux, c'est difficile ?</a></li>
<li><a href="captures.html">À quoi ça ressemble ?</a></li>
<li><a href="formation_utilisateurs.html">Formation utilisateurs</a></li>
<li><a href="formation_administrateurs.html">Formation administrateurs</a></li>
<li><a href="organisation_formations.html">Organisation des formations</a></li>
<li><a href="documentation.html">Linux aux petits oignons</a></li>
<li><a href="presse.html">Microlinux dans la presse</a></li>
<li><a href="contact.html">Contactez Microlinux</a></li>
</ul>
</div><!-- #navigation -->Notez qu'ici, la page actuelle est un lien qui pointe vers soi-même (a href="#").
Le bout de CSS qui va avec :
#navigation {
width: 22%;
float: left;
}
#navigation ul {
margin: 0;
padding: 20px 10px;
list-style: none;
}
#navigation a {
display: block;
height: 1%;
padding: 2px 2px 2px 2px;
line-height: 1.3;
font-size: .85em;
letter-spacing: -1px;
font-weight: bold;
color: #ccc;
text-decoration: none;
}
#navigation {
background-color: #447bd4;
}
#navigation a:hover, #navigation a:focus {
color: orange;
background-color: #6a93d4;
}Alors comment faire pour que mon "lien" (bidon) vers ma page actuelle apparaisse autrement, par exemple en rouge (vous inquiétez pas pour l'esthétique, je peaufinerai la palette après).
Je vois en gros deux possibilités.
1) Soit je crée une classe .page_actuelle, dans laquelle je définis un color: red;
2) Soit j'opère une autre distinction: j'enlève le <a href=""> </a> autour de ma page actuelle (puisque de toute façon c'est un lien qui pointe vers soi-même), et j'obtiens un simple <li>.
J'avoue que je suis un peu confus pour ça. Je sens que la solution peut être simple et tenir en quatre ou cinq lignes. Mais plus j'y réfléchis, plus je trouve des trucs qui me semblent inutilement compliqués.
Quelqu'un a une idée salvatrice? Un truc simple et orthodoxe?
Modifié par kikinovak (02 Nov 2009 - 14:32)
), et ce n'est certainement pas malpropre (il faut arrêter de dire «c'est pas propre» quand on rencontre un code qui nous interpelle, la «propreté» n'est pas un critère objectif de qualité). Par contre ce n'est pas indispensable, notamment si on opte pour d'autres conventions typographiques.
