Largeur et endroit du menu déroulant

[leboufon]

Bonjour!

Voici le site : www.lesfuturesmamans.bb-fr.com

Voici le ou les problèmes...

J'ai crée un menu déroulant à gauche, malheureusement, je ne le vois qu'en prévisualisation, même si je l'ai mis pour qu'il apparaisse sur toutes les pages, et je me demandais si le menu pouvait être "ouvert" comme ici et que si il y a des nouveaux messages, le titre du menu change de couleurs...

Ensuite je voudrais qu'il soit positionné plus bas, genre au même niveau que le début des forums.

Et 3ièment, est-ce que c'est possible de l'élargir? parce que là, le titre : Comment fonctionne le forum, embarque sur le sous-menu, NETiquette...

Je vous mets les infos et merci beaucoup pour votre aide!

HTML

Spoiler:

Java

Spoiler:

CSS

Spoiler:

[Dr. Karlos]

Bonsoir,

Vos titres se superposent car ils sont trop longs... La solution à faire serait d'agrandir le widget, comme vous l'avez proposé.

Si on agrandit le widget, il sera impossible de le placer où vous le désirez car il déformera la page. Voici donc les possibilités:

• Réduire les titres afin que je puisse placer le widget là où vous le désirez.

• Laissez les titres comme il sont et agrandir le widget, mais le placer ailleurs que proche de vos catégories.

Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

Merci beaucoup!

J'ai pris la décision de raccourcir les titres. Avez-vous besoin d'autres info pour continuer les changements?

et y'a la possibilité de le laisser ouvert? qu'il ne soit pas déroulant dans le fond? et que le titre du menu change de couleur quand il y a un nouveaux messages...

sirop j'en demande beaucoup

[Dr. Karlos]

Bonsoir,

Les titres de départ et les nouveaux titres ainsi que la version de votre forum


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

Bonsoir,

Les titres de départ et les nouveaux titres ainsi que la version de votre forum


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

je les ai déjà raccourcis les titres, et la version, PHPBB3

Merci beaucoup!!

nouveau html

Spoiler:

[Dr. Karlos]

Bonsoir,

Voici le nouveau code HTML à insérer dans un widget personnalisé (PA > Modules > Portail & Widgets > Gestions des widgets du forum > Créer un widget personnalisé). Assurez-vous d'avoir cliqué sur "oui" à "afficher les widgets". Vous cocherez "non" à "utiliser une table type".

Code:

<div id="menu">
<dl>
<dt>MENU</dt>
</dl>

<dl>
<dt>IMPORTANT</dt>
<dd style="display:none;">
<ul>
<li><a href="http://www.famillesmodernes.com/f11-netiquette">NETiquette</a></li>
<li><a href="http://www.famillesmodernes.com/f12-je-me-presente">Je me présente</a></li>
<li><a href="http://www.famillesmodernes.com/f16-messages-des-admins">Messages des Admins</a></li>
<li><a href="http://www.famillesmodernes.com/f2-vos-demandes">Vos demandes</a></li>
</ul>
</dl>
<dl>
<dt>ON JASAIT LÀ....</dt>
<dd style="display:none;">
<ul>
<li><a href="http://www.famillesmodernes.com/f10-general">Général</a></li>
<li><a href="http://www.famillesmodernes.com/f24-anonymat">Anonymat</a></li>
</ul>
</dl>
<dl>
<dt>MES SOUVENIRS</dt>
<dd style="display:none;">
<ul>
<li><a href="http://www.famillesmodernes.com/f21-je-voudrais-garder">Je voudrais garder</a></li> </ul></dl>
<dl>
<dt>MATERNITÉ</dt>
<dd style="display:none;">
<ul>
<li><a href="http://www.famillesmodernes.com/t36315-la-jasette-des-essayeuses">La jasette des essayeuses</a></li>
<li><a href="http://www.famillesmodernes.com/f3-information-de-la-conception-a-la-naissance">Info - De la conception à la naissance</a></li>
<li><a href="http://www.famillesmodernes.com/f4-recit-d-accouchement">Récits d'accouchement</a></li>
<li><a href="http://www.famillesmodernes.com/f6-info-alimentation-du-nouveau-ne">Info - Alimentation du nouveau-né</a></li>
</ul>
</dt>
</dl>
</div>

