Barre de navigation flottante avec fonctionnalités étendues

[SweetGumiho]

Rappel du premier message :

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lmds-test.forumculture.net/

Description du problème

Bonjour,

Je reviens sur quelque chose que j'avais essayé de faire il y a quelques mois mais sous phpBB3. A présent en phpbb2 j'espère avoir plus de liberté et surtout d'aide en codage.

Tout d'abord la barre de navigation que je souhaiterai avoir soit flottante en haut du forum, masquée lorsque l'on n'est pas en haut de la page mais visible que lorsqu'on place sa souris vers le haut de la page et ait un fond de type image*. Là-dessus j'ai remarqué que ces tutoriels : Mettre sa barre de navigation en haut du forum et Ajouter une barre de navigation flottante ne correspondaient pas à ce que je recherche qui avait été réalité dans ce sujet pour une version phpBB3.

Ensuite, j'aimerais que les boutons soient affichés sous forme d'image avec une bulle de texte au survol (chose que j'ai pu obtenir partiellement en suivant les indications de ce sujet) et enfin non seulement de supprimer le bouton "Groupes"** mais de pouvoir ajouter un bouton qui ouvre au clic la chatbox dans un nouvel onglet*** et un bouton pour les notifications de la même manière que la toolbar lorsque l'on clique sur "Notifications".

D'autre part, je voudrais qu'un clic sur le bouton correspondant au profil ouvre la même fonctionnalité que la toolbar lorsque l'on clique sur "Bienvenue [username]", avec "Voir mon profil", "Editer mon profil", "Mes Sujets", "Mes Messages", etc. mais aussi ce qui s'affiche à la navigation sur toutes les pages du forum, soit : Dernière visite le ... - ...:... / La date/heure actuelle est ... - ... .

Pour terminer, je cherche à ce que mes boutons soient répartis dans l'ordre et de la manière qui suivent.

A gauche :
[1] Guide
[2] Charte de Lois (Règlement)
[3] Glossaire
[4] Carte
Au centre :
[5] Forum (Page d'Accueil)
[6] Foire Aux Questions (F.A.Q.)
[7] Calendrier
[8] Galerie
[9] Aventuriers (Membres)
[10] Personnage (Profil)
[11] Courrier (Messagerie)
[12] Rejoindre l'aventure (S'enregistrer)
[13] Entrer/ Sortir (Connexion / Déconnexion)
A droite :
[14] Chatbox
[15] Rechercher
[16] Notifications

Je précise que les proportions de ce schéma sont un peu tronquées. Dans l'exemple de forum que j'aimerais prendre, ce serait avec une bannière large de 1600px et haute de 500 px (440 si elle peut ne pas être rongée sur le haut). La barre de navigation doit cependant s'étendre sur toute la page, quelle que soit la résolution de l'écran de l'utilisateur.

Est-ce que vous ne me conseillerez pas de recréer entièrement ce menu de navigation en suivant le tutoriel Créer sa propre barre de navigation ? Dans ce cas comment réutiliser les choses que j'avais déjà faite ?

Si vous avez donc bien compris ce que je recherche il ne s'agit pas simplement de fusionner la barre de navigation et la toolbar mais simplement prendre certains fonctionnalités de cette dernière pour ma barre de navigation.

Je sais qu'une telle requête est sans doute une première mais j'espère que quelqu'un réussira à se pencher sur mon cas.

Sur ce je vous remercie d'avance pour votre aide et vous souhaite de passer une excellente journée. ♥

* J'ai réussi à faire cela à peu près avec ces sujets et tutoriels :
- Mettre sa barre de navigation en haut du forum
- Barre de navigation flottante modifiée avec effets
- Une barre de navigation fixée qui joue à chat !

** Chose que j'ai pu déjà faire avec un ajout dans le css pour ne pas afficher la valeur "/groups" mais je ne sais pas si cette solution est vraiment compatible avec les autres modifications de ma barre de navigation.

*** J'ai pu le faire facilement en ajoutant un menu personnalisé.

[SweetGumiho]

C'est bon pour la hauteur, merci.

[Invité]

Ce qu'il reste à faire donc pour aboutir à ce que je recherche :
1- Texte qui s'affiche dans une bulle au survol des boutons (Guide, Charte de Lois, Glossaire, Carte, Page d'Accueil, Foire Aux Questions, Calendrier, Galerie, Aventuriers, Personnage, Courrier, Rejoindre l'aventure, Entrer/ Sorti, Chatbox, Rechercher, Notifications).
2- Boutons dont l'image change au survol + changement de l'image du boutons "Courrier" quand nouveau message dans la messagerie.
3- Clic sur le bouton de profil "Personnage" (la tête de mort) qui a le même effet que clic sur "Bienvenue 'Nom d'utilisateur'" dans la toolbar.
4- Boutons de "Notifications" même effet que les notifications de la toolbar.

pour le >1 >>
rajouter title au lien url ,avec dedans le texte a afficher(title="test info bulle")

Code:

<a href="http://lmds-test.forumculture.net/guide" alt="Guide" title="test info bulle">

reste le hover des images
pour les 2 derniers qui reste il faut faudra un bon scripteur a mon avis.

[SweetGumiho]

Merci. Maintenant comment puis-je mettre en forme ces infobulles via le CSS ?
J'attendrais pour le hover des images. Ou plutôt en parallèle je continue mes recherches à ce sujet. ^^

[Invité]

les attribut title sont impossible a mettre en forme par css .

il faudra faire autrement , avec du css en hover , quel rendu voulez vous avoir en infos bulle ?

[SweetGumiho]

Je vois quelque chose comme ça :
- police : Alegraya SC
- taille de police : plus grande
- couleur de fond : beige ou marron
- couleur de l'écriture : blanche
- bords du cadre arrondis.

Merci.

[Invité]

merci a l'autheur de cette reponse >> @Lixyr

re , voila cee que je peut vous proposé pour l'info bulle en hover

le html>>

Code:

<!--barre nav LMDS-->
<table class="navig">
    <tr><td align="left">
    <span class="infobulle"> <a href="http://lmds-test.forumculture.net/guide" alt="Guide" ><img src="http://i.imgur.com/Rby2OyI.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Guide
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/laws" alt="Charte de Lois"><img src="http://i.imgur.com/NYjWjBJ.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Charte dess lois
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/glossary" alt="Glossaire"><img src="http://i.imgur.com/0uN4DDk.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Glossaire
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/map" alt="Carte"><img src="http://i.imgur.com/j31YCBy.png" /></a>
<span class="infobulle-hidden">
      Carte
  </span>
</span>
 </td>
      <td align="center">
<span class="infobulle"><a href="http://lmds-test.forumculture.net/" alt="Site"><img src="http://i.imgur.com/HOXKZXf.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Site
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/forum" alt="Forum"><img src="http://i.imgur.com/lZ3DEmO.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Forum
  </span>
</span>
<span class="infobulle"><a href="URL DE VOTRE FORUM" alt="Foire aux Questions"><img src="http://i.imgur.com/hR7LTR1.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Foire aux question
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/calendar" alt="Calendrier"><img src="http://i.imgur.com/RAXzyt5.png" hspace="5"/></a>
<span class="infobulle-hidden">
    Calendrier
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/gallery/index.htm" alt="Galerie"><img src="http://i.imgur.com/ewLtSji.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Galerie
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/memberlist" alt="Aventuriers"><img src="http://i.imgur.com/8mr7Xvs.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Aventuriers
  </span>
</span>
<!-- BEGIN switch_user_logged_in -->
<span class="infobulle"><a id="fa_welcome" alt="Personnage"><img src="http://i.imgur.com/dKPWOSY.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Personnage
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/privmsg?folder=inbox" alt="Courrier"><img src="http://i.imgur.com/p8oYwFo.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Courier
  </span>
</span>
        <!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<span class="infobulle"><a href="http://lmds-test.forumculture.net/register" alt="Rejoindre l'aventure"><img src="http://i.imgur.com/TEhsfdg.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Rejoindre l'aventure
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/login" alt="Entrer"><img src="http://i.imgur.com/B4WtI4d.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Entrer
  </span>
</span>
 <!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<span class="infobulle"><a href="http://lmds-test.forumculture.net/login?logout" alt="Sortir"><img src="http://i.imgur.com/YV3JTix.png" hspace="5"/></a>
<span class="infobulle-hidden">
      Sortir
  </span>
</span>
 <!-- END switch_user_logged_in -->
</td>
      <td align="right">
<span class="infobulle"><a href="http://lmds-test.forumculture.net/search" alt="Rechercher"><img src="http://i.imgur.com/N0tkWDt.png" hspace="5"/></a>
  <span class="infobulle-hidden">
      Rechercher
  </span>
</span>
<span class="infobulle"><a href="http://lmds-test.forumculture.net/chatbox/index.forum" alt="Chatbox" target="_blank"><img src="http://i.imgur.com/TOLmm0B.png" hspace="5"/></a>
  <span class="infobulle-hidden">
      Chatbox
  </span>
</span>
<span class="infobulle"><a id="fa_notifications" alt="Notifications"><img src="http://i.imgur.com/IrDIpIi.png" hspace="5"/></a>
  <span class="infobulle-hidden">
      Notification
  </span>
</span>
  </td></tr></table>
                                              <!--fin barre nav-->

le css a ajouter correspondant aux info bulle >>

Code:

.infobulle{
  position: relative;}
 
.infobulle .infobulle-hidden {
  /* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */
  background: #7B5A0F;
    border: 1px solid #E2BF5D;
    border-radius: 10px;
    color: #E4D484;
    display: none;
  left:0px;
    font-family: cursive;
    font-weight: 900;
  font-size:12px;
    position: fixed;
    visibility: visible;
    padding: 10px;
    z-index: 999;
width:98%;height:10px;
  }

.infobulle:hover .infobulle-hidden {
  display: block;}

il vous reste a modifier les couleurs et la police pour adapter a votre forum..

sinon en test avant de l'instaler http://forum-test-r-max.forumactif.org/

[SweetGumiho]

Le problème ici c'est que l'infobulle prend toute la largeur de la page et ne se cadre pas par rapport au texte qui s'y trouve. De plus le texte lui-même n'est pas centré verticalement, ce qui est le cas des infobulles par début.

[Invité]

je me douter que vous allier dire ça

dans cette partie du css

Code:

.infobulle .infobulle-hidden {
  /* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */
  background: #7B5A0F;
    border: 1px solid #E2BF5D;
    border-radius: 10px;
    color: #E4D484;
    display: none;
  left:0px;
    font-family: cursive;
    font-weight: 900;
  font-size:12px;
    position: fixed;
    visibility: visible;
    padding: 10px;
    z-index: 999;
width:98%;height:10px;
  }

le

Code:

width:98%;

regle la largeur de la bulle
le

Code:

height:10px;

regle la hauteur de la bulle
mais dans votre cas , ont enleve
ont remplace

Code:

position:fixed;

par

Code:

position:absolute

pour que la bulle suive l'image
ont ajoute un

Code:

text-align:justify

aux cas ou ont aurait besoin .


remplacé donc cette partie par

Code:

.infobulle .infobulle-hidden {
  /* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */
  background: #7B5A0F;
    border: 1px solid #E2BF5D;
    border-radius: 10px;
    color: #E4D484;
    display: none;
  left:0px;
    font-family: cursive;
    font-weight: 900;
  font-size:12px;
    position: absolute;
    visibility: visible;
    padding: 10px;
    z-index: 999;
  margin:auto;
  text-align:justify;
 
  }

[SweetGumiho]

Je vais essayer ça. Par contre j'ai remarqué qu'il y a un problème dans le masquage de la barre de navigation. En effet, elle disparaît au scroll sur la page, ça c'est très bien. Malheureusement une fois qu'on la fait réapparaître en mettant la souris en haut elle reste visible de manière permanente. Ce que j'aimerais c'est que lorsque la souris n'est plus en haut de l'écran elle disparaisse à nouveau.

[Invité]

la barre , les class et le css ont changé , le script quand a lui qui donne le hover ,est d'origine ...
voir si la version de base donne l'effet que vous voulez , sinon il faudra demandé a l'auteur du tuto.

[SweetGumiho]

Concernant les bulles, c'est presque nickel (je n'aurais plus qu'à faire ma mise en forme via le CSS tranquillement) à l'exception d'une chose qui me gêne : pour la dernière infobulle, "Notifications", la bulle est coupée à moitié, seul le début apparaissant.

Et pour le script je contacte l'auteur, en espérant qu'il trouve la solution. Merci beaucoup à vous en tous cas pour toute l'aide fourni et le temps que vous m'avez consacré. Si cela ne vous ennuie pas, le jour où j'ouvre un forum, je citerais votre pseudo dans les remerciements.

[Invité]

pour la dernière bulle il faudra différencier la class de celle ci. car la actuellement elle ont toutes le même réglage..
donc forcement avec votre demande pour que la bulle suive les images , forcément a un moment ça coince ..

je m'en occupe des que possible .

[SweetGumiho]

Ça marche.

[Invité]

re, voila vous pouvez ajouter ce css en plus de l'autre ,
j'ai modifier la class de la derniere image (notification).

Code:

/*************  info bulle droite notification *******************/
.infobulle_1{
  position: relative;}
 
.infobulle_1 .infobulle-hidden_2 {
  /* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */
  background: #7B5A0F;
    border: 1px solid #E2BF5D;
    border-radius: 10px;
    color: #E4D484;
    display: none;
  left:-80px;
    font-family: cursive;
    font-weight: 900;
  font-size:12px;
    position: absolute;
    visibility: visible;
    padding: 10px;
    z-index: 999;
  margin:auto;
  text-align:justify;
 
  }

.infobulle_1:hover .infobulle-hidden_2 {
  display: block;}
/************** fin info bulle droite notification ****************/

modiifer ici le

Code:

left:-80px;

pour deplacé la bulle

et donc dans le template il faut aussi modifier la ligne (notification )
reperer la dernier ligne de code >>

Code:

<span class="infobulle"><a id="fa_notifications" alt="Notifications"><img src="http://i.imgur.com/IrDIpIi.png" hspace="5"/></a>
  <span class="infobulle-hidden">
      Notification
  </span>
</span>

et remplacé par >>

Code:

<span class="infobulle_1"><a id="fa_notifications" alt="Notifications"><img src="http://i.imgur.com/IrDIpIi.png" hspace="5"/></a>
  <span class="infobulle-hidden_2">
      Notification
  </span>
</span>

et le tour et joué ....
bon dimanche

[SweetGumiho]

Merci beaucoup et bon dimanche à vous aussi !
Voici donc les éléments qu'il me reste à résoudre pour en terminer avec cette barre de navigation :
1►La barre de navigation ne se redimensionne pas avec la réduction de la fenêtre (c'est un problème car j'aimerais pouvoir faire des forums compatibles avec tous les navigateurs et résolutions d'écran).
2► Hover sur les boutons (l'image change au survol de la souris) + changement de l'image du boutons "Courrier" quand nouveau message dans la messagerie.
3► Clic sur le bouton de profil "Personnage" (la tête de mort) qui a le même effet que clic sur "Bienvenue 'Nom d'utilisateur'" dans la toolbar mais mise en page de la fenêtre personnalisée (un peu dans ce style).
4► Bouton de "Notifications" même effet que les notifications de la toolbar.

J'espère que quelqu'un aura des réponses sur ces points-là.

[Invité]

1►La barre de navigation ne se redimensionne pas avec la réduction de la fenêtre (c'est un problème car j'aimerais pouvoir faire des forums compatibles avec tous les navigateurs et résolutions d'écran).

re , en 15 pouce ou sur mon (tel)portable , elle s'affiche normalement !

[SweetGumiho]

Je suis en 15 pouces aussi mais si on réduit la taille de la fenêtre du navigateur cela finit par se mettre sur plusieurs lignes alors que j'aimerais que cela se réduise seulement en taille et reste sur une seule ligne.

[SweetGumiho]

Je clos cette demande d'aide. Merci.