Problème responsive design joomspirit76

[fynhooft]

Re : Problème responsive design joomspirit76

...

Cependant pour obtenir ce rendu mes fanions étaient trop petits et je n'ai pas vraiment été emballé par le rendu final, c'est bien dommage...

Je ne comprends pas. Sur mon pc, les fanions s'affichent correctement et sont parfaitement positionnés.
Vos fanions font 30x30 px, je les réduis à 29px de large (sauf pour 600px de large : 32px) . Je ne vois pas vraiment de différence !

[PhilJ]

Re : Problème responsive design joomspirit76

Bonsoir Alva,

Vous êtes énorme

Ah ! mais non je ne suis pas gros .

[...] Comme je l'ai dit plus haut, j'ai obtenu un rendu satisfaisant. Je dis satisfaisant puisque je me retrouve bien avec deux lignes de fanions, mais sur la deuxième, en début de ligne, je me retrouve avec un blanc dont je ne comprend pas la cause. J'ai pourtant joué avec divers paramètres mais je n'ai pas réussi a identifier le problème, de plus la ligne du haut compte 10 fanions et celle du bas 8, l'idéal aurait été 9 sur la première ainsi que sur la deuxième, donc si vous avez une petite idée sur le sujet, je vous en serait reconnaissant.

Compris.

D'abord l'explication : les fanions sont en menu, mais ils ne peuvent pas tous tenir sur une seule « ligne » sur les petits écrans. La propriété <ul class="nav menu nav-pills"> qui inaugure le menu étant plus large que la place disponible, une deuxième (voire une troisième) « ligne » de fanions s'affiche en dessous, à la suite, donc en fait en dessous sur la droite, ce qui donne visuellement l'impression d'un « trou » sur la gauche. De plus, le nombre de fanions par « ligne » n'est pas du tout sous contrôle, ce qui explique qu'il puisse y avoir une « ligne » de 8 fanions en dessous d'une « ligne » de 10 fanions au dessus. En réalité, cette répartition dépend de la largeur de l'écran : par exemple, avec une largeur d'écran de 480 px (type iPhone en mode paysage), nous avons 14 fanions en première « ligne », et 4 fanions seulement en 2^e « ligne », tandis que si la largeur de l'écran est de 435 px (type Nexus 6P en mode portrait), la « ligne » supérieure comprend 13 fanions, et celle du dessous en contient 5.

=> Si vous voulez de la régularité sur les petits écrans (disons en dessous de 768 px), il faut rigidifier le cadre : en clair, pour obtenir 2 « lignes » centrées de 9 fanions lorsque l'écran est petit, il faut (1°) contrôler la largeur des images, (2°) fixer une fois pour toutes les marges internes (= paddings) des <li> qui contiennent des images, et (3°) arrêter une largeur fixe pour le menu, sans oublier de centrer ce dernier sur la largeur de l'écran.

Voici un code qui devrait bien convenir pour ce que vous souhaitez obtenir :

@media screen and (max-width: 767px) {

.moduletablehorizontal.menu {

width: 290px; /* on fixe la largeur totale du menu */
margin: 0 auto; /* on centre le menu */

}
.module-breadcrumb .moduletablehorizontal .nav > li > a {

padding: 0 0 10px; /* on fixe définitivement les marges internes des liens */

}
.moduletablehorizontal .nav-pills img {

width: 28px; /* on contrôle exactement la largeur des images */

}

}

Attention : ces instructions sont solidaires. Si vous changez une valeur, ne serait-ce que d'un pixel, il faudra modifier aussi toutes les autres valeurs.


________________________

Concernant l'extension payante :

je n'ai jamais payé pour une extension, de peur de ne pas obtenir le résultat espéré...

Il faut vivre dangereusement . Sérieusement : (1°) une démonstration en ligne est presque toujours proposée pour ce genre d'extensions. (2°) Les avis des utilisateurs sur le JED sont souvent de très bons indicateurs.

En outre, le risque est ici minime : 7.00 €. Si vous êtes une association et que l'association rassemble 70 adhérents, c'est tout au plus 0.10 € par adhérent .

De plus je ne comprend pas vraiment comment ça marche, 6 mois de MAJ cela veut dire que au bout de cette période mon extension ne fonctionnera plus ? Je devrais a nouveau payer les 7 euros ?

