Widget flottant : Entre cafouillage et galère !

[WwAaPpIi]

Bonjour (ou Bonsoir),
Et merci d'avance à ceux qui pourront m'aider à résoudre mon problème.

Voilà déjà quelques mois que j'essaye de réaliser un widget flottant style navigation rapide (règlement, concept, présentation...) qui resterait fixe et en haut à droite du forum et qui (si réalisable) serait même présent lorsqu'on rédige un message.
Bref, j'avais trouvé enfin un tutoriel sur un forum ! Sauf que maintenant il y a la commande qui permet de gérer ses codes JS et que je suis complétement perdue U.u

Bref, voilà ce que j'aimerais obtenir (en gros) :


Et plus précisément :


Je voudrais aussi l'arrondir (mais cela ne devrait pas me poser problème je sais comment faire) et j'ai déjà mis les couleurs que je souhaitais sur ces schémas (le cadre en #ad6d5b et l'intérieur en #ede1dd).

Donc voilà les codes du fameux tutoriel (tutoriel qui n'explique absolument rien donc ce qui fait que je n'arrive à rien xD) :

A mettre dans la page d'accueil :

Code:

<div class="navigation_rapide">TEXTE</div>

A mettre dans le CSS :

Code:

.navigation_rapide
{
width: 150px;
height: 100px;

position:fixed;
top: 50px;
right: 10px;
}

Bref, merci d'avance à ceux qui pourront m'aider
Cordialement.

[WwAaPpIi]

Petit Up

[WwAaPpIi]

Up ^^

[Invité]

Bonjour,

Le code que vous donnez fonctionne bien , il faut le personnaliser un petit peu. Si vous le placez dans le message d'accueil, votre menu n'apparaitra que sur l'index de votre forum. Si vous voulez qu'il soit présent sur toutes les pages, il faudra le mettre dans le template overall_header, avant le </head> .

La partie du message d'accueil <div class="navigation_rapide">TEXTE</div> permet de créer le contenu de votre menu, et la class permettra d'ajouter su style grâce à la feuille CSS. Donc à la place de TEXTE, il faudra mettre:

Code:

Navigation rapide<br />
<a href="adresse du lien 1">lien 1 </a><br />
<a href="adresse du lien 2">lien 2 </a><br />
<a href="adresse du lien 3">lien 3 </a><br />
...etc ...

Le code CSS donne le positionnement et le style du menu:

Code:

.navigation_rapide{
  width: 150px; /*largeur*/
  height: 100px; /*hauteur*/
  position:fixed; /*le menu defile avec la page*/
  top:10px; /*position par rapport au bord haut*/
  right: 0px; /*position par rapport au bord droit*/
  border: 2px solid #000; /*contours*/
  background-color: #fff; /*fond*/
  border-radius: 20px;
  -moz--radius: 20px; /*arrondis*/
  -webkit-border-radius: 20px;
  overflow-y: auto; /*barre de défilement*/
/* ajoutez toutes le spropriétés qui vous semblent nécessaires*/}

Cordialement.

[WwAaPpIi]

(Désolé de ne pas avoir répondu plus tôt, j'étais en vacances)

Merci beaucoup, cela marche à merveille !
C'est génial, superbe rendu.

Sujet résolu ! Merci encore !