Diminition et repositionnement élément de menu

Bonjour
Tout fonctionnait bien jusqu'à ce que la personne a décidée de diminuer la largeur de 1 400 à 1140px. Je me retrouve avec 2 problèmes que je n'ai pas résolut en testant avec l'inspecteur

1/ retour à la ligne du menu
Comment diminuer l'espace pris à gauche et à droite. j'ai essayé avec margin et padding sur #astroid-header > div > div.header-left-section.d-flex.justify-content-start.flex-lg-grow-1 > div.align-self-center.px-2.d-none.d-lg-block > ul > li.nav-item.nav-item-id-115.nav-item-level-1.nav-item-deeper.nav-item-parent.has-megamenu.nav-item-dropdown

2/ alignement horizontale du drapeau suisse sous les autres
J'avai déjà galéré et bidouillé là-dessus

https://www.altius.fr/fr/

Modifié par HDcms (12 Feb 2024 - 13:11)

Bonjour,

1) Mais comment peut-on arriver à styler une page avec un html pareil ? C'est une vraie performance.

2) En 2024, on choisit le svg pour les images des drapeaux. Ça se trouve très facilement. Parce que là, tes drapeaux sont carrément moches.

3) Le drapeau français est aux proportions 2:3 (c'est bien, ce sont les proportions officielles). Le drapeau suisse est aux proportions 1:1 (c'est bien, ce sont les proportions officielles). Le drapeau du royaume uni est aux proportions 2:3 (ce ne sont pas les proportions officielles qui sont 1:2).

Soit tu mets tout en proportions 2:3, ce qui facilite le css ensuite (et on va dire que c'est plus ou moins accepté qu'on fasse comme ça même si c'est en fait carrément interdit pour pas mal de drapeaux de changer les proportions), soit tu mets tout aux proportions officielles. Mais on ne fait un mixte des deux.

4) Enfin, pour répondre à ta deuxième question, il faut modifier les valeurs des propriétés left et top de la balise <a> qui entoure le drapeau suisse. Actuellement, tu as left:100px à remplacer par left:-7px. Et tu as top:-28px à remplacer par top:0. Mais bon, c'est juste une rustine. Il vaudrait mieux que le html du drapeau suisse soit inséré dans la page de la même manière que le drapeau français et le drapeau du royaume uni.

5) Pour la question 1, par contre, je n'ai pas bien compris ce que tu voulais. Peux-tu préciser ?

Amicalement,

Bonjour
je sais c'est le résultat de la reprise d'un ancien site avec un gros css + un page builder qui génère ce qu'il veut.
Je fais au mieux.
Je vois pour les drapeaux.

1/ Plus simple, je voudrais tout le menu sur la même ligne et avec la modification de la responsable, j'ai le dernier élément de menu qui est passé à la ligne. D'ou ma recherche de diminuer l'espace horizontal à droite et à gauche de chaque élément de menu, car je ne vois pas d'autres marges ailleurs

Bonjour,

Tu pourras te vanter de m'avoir convaincu définitivement de ne jamais utiliser de CMS (ou un page builder ou n'importe quel autre truc du même genre).

Alors, tu peux faire 3 choses (les sélecteurs devront peut-être être complétés pour qu'ils soient assez forts pour que les modifications s'appliquent vraiment) :

1) tu passes ton header en position:relative et tu lui mets un padding-right de 3rem. L'idée est qu'on va ensuite positionner en absolute les drapeaux à la droite de ce header, et que ces 3rem de padding à droite vont nous assurer qu'il y aura assez de place pour afficher les drapeaux sans qu'ils se retrouvent sur les éléments de ton menu.

.astroid-header-section {
	padding: 15px 3rem 15px 0;
	position: relative;
}

2) tu réduits le padding des éléments <a> du menu à 0.5rem afin qu'ils prennent un peu moins de place. Par exemple :

.astroid-header-section .nav-link {
	padding:0.5rem;
}

À ce stade, ça ne suffit toujours pas, mais on y est presque.

3) tu passes le conteneur qui contient les drapeaux en position:absolute et tu le positionnes en haut à droite du header. Par exemple :

.astroid-header-section .header-right-section {
	position: absolute;
	top: 0;
	right: 0;
}

À ce stade, tu devrais avoir assez de place pour afficher tous les éléments de ton menu sur une seule ligne, à condition que la fenêtre de l'internaute soit assez large bien évidemment.

Ensuite, il suffira de positionner les drapeaux au bon endroit (dans l'espace libre de 3rem se trouvant à la droite du header) à coup de position:absolute et de top et right sur les balises <a> qui les contiennent et/ou sur les éléments qui les contiennent. Il faudra sans doute aussi supprimer des margin et padding qui trainent sur ces éléments ou ceux qui les contiennent (à voir dans le détail, c'est un tel bazar que je n'ai pas regardé comment faire exactement, mais j'ai vu que c'était possible).

Eventuellement, on peut améliorer la solution en espaçant les éléments du menu de plus de 0.5rem via un flex approprié sur leur conteneur, ou en mettant plus que 0.5rem de padding (à voir).

Amicalement,
Modifié par parsimonhi (12 Feb 2024 - 17:49)

Bonjour,

Pour positionner les drapeaux, le code ci-dessous pourrait suffire (avec éventuellement renforcement des sélecteurs si nécessaire). Au passage, on règle le problème du drapeau suisse qui se baladait n'importe où.

.astroid-header-section a[href="https://www.altius.fr/fr/le-groupe-altius.html"],
.astroid-header-section a[href="/en/"],
.astroid-header-section a[href="http://altius-leman.ch/"] {
    position: absolute;
    right: 0;
    width: 3rem;
    height: 2rem;
    display: flex;
}

.astroid-header-section a[href="https://www.altius.fr/fr/le-groupe-altius.html"] {
	top: 0;
}
.astroid-header-section a[href="/en/"] {
    top: 2rem;
}
.astroid-header-section a[href="http://altius-leman.ch/"] {
    top: 4rem;
}

.astroid-header-section a[href="https://www.altius.fr/fr/le-groupe-altius.html"],
.astroid-header-section a[href="/en/"] img,
.astroid-header-section a[href="http://altius-leman.ch/"] img {
    margin: auto;
    height: 1rem;
    width: auto;
}

Il faudrait aussi rajouter une min-height de 6rem sur le header. Le code ajouté concernant le header devient :

.astroid-header-section {
	padding: 15px 3rem 15px 0;
	position: relative;
	min-height: 6rem;
}

Amicalement,
Modifié par parsimonhi (12 Feb 2024 - 18:22)

Bonjour
Merci pour avoir pris ce temps.

Je te comprends, mais moi qui ait débuté il y a longtemps en faisant de l'HTML & CSS, je suis soulagé de ne plus en faire la maintenance et l'évolution avec tout ce qui est arrivé pour gérer tout type d'écran. Mais là on est vraiment dans un cas extrême où j'ai dû faire au mieux avec de multiples contraintes et changement d'avis entre des personnes.
C'est encore le cas, ou la personne m'a demandée de remettre comme c'était avant qu'elle fasse la modification qu'elle avait fait et qui faisait ces effets de bords.
Bonne journée

Bonjour,

HDcms a écrit :
Mais là on est vraiment dans un cas extrême où j'ai dû faire au mieux avec de multiples contraintes et changement d'avis entre des personnes.

On est tous passé par là !

Si je comprends bien, le sujet est résolu puisque finalement, il n'y a plus de modifications à faire ?

Amicalement,

Re
En quelques sorte mais j'attends, j'ai déjà connu des revirements