28182 sujets

CSS et mise en forme, CSS3

Ajout d'un bouton contact

Bonjour
Je cherche fréquemment à mettre en valeur un bouton contact dans le menu principal sachant qu'il est déjà bien rempli, doit être responsive mais je suis contraint par le code HTML généré par une extension du joomla.
J'avai déjà galéré pour avoir le résultat bancal que l'on voit sur la page https://www.altius.fr/fr/
Ajout du bouton "Contact" (écrit en blanc sur fond fuchsia) dans le menu d'Altius, après "groupe Altius"

J'ai 3 propositions graphiques (cf image) mais je pense que le 2 serait mieux ? Comment faire ? 
Groupe Altius                                                <i class="fas fa-chevron-down nav-item-caret"></i>
                  </span>
   </a>
<!--menu link ends--><div style="width: 250px; max-width: 1376px; left: -63.483px; top: 69.7834px; display: none;" class="megamenu-container nav-submenu-container nav-item-level-1"><ul class="nav-submenu"><li data-position="right" class="nav-item-submenu nav-item-id-523 nav-item-level-2"><!--menu link starts-->
<a href="/fr/le-groupe-altius/nous-connaitre.html" title="Nous connaître" class=" nav-link-item-id-523 item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nous connaître                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-584 nav-item-level-2 nav-item-deeper nav-item-parent nav-item-dropdown"><!--menu link starts-->
<a href="/fr/le-groupe-altius/implantations.html" title="Nos implantations" class=" nav-link-item-id-584 megamenu-item-link item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nos implantations                                    <i class="fas fa-chevron-right nav-item-caret"></i>
         </span>
   </a>
<!--menu link ends--><ul class="nav-submenu"><li data-position="right" class="nav-item-submenu nav-item-id-517 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/implantations/altius-sud-ouest.html" title="Altius Sud Ouest" class=" nav-link-item-id-517 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Altius Sud Ouest                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-618 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/implantations/altius-bourgogne-franche-comte.html" title="Altius Bourgogne Franche-Comté" class=" nav-link-item-id-618 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Altius Bourgogne Franche-Comté                              </span>
   </a>
<!--menu link ends--></li></ul></li><li data-position="right" class="nav-item-submenu nav-item-id-540 nav-item-level-2"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rse.html" title="Nos engagements RSE" class=" nav-link-item-id-540 item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nos engagements RSE                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-436 nav-item-level-2 nav-item-deeper nav-item-parent nav-item-dropdown"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous.html" title="Recrutement" class=" nav-link-item-id-436 megamenu-item-link item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nos offres d'emploi                                    <i class="fas fa-chevron-right nav-item-caret"></i>
         </span>
   </a>
<!--menu link ends--><ul class="nav-submenu"><li data-position="right" class="nav-item-submenu nav-item-id-624 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/chef-chantier-cordiste.html" title="Offre d'emploi : chef(fe) de chantier cordiste" class=" nav-link-item-id-624 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Chef(fe) de chantier cordiste                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-623 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/charge-affaires.html" title="Offre d'emploi : chargé(e) d'affaires travaux en hauteur" class=" nav-link-item-id-623 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Chargé(e) d'affaires                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-622 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/ingenieur-be.html" title="Offre d'emploi : ingénieur(e) Bureau d'Études" class=" nav-link-item-id-622 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Ingénieur(e) Bureau d'Études                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-625 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/charge-etude-chiffrage.html" title="Offre d'emploi : économiste de la construction – chargé(e) d’étude chiffrage" class=" nav-link-item-id-625 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Chargé(e) d’étude chiffrage                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-626 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/formateur-travaux-hauteur.html" title="Offre d'emploi : formateur(trice) travaux en hauteur" class=" nav-link-item-id-626 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Formateur(trice)                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-627 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/charge-webmarketing-rse.html" title="Offre d'emploi : chargé(e) de webmarketing et RSE" class=" nav-link-item-id-627 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Chargé(e) de webmarketing et RSE                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-628 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/commercial-travaux-hauteur.html" title="Offre d'emploi : commercial(e) EPI - travaux en hauteur" class=" nav-link-item-id-628 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Commercial(e) EPI - Plucéo                              </span>
   </a>
<!--menu link ends--></li></ul></li><li data-position="right" class="nav-item-submenu nav-item-id-164 nav-item-level-2"><!--menu link starts-->
<a href="/fr/le-groupe-altius/actualites.html" title="Actus d'Altius et sur le travail en hauteur" class=" nav-link-item-id-164 item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Actualités                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-166 nav-item-level-2"><!--menu link starts-->
<a href="/fr/le-groupe-altius/contact.html" title="Nous contacter" class=" nav-link-item-id-166 item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nous contacter                              </span>
   </a>
