Widget flottant - Bloc flottant sans survol

Rappel du premier message :




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.



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>

Note : la class de la division se nomme \\"bloc_flottant\\", c'est elle qui va nous guider pour la suite.

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;
}

Note : Mon bloc fera 150pixels de large et 100 de haut.


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;
}

Note : "top" signifie que j'ai placé mon bloc à 50 pixels du haut de ma page (entre le bloc et le haut de page il y aura 50px de marge). "right" signifie que j'ai placé mon bloc à 10pixels du bord droit de ma page.

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.)

Sa l'affiche mal sous IE? Sache que IE c'est le mal il est pas à jours au niveau de certaine propriété même si le codage sa reste du codage x).

Ah non, au contraire !
J'ai expliqué que le widget était parfait sous Google Chrome, que IE l'affichait très bien aussi mais que rien n'y faisait sous Mozilla et Opéra.
Ces deux derniers navigateurs ne sont pourtant pas trop mal, bien que je ne les utilise pas mais étonnant que le widget flottant ne veuille pas s'afficher avec eux

Autant pour moi xD je pensais que tu t'étais mal exprimer (honte à moi ^^") c'est peut-être au niveau de la position qu'il y à un problème, pourrais-je avoir le code que tu as utiliser + css pour que je puisse tenter de voir d'ou vient le problème?

Oh ne t'inquiète pas, ce n'est pas un problème, j'aurais pu expliquer plus simple

Voici mon code ccs.

Code:

.widget_flottant
{
width: 120px;
height: 100px;

position:fixed;
top: 635px;
right: 1px;
}

Puis mon code Page d'accueil.

Code:

<div class="widget_flottant"><a href="http://www.color-avenue.net/index.htm" target="_blank"><img src="http://nsm05.casimages.com/img/2010/11/30/101130041118760257220671.png"></a>

En te donnant les codes je viens de penser à une chose !
Peut-être que le widget est trop bas pour les autres navigateurs, qu'il est bien prit en compte mais qu'on ne le vois pas ?

Merci pour ton aide Sui'

Ça peut être utile, merci!

Bonsoir,

Merci pour le partage de ce tutoriel qui me manquait tellement.

Merci pour le tuto

Merci pour le partage

Merci du partage =)

Merci beaucoup

Merci Merci !

Merci !

Justement un tuto que je cherchais merci de l'avoir posté

Parfait ! Merci

Merci , à tester

Ça m'a l'air fortement intéressant !

Merciii !! :§erre:

je suis curieux, alors je veux regarder !

Merci d'avance ^^

merci pour le tuto^^

Je veux bien voir, merci. (:

Merci

Ça à l'aire cool

Merci du partage ! Juste ce que je cherchais ! *O*