Images placées latéralement ~

[chienchila]

Bonsoir à tous ! Je ne sais pas si mon titre sera assez clair, mais je n'étais pas très inspirée, disons. Je vous expose mon problème:

~ De la même manière qu'il est possible avec les javascript de placer une chatbox latéralement ( et ses boutons " ouvrir " , " fermer " ), je voudrais placer sur le côté de mon forum, juste au dessus de cette chatbox, une petite image afin que celle ci n'encombre pas ma page d'accueil. Je voudrais faire quelque chose comme ceci :

Mon forum actuel :



Mon forum comme je le souhaiterais :



Comment puis-je créer ce genre d'effet ? Merci par avance !

[Dr. Karlos]

Bonsoir,

Vous n'avez qu'à insérer ce code dans votre panneau d'administration comme ceci:
> PA | Général | Configuration | Description du site

Code:

<img src="ADRESSE DE L'IMAGE" id="imagepa"></img>

Et à insérer ce code dans votre CSS:

Code:

#imagepa {
position: fixed;
bottom: 250px;
left: 0px
}

La position de l'image est paramétrable avec le bottom: 250px et le left 0px.


Cordialement.

[chienchila]

Bonsoir, merci pour votre aide !
Votre code a l'air de fonctionner, seulement, j'ai beau modifier les champs afin que la position de l'image me convienne, rien ne bouge ( bottom et left ), l'image reste plantée au beau milieu de la page. Accessoirement, j'aurais besoin d'insérer un lien dans l'image, quel code ajouter et où s'il vous plait ?

[Dr. Karlos]

Re,

Pour les liens, changez votre code par celui-ci:

Code:

<a href="ADRESSE DU SITE"><img src="ADRESSE DE L'IMAGE" class="imgpa"></img></a>

Remplacez l'ancien code CSS par celui-ci pour voir si le problème se règle.

Code:

.imgpa {
position: fixed;
bottom: 250px;
left: 0px
}

Tentez aussi de changer de navigateur, je vois bien l'image positionnée sous Chrome.


Cordialement.

[chienchila]

Merci encore, j'ai changé votre code, mais rien ne bouge une nouvelle fois, sous firefox comme sous internet explorer ! >.<[i]

[Dr. Karlos]

Re,

Effectivement, Firefox et IE font de la résistance.

Remplacez le code dans votre description par celui-ci:

Code:

<div class="imgpa"><a href="http://www.root-top.com/topsite/mirry/in.php?ID=265"><img src="http://s4.noelshack.com/uploads/images/12361174818894_84778.png" ></img></a></div>

Cordialement.

[chienchila]

Malheureusement, toujours le même souci

[Dr. Karlos]

Re,

Passons donc par le javascript avec le même fonctionnement que la chatbox.

Insérez ce code dans la gestion des codes javascript sur toutes les pages:

Code:

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 250px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><a href="http://www.root-top.com/topsite/mirry/in.php?ID=265"><img src="http://s4.noelshack.com/uploads/images/12361174818894_84778.png" ></img></a></td></tr></table>'); } );

N'oubliez pas de retirer le code du CSS ainsi que de la description du forum.


Cordialement.

[chienchila]

Merci, merci, merci, problème résolu !