<!--menu link ends--></li></ul></div></li></ul></div>      </div>
               <div></div>
                           <div class="header-right-section d-flex justify-content-end">
                                       <div class="header-right-block d-none d-lg-block align-self-center ms-4">
                  <div class="header-block-item d-flex justify-content-end align-items-center"><div class="langues-position moduletable ">
        <div class="mod-languages">
    <p class="visually-hidden" id="language_picker_des_87">Sélectionnez votre langue</p>
 
 
    <ul aria-labelledby="language_picker_des_87" class="mod-languages__list lang-inline">
 
                                            <li class="lang-active">
                <a aria-current="true" href="https://www.altius.fr/fr/">
                                                                        <img title="Français" src="/media/mod_languages/images/fr_fr.gif" alt="Français">                                                            </a>
            </li>
                                        <li>
                <a href="/en/">
                                                                        <img title="English (UK)" src="/media/mod_languages/images/en.gif" alt="English (UK)">                                                            </a>
            </li>
                </ul>
 
    <div class="mod-languages__posttext posttext"><p><a href="http://altius-leman.ch/"><img src="/images/suisse_flag.png" alt="Drapeau Suisse">


upload/1730804840-58614-image.png
Modifié par HDcms (05 Nov 2024 - 12:07)
Modérateur
Bonjour,

La deux semble aussi la meilleure option visuelle.

Pour mettre en colonne ces liens, tu pourrait partir de la boite qui les contient tous .mod-languages et en faire une grille.
.mod-languages {
display:grid;
justify-content:center;
}


Devant la multitude de fichier CSS et de styles en lignes, la suite , un peu brutale est de mettre hors jeux les conteneurs imbriqués contenus jusqu'a mettre virtuellement les liens en enfants direct de .mod-languages avec un display:contents , inutile ici de se prendre la tête avec un subgrid.

Enfin, quelques réglages et reset des marges et des alignements, testé depuis l'inspecteur d'un navigateur, ces quelques règles CSS semblent faire le job :
.mod-languages {
  display: grid;
  place-content: center;
  gap:.5em;
}
.mod-languages__list.lang-inline,
.mod-languages__list.lang-inline li,
.mod-languages__posttext.posttext,
.mod-languages__posttext.posttext p {
  display: contents!important;
}


.mod-languages a,
.mod-languages img {
  margin:0;
  padding:0!important;
  position: static;
}
.mod-languages img {
  display: block!important;
  position: static;
  width:1.5em;
  height:1em;
  object-fit: cover;
}


Dans le code source on voit quelques erreurs avec tes SVG :
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->

Cette balise n'a rien à faire là, Le SVG est dans un document HTML. Le commentaire, lui est valide Smiley cligne

Bon dev


edit: je ne sais pas si c'est voulu, dans ton source, on trouve bien les deux langues FR et en-GB 
	<link href="https://www.altius.fr/fr/" rel="canonical">
	<link href="https://www.altius.fr/en/" rel="alternate" hreflang="en-GB">

mais pas la version fr-CH alternative.
Modifié par gcyrillus (05 Nov 2024 - 14:48)
Bonjour
Merci pour cette aide.
Comme je ne peux pas faire cela sur un site de production et que je n'ai pas envie de refaire toute l'install d'une copie, j'essaie à partir de l'outil de test en ligne. Super Smiley smile
Mais je n'arrive pas à partager l'url pour partager les modifs! Est-ce possible et sinon comment faire ?
Oui le site suisse est un un autre site sur un autre domaine, ce qui explique le bidouillage dans le code HTML du module joomla

upload/1730904088-58614-capturedancrandu2024-11-0615-.png

J'ai un peu de mal avec la méthodologie car la plupart du code HTML & CSS est généré par joomla. IL faut donc que je simule le même code HTML (par exemple ici en ajoutant le bouton "CONTACT" à côté du "Groupe Altius" ? puis modifier le css existant ou plutôt en le surchargrant pour éviter les effets de bords que j'ai déjà fait

Il n'y a pas les icones car elles sont dans un autre css; C'est ça? et j'ai un txt au dessus de l'élément drapeau suisse !

Sinon j'ai peur des décalages selon les écrans. Finalement si je pouvais réussir l'option 1 se serait top


<li data-position="right" class="nav-item nav-item-id-165 nav-item-level-1 nav-item-current nav-item-active nav-item-deeper nav-item-parent has-megamenu nav-item-dropdown"><!--menu link starts-->
<a href="/fr/le-groupe-altius.html" title="Qui sommes nous ?" class=" nav-link-item-id-165 nav-link active megamenu-item-link item-link-component item-level-1" data-drop-action="hover">
   <span class="nav-title">
                                          Groupe Altius                                                <i class="fas fa-chevron-down nav-item-caret"></i>
                  </span>
   </a>
  
  
