Bien ! Nous avons vu comment créer des pages en HTML pur, sans fioritures (comparé aux horeures produits par des outils WYSIWYG) et lisible par tous, puis nous avons vu comment décorer tout cela dans un fichier à part : il en résulte des pages saines et agréables à voir / lire pour les visiteurs.
Nous allons terminer ce tutoriel avec des techniques devant être mises en œuvre dans des sites plus somplexes (à commencer par avoir plusieures colonnes) et des techniques originale que j'ai trouvé ca et là sur internet...
Un apport non négligeable en CSS est la possibilité de créer des classes et cela va nous permettre, entre autre, d'avoir un style différent pour les liens normaux (dans le texte) des des liens pour le ou les menu(s) !
Il faut pour cela avoir plusieurs divisions dans votre code HTML : tout ce qui se rapporte au menu doit être placé dans <div class="menu"> ... </div> par exemple. Le reste peut être placé ou non dans une division de classe "contenu" par exemple. Nous opterons pour ne pas le faire. Le principe réside donc à styler les liens comme déjà fait, et à simplement rajouter des règles pour styler différemment les liens dans le menu. Un exemple :
a {
color: #458EFF;
}
a:hover {
text-decoration: none;
}
.menu {
background-color: #458EFF;
}
.menu a {
text-decoration: none;
color: white;
}
.menu a:hover {
text-decoration: underline;
}Ceci est un paragraphe normal avec un lien !
Ici, les liens normaux sont bleus clairs et ont supprime le soulignement lors de leur survol (ça fait déjà un bel effet). Par contre, le menu étant bleu (pour le remarquer), les liens seront blancs et non soulignés : ils seront re-soulignés au passage de la souris (l'inverse des liens normaux).
Il faut faire attention au fait de ne pas souligner les liens normaux : en effet, il n'y a alors plus que la couleur qui les différencie du texte normal. Mais pensez aux personnes ayant des difficultés à discerner les contrastes et couleurs (il en existe plus qu'on ne le croit, je n'ai plus les chiffres malheureusement) : pour eux, il sera difficile de différencier les liens autrement qu'en baladant le curseur de la souris et en voyant les réactions. Si vous décidez de ne pas souligner les liens, alors mettez-les en gras ou en italique... quelque chose qui les différencie du texte normal (attention : les liens sont quasiment toujours soulignés : un texte gras ne fait pas tout de suite penser à un lien et il faudra un moment pour que les visiteurs s'habituent).
Par contre, il est clair que le menu ne contient que des liens : l'effet de dé-soulignement peut alors être utilisé, à condition qu'on repère bien le menu !
Parfois, on a besoin de petits encadrés courts pour faire remarquer une chose. On a souvent envi d'y associer une petite icône : un panneau attention, une petite bulle d'infomation... Voyons comment réaliser ce genre de présentation. Et c'est avec surprise que je vais vous apprendre qu'un simple paragraphe suffit (là où les espris habitués au HTML sans CSS auraient tout de suite répondu avec de lourds tableaux HTML peu agréables à maintenir). Évidemment il s'agit d'un paragraphe spécial : on lui attribue la classe "info", "attention", "pieges", ou ce que vous voulez, et le code HTML est terminé (vous pouvez aussi avoir recours à une division à la place d'un paragraphe et y mettre tout le HTML que vous souhaitez : tableaux, paragraphes, images...) !!
Côté CSS ce n'est pas plus dur non plus : l'astuce réside dans l'utilisation et le positionnement de l'image de fond : l'icône sera en image de fond : on charge l'icône (ici, info.png ou attention.png) et on précise qu'on ne la veut qu'une fois (sans répétitions) et située à gauche, centrée verticalement.
Comme on ne veut pas coller le texte, on rajoute quelques pixels d'espacement. Par contre, l'image de fond étant... une image de fond ! Elle est collée à la bordure. Toujour pas de problèmes : au lieu d'un background-position: 4px 50%; on dit au navigateur d'afficher l'image de fond 4 pixels plus à droite, ce qui donne background-position: 4px 50%;.
On remarquera aussi que le texte empiète sur l'image : normal c'est une image de fond :-) Pour régler ce léger problème on a juste à connaître la longueur de l'image (en pixels) et à rajouter ce nombre à l'espacement gauche, plus encore une fois l'espacement déjà donné pour que le texte ne soit pas collé à l'image, cette fois. On résume donc : x pixels d'espacement (padding), et pour padding-left, il s'agira de 2*x+long, où long est la longueur de l'icône en pixels. Pour l'exemple qui va suivre : l'icône fait 32*32 pixels, et on va utiliser une marge de 4 pixels : l'espacement gauche sera de 2 * 4 + 32 = 40 pixels.
Nous avons traités le cas où le texte était plus haut que l'icône : elle sera centrée verticalement. Reste maintenant le cas où la hauteur du texte est inférieure à la hauteur de l'icône : celle-ci sera tronquée (car le paragraphe ne prendra que la hauteur nécessaire à son contenu). On empêchera cela en spécifiant une hauteur minimale au paragraphe (ou à la division) via min-height, et on donnera la même valeur que calculée précédemment (sauf si la hauteur de l'image est différente de sa largeur). Cepdendant, la boîte est agrandie mais le texte reste aligné en haut. C'est là notre dernier ajustement : nous indiquons que nous voulons centrer verticalement le texte.
Ce qui nous donne :
.info, .attention {
border: 1px solid gray; /* Pas besoin d'expliquer */
padding: 4px; /* Ne pas coller le TEXTE à la bordure */
padding-left: 40px; /* Pour que le texte ne soit pas SUR l'icône (image de fond) */
min-height: 32px; /* Au cas où le texte est plus petit : afficher l'icône en entier (2*4+32)... */
vertical-align: middle; /* ... et centrer le texte verticalement */
}
.info {
background: url('info.png') #DDDDDD; /* Si on définit une propriété background alors il faut définir toutes les autres : */
background-repeat: no-repeat; /* Impossible de définir la couleur, la position et la répétition une fois pour toute */
background-position: 4px 50%; /* dans la règle d'au dessus et de ne changer que l'image ici et en dessous ! */
}
.attention {
background: url('attention.png') #DDDDDD; /* On définit donc la couleur de fond et l'icône à utiliser... */
background-repeat: no-repeat; /* ... une seule fois */
background-position: 4px 50%; /* et positionnée à 4 pixels de la gauche et centrée (impossible de d'utiliser une longueur */
} /* et un mot clé tel que center à la fois, d'où le 50%. Oui c'est nul ! */Voici un exemple de court texte d'information.
Voici un exemple de long texte d'avertissement : cette fois ce n'est plus le texte qu'il faut centrer verticalement (vertical-align) mais l'icône : ceci est réalisé grâce à la propriété background-position qu'il faut spécifier centré verticallement (et accéssoirement décallée du bord gauche de 4 pixels : l'espacement).
NOTA: Konqueror n'accepte pas min-height: 40px; et Mozilla n'accepte pas vertical-align: middle;. Purée c lourd !!
FIXME: Depuis j'ai utilisé une div avec un p à l'intérieur et si on laisse les marges on a l'impression que c centré et que l'icône est entière...
Donc paragraphe à refaire.
Si seulement Konqueror ne merdait pas sur le rendu des :before et :after (faut que je vérifie sur les anciennes versions car c'est trop gros comme bug : il décompose :before et 'normal' en deux paragraphes) on arrait pu rajouter ça :
#notices .info:before { content: "Information : "; font-weight: bold; color: gray; }
#notices .attention:before { content: "Attention : "; font-weight: bold; color: gray; }Souvenez-vous de votre enfance : on vous faisait souligner les titre en rouge. Sur le WEB, il peut être intéressant de souligner un texte important en rouge, ou d'avoir cet effet pour une autre utilisation.
Malheureusement la couleur de soulignement est la même que cette du texte (propriété color).
Pour palier à ce manque on peut utiliser la bordure de bas pour qu'elle soit solide, de un pixel de hauteur, et bien évidemment rouge. Tout est dit :
.important {
border-bottom: 1px solid #FF0000;
}Voici un texte avec un objet important : ça en jète, hein ?
En fait tout n'est pas dit :
<h1><span>Le titre</span></h1>. On utilise un span générique, car il n'est là qu'à des fins de présentations. À vous de décider si vous souhaitez inclure cette balise purement présentationnelle mais en tout cas elle ne gène pas à l'accessibilité, alors si vous en avez besoin : ne vous génez pas,Et voici un lien assez beau et original, comme vous le voyez (bien qu'il serait préférable de définir des bordures droites et gauches blanches au repos, pour éviter le changement de longueur lors du survol de la souris).
a {
text-decoration: none;
color: #34558A;
border-bottom: 1px dotted #458EFF;
}
a:hover {
border: 1px solid #FFA713;
}
h2 span {
padding: 5px;
border-left: 5px solid #458EFF;
border-bottom: 2px dotted #458EFF;
}FIXME: JE VIENS DE DÉCOUVRIR que le h2 pouvait être display: inline; et il ny a plus besoin du span !!!!!!!!!!!!!!!!!!!
Voici un effet que j'ai trouvé sur je ne sait plus quel site, et que j'ai trouvé original !
Apparamment ça marche pas. On verra plus tard.
Si votre site contient plusieurs blocs, éventuellement plusieurs menus, ou groupes...
Blabla
Techniques avancées (nouvelle page ?) ::
Créer des notes/infos/renvois avec une image à gauche (et centré des deux côtés)
Voilà où s'achève ce tutoriel. Si vous avez encore soif d'effets rares et 1,1, vous pouvez feuilleter les liens.
Normalement, en lisant ce tutoriel, vous avez pratiqué un peu et, si vous avez suivit mon conseil, avez commencé à personnaliser ou créer votre site, en adaptant les exemples tout au long de votre lecture. Je vous laisse avec deux aides-mémoires qui se veulent être vos références : une page pour le HTML, et une autre pour le CSS. Je les ai conçue pour que quasiment tout ce dont vous avez besoin durant votre travail de création ou adaptation de site y soit présent : toutes les balises HTML et toutes les propriétés CSS y sont décrites.
À noter que j'ai été assez [strict] en ne permettant que le HTML 4.01 Strict et le CSS et en séparant bien le contenu et la forme. Si vous avez déjà un site, vous pouvez très bien utiliser certaines techniques CSS en plus de votre site, même si la présentation avec des tableaux est plus que déconseillées et permet de très beaux effets... À vous de peser le pour et le contre et d'utiliser les deux technologies à bon escien en en ayant conscience.
Par contre, si vous n'avez pas de tableaux purement présentationnels dans vos pages je vous conseille de passer au HTML+CSS pur ! Le plus tôt sera le mieux : personnelement j'ai appris un peu tard ces techniques et je n'ai plus le courrage de refaire mon sites d'une cinquentaine de pages, avec pleins de mises en formes partout...