Remplacer un titre par une image
Dernière mise à jour : 04/02/2005
S'applique à : Wikini 0.4.x
Compatibilité : IE, Gecko, Khtml, Opera
On peut remplacer un titre H1, H2 etc. (comme celui du nom de Wiki par exemple) par une image avec la propriété CSS background :
h1.wiki_name {
- background: url("wikini-logo.png") top left no-repeat;
- width: 200px; /* largeur de l'image */
- height: 50px; /* hauteur de l'image */
La principale difficulté est en fait de faire disparaitre le texte car si les CSS précédents affichent bel et bien l'image, ils n'enlèvent pas le texte pour autant. Il y a alors deux situations. Le premier cas est celui d'une image dont le fond est une couleur unie, au moins dans une partie. On peut alors s'arranger pour que le texte prenne cette couleur et soit affiché dans une zone de couleur unie :
h1.wiki_name {
- color: #ecc8cc; /* couleur de fond de l'image */
- font-size: 10%; /* adapter la taille à la zone de couleur unie */
Si l'image n'a pas un fond uni mais que la page a un fond uni à proximité, il suffira de translater le texte dans cette zone. Le second cas est celui d'une image qui n'a pas de zone unie. On peut penser qu'il suffit alors de réduire totalement la taille de la police :
h1.wiki_name {
- font-size: 0%;
Cependant ceci ne marche que sous les Gecko (Mozilla and co.) et IE si mes souvenirs sont bons. Opera et Konqueror pensent que l'utilisateur s'est trompé dans la taille de police et rectifient pour qu'on voit le texte ! Pour le moment, il ne semble donc y avoir d'autre possibilité dans ce cas que de modifier le code XHtml en introduisant un tag supplémentaire qui sert à cacher le texte (technique classique notamment mise en oeuvre dans le jardin zen CSS).
Un bandeau Prévisualisation vertical sur toute la page
Dernière mise à jour : 04/02/2005
S'applique à : Wikini 0.4.x - test encore à réaliser
Compatibilité : Gecko, KHtml - IE pas encore testé (faut booter sous Win...), Opera 7.x échoué mais parade possible
Tous ceux qui n'utilisent pas la version CVS de Wikini ne peuvent pas modifier la couleur de la page lorsqu'on est en mode prévisualisation des modifications. Ceci est notamment intéressant pour éviter que l'utilisateur n'oublie d'aller valider ses modifications tout en bas de la page lorsque la page est longue. On peut néanmoins ruser en utilisant une image répétée dans le bloc de couleur rouge en haut de page contenant le texte prévisualisation. Ce bloc étant contenu dans celui de la page, il est possible de lui faire prendre toute la hauteur de la page uniquement par le jeu des CSS. On a alors un message prévisualisation sur toute la hauteur de la page donc moins facile d'oublier. Le code CSS est le suivant :/* corps de page */
div.page {
- position: relative; /* obligatoire pour le position: absolute; plus bas */
- padding: 0.5em 0.5em 0.5em 60px; /* marge pour faire de la place pour l'image */
- background: #FFFFBF;
- border: 1px inset;
- border-bottom: none;
/* boîte d'alerte 'Prévisualisation' */
div.prev_alert {
- position: absolute; /* cette boîte passe à gauche */
- top: 0;
- left: 0;
- width: 48px; /* largeur de l'image */
- height: 100%; /* tout le long de la page */
- background: red url("wikini-preview-alert.png") top left repeat-y;
- color: #ecc8cc; /* couleur de fond de l'image */
- font-size: 0;
Image wikini-preview-alert.png
Explications pour les curieux : on crée une marge sur la gauche de la page (60px) qui sera remplie par l'image répétée. C'est le div.prev_alert qui contient l'image en question. Il suffit donc en théorie que ce div fasse la largeur de l'image et la hauteur du div.page. Néanmoins le texte de la page doit courrir sur la droite du div.prev_alert et non en-dessous. Plutôt que d'utiliser un float: left qui pourrait interférer avec d'autres float: xxx de la page, celui-ci est sorti du flot de la page (position: absolute) de sorte que ses dimensions ne comptent plus pour remplir le div.page. Le remplissage commence donc tout en haut du div.page. Cependant cette propriété position: absolute est relative au premier parent ayant un position: relative.
Sous Opera, impossible d'allonger le DIV (serait-on en mode quirk ?), il faut alors lui donner une hauteur très importante et obliger le conteneur à cacher ce qui dépasse :
/* pour Opera */
div.page {
- overflow: hidden;
div.prev_alert {
- min-height: 5000em;
Il est très vraisemblable que IE réagisse similairement à Opera...
NB: testé en version CVS, transposé pour version 0.4.x sans vérification, je le fais dès que possible ! -- JmPhilippe