<li data-position="right" class="nav-item nav-item-id-165 nav-item-level-1 nav-item-current nav-item-active nav-item-deeper nav-item-parent has-megamenu nav-item-dropdown"><!--menu link starts-->
<a href="/fr/le-groupe-altius.html" title="Qui sommes nous ?" class=" nav-link-item-id-165 nav-link active megamenu-item-link item-link-component item-level-1" data-drop-action="hover">
   <span class="nav-title">
                                          CONTACT                                                <i class="fas fa-chevron-down nav-item-caret"></i>
                  </span>
   </a>
  
        <div class="mod-languages">
    <p class="visually-hidden" id="language_picker_des_87">Sélectionnez votre langue</p>


    <ul aria-labelledby="language_picker_des_87" class="mod-languages__list lang-inline">

                                            <li class="lang-active">
                <a aria-current="true" href="https://www.altius.fr/fr/le-groupe-altius.html">
                                                                        <img title="Français" src="/media/mod_languages/images/fr_fr.gif" alt="Français">                                                            </a>
            </li>
                                        <li>
                <a href="/en/">
                                                                        <img title="English (UK)" src="/media/mod_languages/images/en.gif" alt="English (UK)">                                                            </a>
            </li>
                </ul>

    <div class="mod-languages__posttext posttext"><p><a href="http://altius-leman.ch/"><img src="/images/suisse_flag.png" alt="Drapeau Suisse"></a></p></div>
</div>
</div></div>

Modifié par HDcms (06 Nov 2024 - 16:07)
Modérateur
Bonsoir,

Pour le CSS, il vaut probablement mieux pour le moment d'ajouter une dernière feuille de styles où y ajouter les surcharges pour les retrouvé facilement. Cela éviteras de glisser une typo quelque part ailleurs.

Pour l'option 1 , cela semble bien plus complexe et nécessitera de revoir la structure HTML et tu ne semble pas avoir franchement la main dessus.
De quoi s'agit-il ? d'un select, d'un élément détails ou autre chose ?

Je ne serais pas en mesure de t'aider pour cette option, je ne connais pas du tout le CMS Joomla et je n'ai aucune idée ou l'on peut intervenir pour modifier les styles et HTML généré par le CMS et / ou un plugin , du thème et de la version.

Pour ce qui est de ton site en ligne, il sera moins dangereux d'ajouter ces quelques règles CSS que d'essayer de toucher à ce qui génère ton HTML.
J'imagine que la partie multilingue est une fonctionnalité du CMS ou de l'un de ses plugins. Tu obtiendrais surement une aide plus efficace par des utilisateurs de ce CMS, il y a surement un forum dédié.

cdt

edit, une quatrieme option 
.mod-languages {
  width:4.25em;
}
.mod-languages img {
  position:fixed;
  top:0;
  padding:0;
  max-height:.875em;
  margin-top:0;
}
.mod-languages *:not(img) {
  display:contents;
  color:transparent
}

upload/1730925661-2857-altiusheader.png

qui éliminerait le soucis d'alignement Smiley smile

Manquerait le title sur l'icone Suisse, pour la cohérence. Smiley cligne
Modifié par gcyrillus (06 Nov 2024 - 21:47)
Bonjour
Merci pour ce retour. Je vais reprendre ce dossier la semaine prochaine en essayant peut-être autre chose
Bonjour
Bon je reprends ce dossier. Je viens aussi de passer du temps sur les options 1 & 2 sans succès.
Je vais donc chercher l'option 3, éventuellement ta 4ème option si plus facile à mettre en œuvre même si non centré par rapport au menu principal

Actuellement sans accès au thème pour tester les css, je me demande comment copier/coller ces bouts de css dans une sorte de console sur Firefox ou Brave ?

Enfin vu mon retard, je me demande s'il existe des tips, bibliothèque pour faire des choses comme l'encadre d'un bouton CONTACT dans le menu principal ?

j'ai mis un identifiant dans le cms pour accéder à cet élément mais je peux le mettre ailleurs si besoin
upload/1732268345-58614-menuavecbtncontactuniquement.png
upload/1732268271-58614-param.cmsboutoncontact.png
Modifié par HDcms (22 Nov 2024 - 10:39)
Modérateur
Bonsoir,

Pour modifier, ajouter du CSS ou Html dans firefox, c'est f12 , screen exemple:
upload/1732316107-2857-altiusexp.jpg

cordialement
Bonjour
Je continue mes tests en temps partagé ce qui me fait exploser mon temps.
Du coup d'ici vendredi j'aurai besoin pour mettre mon code css pour le bouton c'est de faire de LA place pour ne pas avoir 2 lignes !!

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

Qu'est-il possible de faire pour diminuer l'espace entre les liens de menu, sachant que je viens de m'apercevoir c'est qu'il n'apparait des "chevrons" (truc pour faire apparaitre le sous-menu) uniquement sur Firefox et pas sur Brave ...
J'ai l'impression que je suis contraint avec le logo et le module langue que je ne peux pas déplacer sur les côtés !
Prévenir un modérateur
Répondre au sujet
Aller à