Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Fonts et images responsive

Fonts et images responsive 15 Jun 2020 15:11 #56832

  • jmgroud
  • jmgroud's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 74
  • Thank you received: 3
Bonjour à tous

J'ai créé un menu horizontal avec des images et du texte.
La notion de "Responsive" par défaut au niveau de Maximenu CK semble être la création automatique d'une deuxième ligne de menu si la taille de l'écran n'est pas assez grande pour afficher toutes les options sur une seule ligne.
Je ne remets pas en cause cette fonctionnalité qui est en effet très pratique.

Je cherche aujourd'hui à paramétrer pour avoir une autre fonctionnalité.
J'aimerai garder l'affichage de tout le menu sur une seule ligne et avoir donc automatiquement l'augmentation ou la diminution de la taille des images et du texte...

Images
Forcer une image à changer sa dimension pour entrer dans un conteneur semble possible en HTML/CSS (il me semble) mais je n'ai pas trouvé comment le faire dans Maximenu CK. Actuellement, chaque option de menu s'adapte à la taille de l'image mais pas le contraire.
Textes
Concernant les titres et descriptions, on indique une taille dans Maximenu CK Params (onglets "Menu Principal" / "Barre de menu") mais ces tailles sont statiques et ne peuvent pas changer suivant la taille de l'écran. On indique en effet soit du "px", "em", ou "%".
J'ai lu sur un site qu'il existait d'autres possibilités pour avoir des tailles de police en fonction de la taille de l'écran : https://www.creativejuiz.fr/blog/veille-technologique/taille-police-en-fonction-largeur-ecran-viewport
Ne serait-il pas possible d'avoir cette possibilité ? Directement dans le paramétrage Maximenu CK Params ? Par un CSS personnalisé ?

Merci d'avance pour vos idées et éventuelles solutions.
Jean-Marie
Le peu que je sais est occulté pas le trop que je ne sais pas !

Please Log in or Create an account to join the conversation.

Last edit: by jmgroud. Reason: Corrections de fautes de frappe

Fonts et images responsive 15 Jun 2020 18:20 #56835

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23046
  • Karma: 427
  • Thank you received: 2907
Salut
pour les images, donne moi l'url de la page que je puisse voir ce que tu veux faire
tu peux faire ce que tu veux en CSS que ce soit dans maximenu ou pas ;)
pour les textes, rappelle moi cela d'ici quelques jours, je vais ajouter les autres unités pour qu'elles soient autorisées, cela te permettra de t'amuser à faire ce que tu veux
CEd
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Fonts et images responsive 15 Jun 2020 21:33 #56838

  • jmgroud
  • jmgroud's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 74
  • Thank you received: 3
Voici le lien de test.
https://pajade.fr/index.php/fr/image-de-depart/test-ne-pas-supprimer
Il y a dans cet exemple 8 options de menu.
Les images sont toutes de même taille. J'ai mis des sauts de ligne dans certains titres (avec ta méthode "ReReplacer".
Il reste à essayer :
- Avoir la même hauteur de bloc pour tous les liens de menu (les liens comportant 1 seule ligne sont moins hauts), ca se voit sur les liens survolés.
- Centrer les titres verticalement en dessous des images (ils sont actuellement positionnés vers le haut juste en-dessous de l'image).
- Garder toujours les 8 options sur 1 seule ligne, donc diminuer la taille des images et celle du texte si il n'y a pas assez de place sans changer la disposition, par exemple pour le titre "ARTS ET BEAUX ARTS", garder toujours "ARTS ET" sur la première ligne puis "BEAUX ARTS" sur la deuxième.
Merci
Jean-Marie
Le peu que je sais est occulté pas le trop que je ne sais pas !

Please Log in or Create an account to join the conversation.

Last edit: by jmgroud. Reason: Modification de l'adresse URL

Fonts et images responsive 16 Jun 2020 12:19 #56843

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23046
  • Karma: 427
  • Thank you received: 2907
tu pourrais jouer avec Flexbox en CSS, par exemple :
div#maximenuck246.maximenuckh ul.maximenuck{
    display: flex !important;
    justify-content: center;
}
et pour autoriser le retour à la ligne
div#maximenuck246.maximenuckh ul.maximenuck{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

pour aligner le texte c'est plus compliqué mais tu peux tenter
div#maximenuck246.maximenuckh ul.maximenuck li.maximenuck.level1 > a {
    height: 100%;
    display: flex;
    flex-direction: column;
}
div#maximenuck246.maximenuckh ul.maximenuck li.maximenuck.level1 > a span.titreck {
margin: auto;
}

bien sur tout cela n'est que du CSS et n'est pas vraiment lié aux fonctionnalités de maximenu, c'est du travail à faire sur le rendu voulu
Joomlack Webmaster and Developer
The following user(s) said Thank You: jmgroud

Please Log in or Create an account to join the conversation.

Last edit: by ced1870.

Fonts et images responsive 16 Jun 2020 14:18 #56851

  • jmgroud
  • jmgroud's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 74
  • Thank you received: 3
Merci CEd, je vais tester ces exemples et reviens ici pour indiquer mes avancées en la matière...
Le peu que je sais est occulté pas le trop que je ne sais pas !

Please Log in or Create an account to join the conversation.

Fonts et images responsive 17 Jun 2020 08:36 #56861

  • jmgroud
  • jmgroud's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 74
  • Thank you received: 3
Question intermédiaire avant de faire qq tests...
D'où vient le nombre "246" indiqué dans "maximenuck246" ?
Y a-t-il un risque que ce nombre change et quand ?
Merci.
Jean-Marie
Le peu que je sais est occulté pas le trop que je ne sais pas !

Please Log in or Create an account to join the conversation.

