probléme mise en page

[piratebab]

j'ai un petit soucis d'affichage en bas à droite des pages
Qu'est ce que je vais supprimer en cliquant su le lien ? :)

[MicP]

Bonsoir piratebab

Il s'agit du lien qui permet de Supprimer tous les cookies du forum

Voici comment ça se présente sur ma machine :

[piratebab]

Comme chez moi donc, le bouton DISCUSSION masque une partie du texte

[MicP]

le bouton DISCUSSION masque une partie du texte

Oui, il reste en bas à droite de la fenêtre quelle que soit la hauteur et largeur de la fenêtre du navigateur
car il est contenu dans la hiérarchie d'une balise div (jappix_mini) qui a pour attribut CSS position : fixed


(J'aurais dû mettre le coin bas droit de la page dans ma capture d'écran précédente)

[piratebab]

Sur la fenetre elle même, c'est OK, mais j'ai cette infobulle qui apprait (je ne sais pas pourquoi), et c'est elle qui est masquée par le bouton discussion.
Alors que chez toi, cette info est présente dans le bandeau de bas de page.

[MicP]

J'ai remarqué que l'infobulle n'apparaît que si le bandeau contenant :

Accueil - Les forums de debian-fr.xyz - À propos - L’équipe - Membres - Supprimer tous les cookies du forum - Le fuseau horaire est réglé sur UTC+02:00

est trop réduit en largeur pour pouvoir afficher tout ça sur une seule ligne.

=======
Supprimer tous les cookies du forum - Le fuseau horaire est réglé sur UTC+02:00
sont alors affichés dans une infobulle qui reste sous le bouton Discussion

[piratebab]

je viens de faire le test, et je confirme. Sur un écran plus large, tout s'affiche dans le bandeau, pas de problème.
Sur un écran plus étroit, l'infobulle apparait, alors qu'il y a plein d'espace libre au centre du bandeau.
De plus, aprés une transition écran large/ écran plus étroit, l'info bulle ne s'affiche pas correctement! je n'ai que le début, toute sa partie droite est hors écran.

[MicP]

C'est pas toujours évident de mettre tout ça en place : À chaque fois que j'ai à le faire, ça me donne l'impression de jouer avec jeu de construction de mobiles

[lol]

Salut,

je viens de faire le test, et je confirme. Sur un écran plus large, tout s'affiche dans le bandeau, pas de problème.
Sur un écran plus étroit, l'infobulle apparait, alors qu'il y a plein d'espace libre au centre du bandeau.

Tu peux donner les tailles d'écrans précisément (ça a son importance dans le code et l'ajustement) ?

De plus, aprés une transition écran large/ écran plus étroit, l'info bulle ne s'affiche pas correctement! je n'ai que le début, toute sa partie droite est hors écran.

Le transition d'une taille à une autre n'est pas simple à gérer, notamment à cause des navigateurs qui conservent une partie du code en cache... Je dirais donc que c'est "pas si grave" eu égard au temps que ça me prendrais pour régler ce soucis (et que ce n'est pas souvent qu'on modifie la taille du navigateur à la volée).


Par contre pour le problème d'affichage du bas de page ça mérite que je m'y penche... :icon_wink:

[piratebab]

non, rien de grave.
je fais les tests sur le PC laptop du boulot, sosus windows. Donc si le forum ne passe pas bien avec cet OS, c'est encore moins grave!
écran laptop 1366 *768
écran externe 1680 * 1050

[MicP]

Bonjour

J'ai cherché à comprendre un peu plus comment tout ça fonctionnait.

Code : Tout sélectionner

Dans la liste "ul" ayant pour id "nav-footer" il y a 7 éléments de type "li"
Le premier de ces éléments de type "li" contient deux éléments de type "span" ("Accueil" "Les forums debian-fr.xyz") qui restent visibles et positionnés à gauche.
Si l'espace est assez large pour tout afficher, le deuxième de ces éléments de type "li" sera de la classe "hidden", "responsive-menu" et "dropdown-container"
Tous les autres éléments "li" sont de la classe "rightside"

