Un bandeau avec image ou écrits sur votre blog

Ce que j'aime chez les lecteurs de ce blog, c'est que à part les nombreuses questions qu'ils me posent (et auxquelles je ne répond plus trop ces jours-ci, trop débordé), ils ne rattent pas une occasion pour m'apprendre des nouvelles choses ou me faire des gros bisous virtuels.

NicTeam vient tacitement de s'inscrire dans la liste de ceux qui envoient des nouvelles astuces en nous proposant celles-ci dans un commentaire que je reproduis in bruto :

Salut, c'est génial ce bandeau...

Je vous fais part de mon astuce perso...

Pour installer une ou plusieurs images ou textes (ou combiné) de ce genre de façon personnelle et aux endroits désirés sur sa page il faut :

• une image (que vous aurez pris soin d'heberger)
• et une latte pour mesurer les pixels :D
(c'est mon jour de feintes à 50 cents) lolllll

Etape 1. Allez dans le code html et développez des modèles de gadgets

Etape 2. Dans la partie "css" (juste avant < body >), vous copiez les trois lignes suivantes:

#bandeau0 {z-index:0;}
#bandeau1 { position:fixed; top:80px; left:50px; z-index:1; }
#bandeau2 { position:fixed; top:80px; left:50px; z-index:2; }

Explication:

"Z-Index" est l'ordre d'apparition
"Position:fixed" fige la position de l'image ou le texte à l'écran. Vous pouvez remplacer "fixed" par "absolute" pour faire défiler avec le reste de la page.
"top" et "Left": Ce sont les coordonnées de positionnenent (en pixel)
Vous pouvez aussi agrémenter la mise en forme en rajoutant des dimensions, cadres, couleurs, etc...

Etape 3. Juste après la balise < body >, inserez ceci:

< div id='bandeau0'>< /div>
< div id='bandeau1'> < img src='http://adresse de l'image.gif'/>< /div>
< div id='bandeau2' style='background:#fff; border:solid 2px #ddd;'>Votre texte< /div>

(rajoutez l'adresse d'une image et un texte)

Etape 4. Avant de sauvegarder, cliquez sur aperçu et ajustez le positionnement suivant le résultat obtenu.
Quand vous êtes certain de votre coup, vous pouvez sauvegarder...

A savoir: en manipulant un peu le code, il y a aussi moyen d'inserer uniquement dans un article ou un gadget html.

Trucs et idées:
• Cette astuce peut-être utilisée pour bon nombre d'applications. Comme par exemple, une barre de lien avec boutons qui resterait figée au-dessus de la page
• Avec ce système, vous pouvez aussi, grâce à un gif transparent, empecher les utilisateurs d'accèder avec un clic à certains éléments. Comme par exemple, les photos...
• etc, etc, etc...


Voilà pour ma petite contribution...
Et encore bravo pour le blog"

Merci à toi NicTeam.

@+ les amis.