Votre extension, une fois payée, téléchargée, installée et configurée, fonctionnera toujours dans un an, deux ans... aussi longtemps que Joomla la supportera. La période de 6 mois correspond à la durée de l'abonnement au cours duquel le développeur s'engage à vous aider (support technique) et à permettre que vous téléchargiez le logiciel, notamment en cas de mise à jour de celui-ci.

Concrètement, 6 mois peut être suffisant si l'extension n'est pas mise à jour fréquemment, ce qui semble être le cas pour le genre d'extension qui vous intéresse.

On n'en dira pas autant de certaines extensions commerciales plus ambitieuses, gravitant autour d'un composant, car alors la complexité logicielle est telle que de nombreuses « retouches » sont apportées (corrections de bugs, correctifs de sécurité, améliorations, ajouts de fonctionnalités...). Dans ce cas, 6 mois est une période bien courte.

[alva75]

Re : Problème responsive design joomspirit76

Bonsoir Alva,




Ah ! mais non je ne suis pas gros .




Compris.

D'abord l'explication : les fanions sont en menu, mais ils ne peuvent pas tous tenir sur une seule « ligne » sur les petits écrans. La propriété <ul class="nav menu nav-pills"> qui inaugure le menu étant plus large que la place disponible, une deuxième (voire une troisième) « ligne » de fanions s'affiche en dessous, à la suite, donc en fait en dessous sur la droite, ce qui donne visuellement l'impression d'un « trou » sur la gauche. De plus, le nombre de fanions par « ligne » n'est pas du tout sous contrôle, ce qui explique qu'il puisse y avoir une « ligne » de 8 fanions en dessous d'une « ligne » de 10 fanions au dessus. En réalité, cette répartition dépend de la largeur de l'écran : par exemple, avec une largeur d'écran de 480 px (type iPhone en mode paysage), nous avons 14 fanions en première « ligne », et 4 fanions seulement en 2^e « ligne », tandis que si la largeur de l'écran est de 435 px (type Nexus 6P en mode portrait), la « ligne » supérieure comprend 13 fanions, et celle du dessous en contient 5.

=> Si vous voulez de la régularité sur les petits écrans (disons en dessous de 768 px), il faut rigidifier le cadre : en clair, pour obtenir 2 « lignes » centrées de 9 fanions lorsque l'écran est petit, il faut (1°) contrôler la largeur des images, (2°) fixer une fois pour toutes les marges internes (= paddings) des <li> qui contiennent des images, et (3°) arrêter une largeur fixe pour le menu, sans oublier de centrer ce dernier sur la largeur de l'écran.

Voici un code qui devrait bien convenir pour ce que vous souhaitez obtenir :

@media screen and (max-width: 767px) {

.moduletablehorizontal.menu {

width: 290px; /* on fixe la largeur totale du menu */
margin: 0 auto; /* on centre le menu */

}
.module-breadcrumb .moduletablehorizontal .nav > li > a {

padding: 0 0 10px; /* on fixe définitivement les marges internes des liens */

}
.moduletablehorizontal .nav-pills img {

width: 28px; /* on contrôle exactement la largeur des images */

}

}

Attention : ces instructions sont solidaires. Si vous changez une valeur, ne serait-ce que d'un pixel, il faudra modifier aussi toutes les autres valeurs.


________________________

Bonjour, je m’excuse par avance de ma réponse tardive (beaucoup de travail) et je vous remercie de m'avoir répondu, mais j'ai essayé d'appliquer vos conseils mais je ne suis pas arrivé au résultat souhaité. Dois je changer les valeurs ?

Cordialement Alva

[PhilJ]

Re : Problème responsive design joomspirit76

Bonjour,


Je regarde le custom.css et je n'y trouve pas les codes suggérés...

[alva75]

Re : Problème responsive design joomspirit76

Bonjour,


Je regarde le custom.css et je n'y trouve pas les codes suggérés...

Bonjour, c'est normal je les ais enlevés car cela avait changé l'affichage sur tablette.

[PhilJ]

Re : Problème responsive design joomspirit76

Bonjour,

Bonjour, c'est normal je les ais enlevés car cela avait changé l'affichage sur tablette.

Là je ne vois vraiment pas comment vous aider au-delà. Mes suggestions sont peut-être à améliorer, mais pour débugger un programme, il faut un programme. Concrètement, si vous ne mettez pas les codes suggérés en place, il m'est impossible de vous indiquer la moindre correction.