=======
 - Tant que l'espace disponible pour afficher les 7 éléments de la liste "nav-footer" (les deux "span" compris),
     le système "responsive" ajoutera la classe "hidden" à l'élément de la classe "dropdown-container"
   (c'est le cas sur mon PC avec un affichage assez large)

=======
 - Si l'espace disponible est devenu trop restreint pour afficher la liste "nav-footer",
      - la classe "hidden" est enlevée par le système responsive pour :
          - l'élément de la classe "dropdown-container"
          - les deux éléments qui sont de la classe "clone" et "clone-first"
            => le menu drop down apparaît donc avec comme contenu :
              - Le fuseau horaire …
              - Le lien permettant de supprimer les cookies
      - le système responsive ajoute l'attribut "hidden" aux éléments "li" suivants qui n'ont pas la classe "data-last-responsive" à "1"
      - les trois éléments qui ont l'attribut "data-last-responsive" à "true" => "À propos", "L'équipe" et "Membre"
          sont ajoutés, dans le dropdown-container avec la classe "hidden" et "clone-last"
   (c'est le cas sur mon smartphone positionné en horizontal, ou en réduisant la largeur de la fenêtre affichée sur mon PC)

=======
 - Si l'espace disponible est devenu encore plus restreint (c'est le cas sur mon smartphone positionné vertical)
      - le système responsive ajoute l'attribut "hidden" aux trois éléments qui ont l'attribut "data-last-responsive" à "true" => "À propos", "Léquipe" et "Membre"
      - le système responsive supprime l'attribut "hidden" aux trois éléments qui ont l'attribut "clone-last" de la liste de la classe "dropdown-content"
   (c'est le cas sur mon smartphone positionné vertical, ou en réduisant encore plus la largeur de la fenêtre affichée sur mon PC)

=======
Le bouton "Discussion" est contenu dans le "div" dont l'id est "jappix-mini" qui a l'attribut CSS "fixed" (qui est définit à la ligne "7" du fichier "get.php")
Si cet attribut "fixed" est hinibé, il apparaîtra sous la liste contenue dans l'élément de la classe "dropdown-container"

=======
Bien sûr, comme le comportement du système "responsive" réagit en fonction de l'espace disponible,
il faut tenir compte du fait que cet espace disponible dépends aussi de la police de caractère que l'interpréteur des pages web utilisera.

[piratebab]

Cela correspond au comportement constaté.
Mais la décision de savoir si ça rentre ou pas est surprenante.
Par exemple là, il restait assez de place

de plus, la liste déroulante n'est pas "hiden" mais bien déroulée,
Autre curiositè, elle se déploie à partir du bas droit, et part vers la droite. Mais il n'y a plus d'écran à droite!

[MicP]

… il restait assez de place…

Comme c'est le système responsive qui décide,
je pense qu'il ne devait pas en rester assez. Peut-être à cause de la police de caractère choisie par ton navigateur

Essaye, avec la fenêtre occupant toute la largeur de ton écran,
de zoomer/dé-zoomer avec Ctrl+molette de la souris pour voir s'il y a finalement assez de place et constater le comportement.

Voilà ce que ça devrait donner, histoire de pouvoir comparer la police de caractère utilisée par :
Le fuseau horaire est réglé sur UTC+02:00

[piratebab]

En fait, il ne vire pas les 2 items l'un aprés l'autre, mais les 2 d'un coup. Ce qui libère brutalement beaucoup de place.
Une solution serait de virer du bandeau les items les une après les autres.
une solution plus rapide serait aussi de réduire le nombre de caractères.
Par exemple
Le fuseau horaire est réglé sur UTC+02:00
pourrait étre remplacé par UTC+02:00
Quand au lien pour supprimer tous les cookies du forum, faut il le mettre dans le bandeau ? Il pourrait se contenter d'une ligne dans le menu.

[MicP]

… les 2 d'un coup.…

C'est le comportement du système responsive dans la "lutte des classes" entre les éléments qui sont dans la classe "clone-first" et ceux qui sont dans la classe "clone-last"

"clone-first" <=> "Le fuseau horaire est réglé sur UTC+02:00", "Supprimer tous les cookies du forum"
"clone-last" <=> "Membres" , "L’équipe","À propos"

Avec en plus, (si j'ai bien compris) un script qui les ajoute ou les enlève de la classe "hidden" en les copiant (clone) ou supprimant du contenu de l'objet de la classe "dropdown-container"

[lol]

Hello,
Merci pour ton analyse MicP.
J'aimerais bien maîtriser, mais le PHP/CSS c'est pas trop mon truc, je trouve ça un peu chiant à vrai dire...

Effectivement en dessous de 1060/1070px c'est le bordel en bas de page.
Plutôt que de mettre en menu je vais vois si j'arrive à mettre en "hidden" les éléments qui nous enquiquinent...
Sur des tablettes/smartphones c'est pas primordial comme infos...

Par contre sur smartphone on a un problème bien plus gênant: Le menu principal en haut de page.
Je ne me suis jamais penché dessus...

Si vous me fournissez le code à modifier je corrigerais volontier.

[MicP]

Bonjour lol

Je suis sur le coup, et je pense pouvoir arriver à trouver une solution qui pourrait être intéressante,
mais avant de faire une proposition de modifications il me faut d'abord faire d'autres tests pour le bandeau du bas comme pour le menu principal en haut de page
Je pense pouvoir en parler ici ce soir.

[lol]

Salut,

Bonjour lol

Je suis sur le coup, et je pense pouvoir arriver à trouver une solution qui pourrait être intéressante,
mais avant de faire une proposition de modifications il me faut d'abord faire d'autres tests pour le bandeau du bas comme pour le menu principal en haut de page
Je pense pouvoir en parler ici ce soir.

C'est vraiment cool, merci. Je suis dans le jus total de tous les côtés...
J'ai les yeux qui piquent tellement je suis crevé...

Si t'as besoin d'un accès n'hésite pas, sinon j’appliquerais les modifs que tu m'indiquera.

[MicP]

Merci pour la proposition d'accès, pour l'instant, je suis en train d'observer et de chercher à comprendre ce qui se passe en comparant les pages web des différents forums qui ont été créés avec PhpBB,
notamment avec celui là : http://www.casa-trotter.com/phpBB3/index.php dont le comportement semble correspondre à celui qui est recherché.

Comme toute modification hasardeuse pourrait avoir des conséquences imprévues voire désastreuses, je préfère ne rien affirmer tant que je n'ai pas bien compris ce qu'il se passe.
Je n'ai aucune expérience concernant la mise en place et l'utilisation de ce genre de CMS (ni les autres d'ailleurs) coté serveur.

[piratebab]

exact, je n'avais pas vu qu'il était clickable.
Cet icone est généralement associé au menu de configuration.
Je verrai plus une double fléche, comme pour déplier quelque chose, pour indiquer que ça continu : >> (ou vers le haut)