Fonts et images responsive

Fonts et images responsive was created by jmgroud

Posted 3 years 10 months ago #56832
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 : www.creativejuiz.fr/blog/veille-technolo...rgeur-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 !

Last Edit:3 years 10 months ago by jmgroud
Last edit: 3 years 10 months ago by jmgroud. Reason: Corrections de fautes de frappe

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

Replied by ced1870 on topic Fonts et images responsive

Posted 3 years 10 months ago #56835
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

by ced1870

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

Replied by jmgroud on topic Fonts et images responsive

Posted 3 years 10 months ago #56838
Voici le lien de test.
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 !

Last Edit:3 years 10 months ago by jmgroud
Last edit: 3 years 10 months ago by jmgroud. Reason: Modification de l'adresse URL

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

Replied by ced1870 on topic Fonts et images responsive

Posted 3 years 10 months ago #56843
tu pourrais jouer avec Flexbox en CSS, par exemple :
Code:
div#maximenuck246.maximenuckh ul.maximenuck{ display: flex !important; justify-content: center; }
et pour autoriser le retour à la ligne
Code:
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
Code:
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

Last Edit:3 years 10 months ago by ced1870
Last edit: 3 years 10 months ago by ced1870.
The following user(s) said Thank You: jmgroud

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

Replied by jmgroud on topic Fonts et images responsive

Posted 3 years 10 months ago #56851
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 !

by jmgroud

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

Replied by jmgroud on topic Fonts et images responsive

Posted 3 years 10 months ago #56861
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 !

by jmgroud

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

Time to create page: 0.749 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 675 guests and no members online