...D'autant que une déclaration telle que « cela avait changé l'affichage » ne dit rien de la manière dont ces nouveaux codes avaient changé l'affichage.

Idem pour « sur tablette » : sur quel modèle de tablette, et surtout avec quelle résolution (nombre de pixels) en largeur ??

[alva75]

Re : Problème responsive design joomspirit76

Bonjour,




Là je ne vois vraiment pas comment vous aider au-delà. Mes suggestions sont peut-être à améliorer, mais pour débugger un programme, il faut un programme. Concrètement, si vous ne mettez pas les codes suggérés en place, il m'est impossible de vous indiquer la moindre correction.

...D'autant que une déclaration telle que « cela avait changé l'affichage » ne dit rien de la manière dont ces nouveaux codes avaient changé l'affichage.

Idem pour « sur tablette » : sur quel modèle de tablette, et surtout avec quelle résolution (nombre de pixels) en largeur ??

Bonjour PhilJ, encore une fois je vous remercie d'avoir pris le temps de me répondre.
Sur les téléphones la disposition ne changeais en rien de celle actuelle (galaxy edge6). Pour la tablette j'ai testé sur Ipad 3 et cela avait mis les fanions avec une ligne de 14 et une deuxième de 4, alors que la définition actuelle de tablette me convenait (je peux changer pour uniquement la résolution au dessus de mobile avec les medias queries).

Très cordialement alva

[PhilJ]

Re : Problème responsive design joomspirit76

Bonsoir,


Concernant les tablettes :

Pour la tablette j'ai testé sur Ipad 3 et cela avait mis les fanions avec une ligne de 14 et une deuxième de 4, alors que la définition actuelle de tablette me convenait (je peux changer pour uniquement la résolution au dessus de mobile avec les medias queries).

L'iPad 3 dispose des dimensions suivantes : 768 px en mode portrait, 1024 px en mode paysage (http://viewportsizes.com/?filter=Ipad%203).

=> Essayez de remplacer 767px par 768px dans les directives suivantes dans votre fichier custom.css :

@media screen and (max-width: 768px) {
.moduletablehorizontal.menu {
width: 290px; /* on fixe la largeur totale du menu */
margin: 0 auto; /* on centre le menu */
}
.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 0 0 10px; /* on fixe définitivement les marges internes des liens */
}
.moduletablehorizontal .nav-pills img {
width: 28px; /* on contrôle exactement la largeur des images */
}
}

...Vous devriez alors obtenir la disposition suivante en mode portrait (768px) :



Le mode paysage de l'iPad (= 1024 px) n'est évidemment pas affecté par ces directives.

[PhilJ]

Re : Problème responsive design joomspirit76

Concernant les smartphones :

Sur les téléphones la disposition ne changeais en rien de celle actuelle (galaxy edge6).

Je ne parviens pas à savoir quelle est la largeur utile de ce modèle. Cependant, vous pouvez la trouver en vous connectant, avec votre appareil, sur http://viewportsizes.com/mine.

[alva75]

Re : Problème responsive design joomspirit76

Bonsoir,


Concernant les tablettes :



L'iPad 3 dispose des dimensions suivantes : 768 px en mode portrait, 1024 px en mode paysage (http://viewportsizes.com/?filter=Ipad%203).

=> Essayez de remplacer 767px par 768px dans les directives suivantes dans votre fichier custom.css :

@media screen and (max-width: 768px) {
.moduletablehorizontal.menu {
width: 290px; /* on fixe la largeur totale du menu */
margin: 0 auto; /* on centre le menu */
}
.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 0 0 10px; /* on fixe définitivement les marges internes des liens */
}
.moduletablehorizontal .nav-pills img {
width: 28px; /* on contrôle exactement la largeur des images */
}
}

...Vous devriez alors obtenir la disposition suivante en mode portrait (768px) :

[ATTACH=CONFIG]32849[/ATTACH]

Le mode paysage de l'iPad (= 1024 px) n'est évidemment pas affecté par ces directives.

Bonsoir PhilJ.

Pour une raison que je ne comprend pas, la version téléphone fonctionne, alors que le jour ou j'avais fait le test non, j'ai pas compris mais en tout cas c'est top et c'est parfait sur téléphone donc merci énormément.

Par contre sur tablette le problème est le même, j'ai pourtant vérifie la résolution qui est de 768, mais j'ai toujours 12 fanions en haut et 6 en bas...

Cordialement, alva

[PhilJ]