Fonts et images responsive 17 Jun 2020 08:48 #56862

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23046
  • Karma: 427
  • Thank you received: 2907
c'est l'ID du module
si ça te pose souci tu peux définir un ID dans les options avancées du module, il faudra alors remplacer "maximenuck246" par le nom que tu donneras (attention à donner un ID qui n'existe pas encore dans ton site ! )
Joomlack Webmaster and Developer
The following user(s) said Thank You: jmgroud

Please Log in or Create an account to join the conversation.

Fonts et images responsive 17 Jun 2020 11:59 #56869

  • jmgroud
  • jmgroud's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 74
  • Thank you received: 3
OK super et merci ! Je vais tester cette fonctionnalité de nom d'ID.

En passant... Désolé pour ces questions qui peuvent te paraitre un peu "simples"... Je n'ai jamais été un développeur HTML et CSS et il m'arrive (souvent) de perdre un peu le fil faute de connaissances techniques.
Je suis en plein développement d'un nouveau site et mon client est "TRÈS PINAILLEUR" sur l'apparence de son prochain site... C'est pour moi une très bonne chose sur la forme, mais sur le fond, pas facile de maîtriser toutes les extensions pour lui donner ce qu'il attend.
Je me permets alors d'être aussi un peu (beaucoup ?) PINAILLEUR avec toi sur certains points.
J'espère en tout cas que tous mes tests, mes questions diverses et variées sur tels ou tels points seront plutôt positives pour les fonctionnalités (évolutions / corrections) et bien entendu sur la compréhension de tes outils pour les autres développeurs.

En tout cas bravo pour ce développement de Maximenu-CK... Complet et très pratique !
Je commence en parallèle des tests avec l'interface HikaShop...

Pour "revenir à nos moutons", je vais donc tester les exemples de CSS que tu m'as donnés. Je reviendrai ici pour les résultats ou éventuellement d'autres "petites questions" ;-)

Jean-Marie
Le peu que je sais est occulté pas le trop que je ne sais pas !

Please Log in or Create an account to join the conversation.

Fonts et images responsive 17 Jun 2020 12:03 #56870

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23046
  • Karma: 427
  • Thank you received: 2907

En tout cas bravo pour ce développement de Maximenu-CK... Complet et très pratique !

merci :)

n'hésite pas à donner le résultat de tes tests...
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Fonts et images responsive 17 Jun 2020 14:46 #56880

  • jmgroud
  • jmgroud's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 74
  • Thank you received: 3
Voici les résultats de mes premiers test.
- J'ai indiqué la valeur "maximenuckCOLLPAJ" dans la zone "Module ID" de l'onglet "Paramètres avancés" du module
- J'ai fait un simple "copier/coller" direct des 3 codes proposés ci-dessous en modifiant "maximenuck246" par "maximenuckCOLLPAJ". J'ai intégré cette programmation CSS dans le code complémentaire CSS du template.

Résultats (voir images "Menu1.jpg" et "Menu2.jpg")
- La hauteur de tous les lien de menu sont identiques : Parfait !
- Le texte des options de menu sont centrés verticalement les uns par rapport aux autres (sous condition d'avoir des images de même hauteur) : Exemple 'PHOTOS' Parfait !
- La taille des images diminuent lorsque la largeur de l'option de menu n'est pas suffisante : Parfait !
- Un petit bémol dans le cas où la hauteur des images n'est pas la même. Exemple 'JOAILLERIE'
Le texte reste bien centré mais par rapport à une zone qui commence à partir du bas de l'image.
Les textes sont donc décalés les uns par rapport aux autres.
Solution simple pour éviter ce problème : choisir des images de même taille
- La dernière option 'ACCESSOIRES' n'est pas centrée car pour l'instant c'est un lien de type 'Séparateur'. Comment faire pour que ce centrage fonctionne pour tous les types de liens de menu ?
- En ce qui concerne les textes, c'est une autre histoire... La police n'étant pas responsive, la taille d'écriture ne change pas et si il n'y a pas assez de place pour écrire, les textes se superposent (voir "Menu3.jpg").

Si ce n'est pas possible de changer automatiquement la taille de la police dans Maximenu-CK, je n'ai pas trouvé de solution pour avoir éventuellement un autre module de menu qui serait affiché si la taille de l'écran diminue un peu trop. Je ne peux pas passer par une position de menu dans le template car ce module est affiché dans la partie "Content" par une instruction "loadmodule" insérée dans un article.
Si je créé 2 modules de menu Maximenu-CK avec des tailles de caractères différents, tout devrait se solutionner mais comment faire afficher le premier module pour les "grand écrans" et le deuxième pour les plus petits écrans ? J'image un code PHP (avec l'extension "Sourcerer" par exemple) qui testerait la taille de l'écran et exécuterait le "loadmodule" adéquat... Peut-être une solution plus simple ? Une éventuelle évolution de Maximenu-CK Params pour aller au-delà des "px", "em", "%" ?

Voici le code CSS ajouté
div#maximenuckCOLLPAJ.maximenuckh ul.maximenuck{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

div#maximenuckCOLLPAJ.maximenuckh ul.maximenuck li.maximenuck.level1
{
    width: 10%;
    vertical-align: top; 
}

div#maximenuckCOLLPAJ.maximenuckh ul.maximenuck li.maximenuck.level1 > a {
    height: 100%;
    display: flex;
    flex-direction: column;
}

div#maximenuckCOLLPAJ.maximenuckh ul.maximenuck li.maximenuck.level1 > a span.titreck {
    margin: auto;
}
Jean-Marie
Le peu que je sais est occulté pas le trop que je ne sais pas !
Attachments:

Please Log in or Create an account to join the conversation.

Last edit: by jmgroud.
  • Page:
  • 1
  • 2
Time to create page: 0.274 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 604 guests and one member online