Widget flottant : Entre cafouillage et galère !

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Widget flottant : Entre cafouillage et galère !

Message par WwAaPpIi le Mer 27 Juil 2011 - 17:55

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 Very Happy
Cordialement.


Dernière édition par WwAaPpIi le Ven 5 Aoû 2011 - 21:04, édité 1 fois

WwAaPpIi
***

Féminin
Messages : 130
Inscrit(e) le : 28/06/2011

http://wonder-land.forumactif.fr/
WwAaPpIi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget flottant : Entre cafouillage et galère !

Message par WwAaPpIi le Jeu 28 Juil 2011 - 18:05

Petit Up Wink

WwAaPpIi
***

Féminin
Messages : 130
Inscrit(e) le : 28/06/2011

http://wonder-land.forumactif.fr/
WwAaPpIi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget flottant : Entre cafouillage et galère !

Message par WwAaPpIi le Ven 29 Juil 2011 - 22:17

Up ^^

WwAaPpIi
***

Féminin
Messages : 130
Inscrit(e) le : 28/06/2011

http://wonder-land.forumactif.fr/
WwAaPpIi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget flottant : Entre cafouillage et galère !

Message par Invité le Sam 30 Juil 2011 - 13:46

Bonjour,

Le code que vous donnez fonctionne bien Wink , 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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget flottant : Entre cafouillage et galère !

Message par WwAaPpIi le Ven 5 Aoû 2011 - 21:03

(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 !

WwAaPpIi
***

Féminin
Messages : 130
Inscrit(e) le : 28/06/2011

http://wonder-land.forumactif.fr/
WwAaPpIi a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum