Créer un bloc flottant
Le bloc flottant, c'est un petit cadre qui se place sur votre page et qui accompagne le visiteur même s'il descend ou remonte sur cette même page. Sa position est fixe, ainsi, peu importe où vous vous situez sur la page il restera présent.
Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.
Avant tout chose, il faut créer le bloc en lui-même.
Pour ma part, j'ai choisi de créer une petite fenêtre avec, par exemple, mon partenaire (Never-utopia). Je crée une division, avec son contenu (le contenu ici est donc le logo de N-U, il est possible d'y mettre ce que l'on veut, une navigation, une liste de logo, des avatars, le copyright du forum).
- Code:
<div class="bloc_flottant"><a href="http://www.never-utopia.com" target="_blank"><img src="http://host.image.files.free.fr/host/49abfc8769e6cbouton-nu.png"></a></div>
Placez ce code à la suite de votre page d'accueil (en-tête).
Chemin sur Forumactif : Panneau d'administration > affichage > généralités.
À présent le reste du travail concerne uniquement du code css.
Dans la feuille de style du forum.
Chemin sur Forumactif : Panneau d'administration > affichage> couleurs > feuille de style
Il faut commencer par établir la taille de notre wiget.
- Code:
.bloc_flottant
{
width: 150px;
height: 100px;
}
Plaçons-le à présent sur la page.
Attention : lorsqu'on a placé le premier code dans le cadre de l'en-tête, on a, implicitement, choisi de ne faire apparaitre ce bloc que sur l'index du forum. Si vous souhaitez l'afficher sur l'intégralité du forum, il est possible de placer le code dans le template overhall_header.
Pour placer le bloc sur la page, on utilise la position:fixed. Le bloc restera présent à l'écran au même endroit même si le visiteur descend ou remonte sur la page.
- Code:
.bloc_flottant
{
width: 150px;
height: 100px;
position:fixed;
top: 50px;
right: 10px;
}
Testez, vous verrez le bloc existe, le bloc flotte, mais le bloc est encore un peu moche, là, non ? En ajoutant quelques propriétés css vous pourrez améliorer la présentation de ce petit objet. Quelques exemples.
un couleur de fond, une image de fond avec la propriété background-color ou background-image. Une bordure (border), on peut l'arrondir (-moz-border-radius & cie) etc.
(sachez que ce tutoriel est ma création et que je l'ai déjà proposé sur d'autres supports d'entraide.)