Re : Problème responsive design joomspirit76

Bonsoir Alva,


Je ne peux que me répéter :

---

=> Essayez de remplacer 767px par 768px dans les directives suivantes dans votre fichier custom.css :

@media screen and (max-width: 768px) {
.moduletablehorizontal.menu {
width: 290px; /* on fixe la largeur totale du menu */
margin: 0 auto; /* on centre le menu */
}
.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 0 0 10px; /* on fixe définitivement les marges internes des liens */
}
.moduletablehorizontal .nav-pills img {
width: 28px; /* on contrôle exactement la largeur des images */
}
}

---

Actuellement, le contenu de votre custom.css est :

---

=> Essayez de remplacer 767px par 768px dans les directives suivantes dans votre fichier custom.css :

@media screen and (max-width: 767px) {
.moduletablehorizontal.menu {
width: 290px; /* on fixe la largeur totale du menu */
margin: 0 auto; /* on centre le menu */
}
.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 0 0 10px; /* on fixe définitivement les marges internes des liens */
}
.moduletablehorizontal .nav-pills img {
width: 28px; /* on contrôle exactement la largeur des images */
}
}

---

...ce qui explique votre insatisfaction.

=> Si vous voulez exactement la même disposition sur tablette iPhone en mode portrait 768 px et avec smartphone, il vous faut cibler jusqu'à (au moins) 768 px, et pas seulement jusqu'à 767 px.

_____________________

Ensuite, j'imagine que vous souhaitez une meilleure répartition des fanions au-delà de 768 px (= grandes tablettes et desktop / laptop), avec également 2 rangées de 9 fanions, mais avec une meilleure aération.

=> Si c'est bien le cas, alors essayez d'ajouter ceci à votre custom.css :

.moduletablehorizontal .nav-pills img {

width: 27px;

}
.moduletablehorizontal.menu {

margin: 0 auto;
width: 570px;

}


=> Le nouveau custom.css devrait donc contenir précisément ceci :

---

.moduletablehorizontal .nav-pills img {

width: 27px;

}
.moduletablehorizontal.menu {

margin: 0 auto;
width: 570px;

}

@media screen and (max-width: 768px) {

.moduletablehorizontal.menu {

width: 290px;
margin: 0 auto;

}
.module-breadcrumb .moduletablehorizontal .nav > li > a {

padding: 0 0 10px;

}
.moduletablehorizontal .nav-pills img {

width: 28px;

}

}

---

...et SVP n'effacez pas ce nouveau code après l'avoir ajouté car sinon il faudra encore revenir sur le souci.




Amicalement,

[PhilJ]

Re : Problème responsive design joomspirit76

Pour une raison que je ne comprend pas, la version téléphone fonctionne, alors que le jour ou j'avais fait le test non, j'ai pas compris [...]

La raison la plus vraisemblable de cet échec lors de votre essai est le cache de votre téléphone. Il faut le vider, sinon vous visionnez une version du passé .

[alva75]

Re : Problème responsive design joomspirit76

Bonsoir Alva,


Je ne peux que me répéter :

---

=> Essayez de remplacer 767px par 768px dans les directives suivantes dans votre fichier custom.css :

@media screen and (max-width: 768px) {
.moduletablehorizontal.menu {
width: 290px; /* on fixe la largeur totale du menu */
margin: 0 auto; /* on centre le menu */
}
.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 0 0 10px; /* on fixe définitivement les marges internes des liens */
}
.moduletablehorizontal .nav-pills img {
width: 28px; /* on contrôle exactement la largeur des images */
}
}

---

Actuellement, le contenu de votre custom.css est :

---

=> Essayez de remplacer 767px par 768px dans les directives suivantes dans votre fichier custom.css :

@media screen and (max-width: 767px) {
.moduletablehorizontal.menu {
width: 290px; /* on fixe la largeur totale du menu */
margin: 0 auto; /* on centre le menu */
}
.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 0 0 10px; /* on fixe définitivement les marges internes des liens */
}
.moduletablehorizontal .nav-pills img {
width: 28px; /* on contrôle exactement la largeur des images */
}
}

---

...ce qui explique votre insatisfaction.

=> Si vous voulez exactement la même disposition sur tablette iPhone en mode portrait 768 px et avec smartphone, il vous faut cibler jusqu'à (au moins) 768 px, et pas seulement jusqu'à 767 px.

_____________________