En ce qui concerne le CSS, effacez l'autre et insérez ce code:

Code:

#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu dl {
width: 200px;
margin: 1px;
padding: 0;
list-style-type: none;}

#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
margin: 0;
padding: 0;
list-style-type: none;}

#menu dd {
border: 1px solid gray;
margin: 0;
padding: 0;
list-style-type: none;}

#menu li {
text-align: center;
background: #fff;
margin: 0;
padding: 0;
list-style-type: none;}

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;}

#menu li a:hover, #menu dt a:hover {
background: #eee;
margin: 0;
padding: 0;
list-style-type: none;}

#left{
width: 0 !important;
}

#menu{
position: absolute;
left:0;
top: 820px;}


Vous gardez le même code Javascript qui doit être configuré pour afficher sur toutes les pages. Voici le résultat:




Voulez-vous changer quelque chose ou ça vous plaît?


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

OUI!! ça serait parfait, si je pouvais le voir sur le forum!

Je ne sais pas pourquoi je ne le vois pas!

Ensuite, pour ce qui est du changement de couleur, c'est possible?

Et si le menu s'aggrandit ou se modifie, je ne fais qu'aller modifier le widget personnalisé?

Je vous remercie infiniment de tout l'aide apporter!

[Dr. Karlos]

Bonsoir,

Avez-vous bien coché comme ceci les options javascript (PA > Modules > HTML et Javascript > Gestion des codes Javascript) de votre code?:


Le HTML est-il bien activé partout sur votre forum? Cliquez ici pour vous en assurer.

Avez-vous bien rentré ce que je vous ai dit?



Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

OUI!!

enfin! Merci beaucoup!

Il ne me reste qu'à peaufiner tout ça!

Merci pour votre aide! Deux fois en deux soir! je suis à la veille de vous appeler Maître

[Dr. Karlos]

Bonsoir,

Je n'avais pas fini de répondre à vos questions Quelle(s) couleur(s) voulez-vous modifier? Et si vous modifiez votre texte, vous n'avez qu'à aller dans votre widget, comme vous avez dit

C'est mon plaisir! Mais non, Dr. Karlos suffira



Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

ah ben, je ne voulais pas abuser non plus...
mais si vous insistez

je me demandais, y'aurait moyen d'arrondir le carré de la forme du menu? pour que ça corresponds un peu plus au forum lui-même...
ça existe un code pour un menu flottant? qui suit la page quand on la descends? je sais pas si vous comprenez?
et pour ce qui est des couleurs, comme j'ai fait une demande de thème complet, je ne sais pas encore de quoi ça va avoir l'air...

Merci!

[leboufon]

oups, trompé de piton

[Dr. Karlos]

Bonsoir,

Lorsque vous changerez vos couleurs, vous n'aurez qu'à venir poster ici et nous vous aiderons

Pour le widget flottant qui suit, vous n'avez qu'à remplacer votre CSS par:

Code:

#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
 
#menu dl {
width: 200px;
margin: 1px;
padding: 0;
list-style-type: none;}
 
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu dd {
border: 1px solid gray;
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu li {
text-align: center;
background: #fff;
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu li a:hover, #menu dt a:hover {
background: #eee;
margin: 0;
padding: 0;
list-style-type: none;}
 
#left{
width: 0 !important;
}
 

.floating_widget
{
position:fixed;
left:0;
top: 100;
}

Et votre code HTML par:

Code:

<div class="floating_widget"><div id="menu">
<dl>
<dt>MENU</dt>
</dl>
 
