Aujourd'hui j'avait envie de bricoler un petit gadget bien inutile pour mon blogounet :)
mon choix c'est donc porté sur un petit bandeau fixe, qui resterais en haut a droite du blog.

Seulement voila, la vie n'est pas toute rose, et le positionnement dit fixed n'est pas pris en charge par MSIE !
Alors que faire... Dans la pratique, il faut utiliser un positionnement absolu pour ce navigateur, cela aura pour effet de positionner notre div en haut a droite, de façon definitive...
Le bandeau aura donc un comportement different selon le navigateur du visiteur, et oui, comme je l'ai dit plus haut la vie n'est pas toute rose.
Evidemment, si vous desirez absolument que les IEnaute profite de votre gadget comme si il n'avait pas cette meavait un navigateur reçent, vous pouvez installer ce hack ;)
Moi je prefere rester simple ^^.

Pour que mon gadget ne soit vraiment qu'un truc inutile, et qu'il ne gêne pas la navigation du visiteur, je veut qu'il disparaisse lorsque le curseur de ma souris le survol !
Alors la, immédiatement, vous penser a #div:hover { display:none; } !
Ca serais trop simple hein ? ^^
Evidemment, pour ne pas changer, ce comportement n'est pas pris en charge par MSIE :D
Il va donc falloir lui administrer un petit bout de javascript pour obtenir cet effet.

Modifications du template

Comme on est sur Dotclear, on va modifier le fichier template.php de notre thème, il faut qu'on y rajoute un div vide, avec un ID specifique ainsi que ce fichu bout de javascript.

<script language="javascript">
<!--
var i=true;
function montre() {
if (i==false) {
document.getElementById("bandeau").style.display="";
i=true;
}
}
function cache() {
if (i==true) {
document.getElementById("bandeau").style.display="none";
i=false;
}
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=montre;
//-->
</script>
 
<div id="bandeau" onmouseover="cache();"></div>

Il n'y a pas grand chose a dire sur cette partie, une fonction pour montrer le div et une autre pour le cacher, la variable i n'est qu'une sécurité. Sur notre div, les attribut onmouseover appelle la fonctions cache(), pour faire revenir le div, il faudras double cliquer !
Pourquoi ? Parce que logiquement on ne peu pas dire a un div caché onmouseout, enfin nous pourrions, mais sans garantie de resultats. Et le double clic c'est plus mystérieu ^^
C'est la seul modification du template à faire, le javascript, placer le dans la partie head de la page, et le div, n'importe ou dans le body.

Modifications du CSS

Cette fois ci, on s'occupe du fichier style.css de votre thème.

/* Le Bandeau fixe
-------------------------------------------------------- */
#bandeau {
position: absolute;
top: 0px;
right: 0px;
height: 200px;
width: 30px;
background-image: url(img/bandeau_blog.jpg);
background-repeat: no-repeat;
}
html>body #bandeau {
position: fixed;
}
html>body #bandeau:hover {
display: none;
}

Rien de tres complexe dans ce css, on commence par definir #bandeau en position absolute, on lui donne sa taille, on lui met une belle image de fond, on le place en haut a droite.
La suite, seul les navigateurs reçents pourrons la lire, car MSIE ne comprend pas la syntaxe html>body.
Donc on peu utiliser le pisitionnement fixed, et l'evenement :hover (Comme ça, les gens qui n'ont pas Javascript pourrons quand même lire ce qu'il y a derriere sans etre gêner, sauf si ils ont MSIE niark niark niark).

J'ai failli oublier

Dans mon div, je met une image de fond, c'est très classe je trouve :P
Si le monde etais tout rose, j'aurais pu mettre un PNG avec une opacitée de 50%, mais MSIE ne supporte pas les couhes alpha de png ! :D
Enfin, on peu imaginer de nombreuses applications pour ce gadget, comme l'affichage d'un evenement proche, la meteo, l'heure, ect... Laissez libre cour a votre geek attitude !