Ensuite, j'imagine que vous souhaitez une meilleure répartition des fanions au-delà de 768 px (= grandes tablettes et desktop / laptop), avec également 2 rangées de 9 fanions, mais avec une meilleure aération.

=> Si c'est bien le cas, alors essayez d'ajouter ceci à votre custom.css :

.moduletablehorizontal .nav-pills img {

width: 27px;

}
.moduletablehorizontal.menu {

margin: 0 auto;
width: 570px;

}


=> Le nouveau custom.css devrait donc contenir précisément ceci :

---

.moduletablehorizontal .nav-pills img {

width: 27px;

}
.moduletablehorizontal.menu {

margin: 0 auto;
width: 570px;

}

@media screen and (max-width: 768px) {

.moduletablehorizontal.menu {

width: 290px;
margin: 0 auto;

}
.module-breadcrumb .moduletablehorizontal .nav > li > a {

padding: 0 0 10px;

}
.moduletablehorizontal .nav-pills img {

width: 28px;

}

}

---

...et SVP n'effacez pas ce nouveau code après l'avoir ajouté car sinon il faudra encore revenir sur le souci.




Amicalement,

Bonjour phil J et encore une fois un énorme merci.
j'ai donc effectué les changements comme vous pouvez le voir. Cela marche et merci. Mais au final graphiquement je n'ai pas apprécié le rendu. Je souhaite donc bien garder pour version mobile telle quelle, c'est parfait vraiment. Par contre pour tablette et mêmes laptop et grandes tablettes enfin sur tout les autres appareils je préfère quand tout tien bien, sur une seule ligne.
Alors je n'ai pas effacé comme vous me l'aviez demandé. Mais je suppose que pour revenir a l'ancienne hors telephones mobiles, il me faut quelque chose du genre:

@media screen and (min-width: 600px) and (max-width: 1024px)
{
.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 1px 1px;
}
@media screen and (max-width: 768px) {
.moduletablehorizontal.menu {
width: 290px; /* on fixe la largeur totale du menu */
margin: 0 auto; /* on centre le menu */
}
.module-breadcrumb .moduletablehorizontal .nav > li > a {
padding: 0 0 10px; /* on fixe définitivement les marges internes des liens */
}
.moduletablehorizontal .nav-pills img {
width: 28px; /* on contrôle exactement la largeur des images */
}
}

Esse bien cela ? Ou je me trompe de 10 000 ?

Cordialement alva

[PhilJ]

Re : Problème responsive design joomspirit76

Bonjour,

j'ai donc effectué les changements comme vous pouvez le voir. Cela marche et merci. Mais au final graphiquement je n'ai pas apprécié le rendu. Je souhaite donc bien garder pour version mobile telle quelle, c'est parfait vraiment.

Par contre pour tablette et mêmes laptop et grandes tablettes enfin sur tout les autres appareils je préfère quand tout tien bien, sur une seule ligne.

C'est bien sûr comme vous voulez. Simplement tenez compte de la largeur nécessaire pour que tous les fanions tiennent sur une seule ligne. Cela vous donnera la largeur minimum idéale à cibler pour vos directives CSS (= la largeur à partir de laquelle les fanions tiendront tous sur une seule et même ligne). Ce n'est pas forcément 1024 px comme dans le code que vous produisez.

@media screen and (min-width: 600px) and (max-width: 1024px)
{

.module-breadcrumb .moduletablehorizontal .nav > li > a {

padding: 1px 1px;

}

Attention, car dans votre code il manque la fermeture de @media.

=> Corrigez ainsi :

@media screen and (min-width: 600px) and (max-width: 1024px) {

.module-breadcrumb .moduletablehorizontal .nav > li > a {

padding: 1px 1px;

}

}

[alva75]

Re : Problème responsive design joomspirit76

Bonjour,




C'est bien sûr comme vous voulez. Simplement tenez compte de la largeur nécessaire pour que tous les fanions tiennent sur une seule ligne. Cela vous donnera la largeur minimum idéale à cibler pour vos directives CSS (= la largeur à partir de laquelle les fanions tiendront tous sur une seule et même ligne). Ce n'est pas forcément 1024 px comme dans le code que vous produisez.

Bonsoir Phil J, merci encore une fois. Cependant je ne suis pas sur d'avoir compris. Si ce n'est pas 1024px donc c'est ? Comment puis je vérifier la largeur nécessaire et a partir de combien cibler ?

Cordialement alva