<dl>
<dt>IMPORTANT</dt>
<dd style="display:none;">
<ul>
<li><a href="http://www.famillesmodernes.com/f11-netiquette">NETiquette</a></li>
<li><a href="http://www.famillesmodernes.com/f12-je-me-presente">Je me présente</a></li>
<li><a href="http://www.famillesmodernes.com/f16-messages-des-admins">Messages des Admins</a></li>
<li><a href="http://www.famillesmodernes.com/f2-vos-demandes">Vos demandes</a></li>
</ul>
</dl>
<dl>
<dt>ON JASAIT LÀ....</dt>
<dd style="display:none;">
<ul>
<li><a href="http://www.famillesmodernes.com/f10-general">Général</a></li>
<li><a href="http://www.famillesmodernes.com/f24-anonymat">Anonymat</a></li>
</ul>
</dl>
<dl>
<dt>MES SOUVENIRS</dt>
<dd style="display:none;">
<ul>
<li><a href="http://www.famillesmodernes.com/f21-je-voudrais-garder">Je voudrais garder</a></li> </ul></dl>
<dl>
<dt>MATERNITÉ</dt>
<dd style="display:none;">
<ul>
<li><a href="http://www.famillesmodernes.com/t36315-la-jasette-des-essayeuses">La jasette des essayeuses</a></li>
<li><a href="http://www.famillesmodernes.com/f3-information-de-la-conception-a-la-naissance">Info - De la conception à la naissance</a></li>
<li><a href="http://www.famillesmodernes.com/f4-recit-d-accouchement">Récits d'accouchement</a></li>
<li><a href="http://www.famillesmodernes.com/f6-info-alimentation-du-nouveau-ne">Info - Alimentation du nouveau-né</a></li>
</ul>
</dt>
</dl>
</div>
</div>

Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

Merci!

Question technique...

dans les autres codes que vous avez fait, je n'avais qu'à copier tel quel, et tout se placait en ligne comme il faut..

là, tout est en "tapon" pour le html et tout sur une même ligne avec le CSS savez-vous pourquoi?


******************************
finalement, en ouvrant une page Firefox et en copiant le code à partir de là, tout est ok


******************************

je viens d'installer les deux codes, et je ne vois rien sur le forum...je refais un essai

[Dr. Karlos]

Bonsoir,

Je dois vous avouer n'en avoir aucune idée, je n'ai jamais vécu ce problème... Essayez de vider votre cache et vos cookies pour voir si ça se règle


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

Bon! ça ne fonctionne pas, je le vois en prévisualisation, mais pas en réel...

Autre question : Est-ce qu'il y a possibilité pour que la forme du menu soit la même que la forme des catégories du forum? je sais pas si je suis claire?

Entk, je vous remercie pour votre aide, et si j'oserais, je vous dirais à demain soir, j'aurais sûrement d'autres questions!

Merci beaucoup et bonne nuit!

[Dr. Karlos]

Bonsoir,

Que voulez-vous dire Que voyez-vous en réel? Votre widget est-il bien activé? Avez-vous replacé votre code Javascript?

Réessayez de copier mes codes, c'est ce que j'ai fait. En ce qui concerne l'arrondissement, je n'arrive pas à faire arrondir le widget au complet, la seule chose que j'arrive à faire est d'arrondir tous les titres... Je cherche!


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

Je récapitule ce que je dois faire...

Je prends le CSS, et le mets à la place de l'autre
Je supprime l'ancien widget et le remplace par le nouveau...

Dans mon java et le html, je ne touche rien...

je suis ok ou complètement dans le champ?

et quand je dis en réel, c'est que je le vois en prévisualition, mais quand je le valide, je ne le vois plus...et ça, c'est quand j'ai mis le html dans Gestion des pages html...

ça sera la dernière pour ce soir, la fatigue commence à se faire sentir...je ne réfléchis plus

Merci beaucoup!

[Dr. Karlos]

Oui, donc vous prenez les codes se trouvant ici et vous les mettez à la place des anciens, ça devrait refaire fonctionner.

Par la suite, allez vérifier que vous bien coché (et que ça n'a pas changé) comme ceci les options javascript (PA > Modules > HTML et Javascript > Gestion des codes Javascript) de votre code?:



Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

Youppi!! Le cerveau a eu un regain d'énergie et ça fonctionne! Reste à mettre tout ça beau pour que ça s'intègre bien dans le décor du forum!

Je vous remercie! et je vous dis à demain, avec mes autres questions.

Bonne nuit!

[leboufon]

Oh non... Le menu flottant n'est pas correct quand je prends le IPad...sirop de sirop....

[Dr. Karlos]

Bonjour,

Les iPads ne doivent probablement pas prendre en compte le Javascript... Je dois vous avouer ne pas trop être calé en matière de Forumactif "version mobile".

Pouvez-vous prendre une prise d'écran du problème sur iPad en appuyant sur le bouton pour fermer l'écran et le bouton central?


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

Image en ouvrant le site




En déplaçant vers en bas

[Dr. Karlos]

Bonsoir,

Si vous basculez votre iPad sur le côté? Car la largeur semble être modifié par la version mobile...


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

Ça fait la même chose.... Puisque le forum s'adapte automatiquement à la largeur de l'écran....

[Dr. Karlos]

Bonsoir,

Le problème est donc ici... Je ne veux pas réduire la largeur de votre forum pour le iPad, car ça va rapetisser sur l'ordinateur aussi. Je ne pense pas que ça soit modifiable, mais si quelqu'un de plus calé avec les mobiles est présent, il peut venir vous aider

Petite question, je n'arrive plus à accéder à votre forum, je vois: "Venez nous retrouver www.lesfuturesmamans.ca", est-ce normal?


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

J'ai corrigé, il avait été mis en construcuton pour pas que les participantes aillent voir....

[Dr. Karlos]

Bonsoir,

D'accord! Comme je vous ai dit, en réduisant la largeur du forum, je vais devoir réduire la largeur du widget aussi ce qui devrait permettre au iPad de voir correctement le widget.

Essayez ceci:

Code:

#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
 
#menu dl {
width: 160px;
margin: 1px;
padding: 0;
list-style-type: none;}
 
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu dd {
border: 1px solid gray;
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu li {
text-align: center;
background: #fff;
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu li a:hover, #menu dt a:hover {
background: #eee;
margin: 0;
padding: 0;
list-style-type: none;}
 
#left{
width: 0 !important;
}
 
 
.floating_widget
{
position:fixed;
left:0;
top: 100;
}

Et réduisez la largeur de votre forum dans le Panneau d'administration > Général > Forum > Configuration > Largeur du forum.

Je doute que ça fonctionne, mais essayons tout de même ^^. Allez sur votre iPad voir si ça fonctionne.


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[leboufon]

Bonsoir Maître!!

Tout fonctionne parfaitement!! Le problème a été régler quand j'ai mis la grandeur du forum en % au lieu de fixe je crois...

Pouvez-vous me dire où je peux agrandir l'écriture des widgets?

et j'ai d'autres questions, concernant le petit menu Plus! à droite, je peux vous en parler?
et aussi, en haut du forum, au lieu d'avoir

Voir les nouveaux messages depuis votre dernière visite • Voir ses messages • Voir les messages sans réponses

Comme je fais pour voir le menu de l'index?

Merci!!

[Dr. Karlos]

Bonsoir,

Il n'existe pas de class pour les widgets spécialement. Si vous modifiez la police en allant dans Panneau d'administration > Images et couleurs > Couleurs > Taille police principale, cela affectera toutes les écritures du forum.

Voulez-vous agrandir l'écriture d'un widget en particulier? S'agit-il d'un widget personnalisé ou d'un widget par défaut? Nous créerons une class afin de pouvoir mettre la grandeur de police que nous désirons!

Pour des soucis de clarté et pour que les gens puissent retrouver votre question le plus rapidement si ils ont le même problème, vous devez créer un autre topic


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.