28182 sujets

CSS et mise en forme, CSS3

Remonter d'un étage une image de langue

Bonjour
J'ai un module qui génère automatiquement le positionnement du site anglais/français.
je dois ajouter une image du drapeau suisse
J'ai ajouté une ligne avec l'id="drap-suisse" mais après je ne sais plus si je mets le id au bon endroit et pour qu'il soit aligné à droite de la dernière langue ?
@+


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

                                            <li class="lang-active">
                <a aria-current="true"  href="https://preprod2.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 id="drap-suisse" href="http://altius-leman.ch/"><img src="/images/suisse_flag.png" alt="Drapeau Suisse" /></a></p></div>
Bonjour
Je reviens vers vous, car je rajoute un champ de recherche.
J'aimerais que tout soit aligné sur la même ligne mais je n'y arrive pas


div class="astroid-column col-lg-4 order-xl-0 order-lg-0 order-md-0 order-sm-0 order-0" id="ac-1091539321232502"><div class="astroid-module-position float-right" id="t2-691539321321578"> <nav class="moduletable "> <a class="btn btn-link jmodedit" href="https://preprod2.altius.fr/index.php?option=com_config&amp;view=modules&amp;id=87&amp;Itemid=124&amp;return=aHR0cHM6Ly9wcmVwcm9kMi5hbHRpdXMuZnIvZnIvaW5zdGFsbGVyL3Byb3RlY3Rpb24taW5kaXZpZHVlbGxlL3Byb3RlY3Rpb24taW5kaXZpZHVlbGxlLWxpZ25lLWRlLXZpZS1jYWJsZS5odG1s" target="_self" aria-describedby="tip-87">
	<span class="icon-edit" aria-hidden="true"></span><span class="visually-hidden">Modifier</span></a>
	<div role="tooltip" id="tip-87">Modifier le module<br>Changer de langue<br>Position: topbar-2</div>
         <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://preprod2.altius.fr/fr/installer/protection-individuelle/protection-individuelle-ligne-de-vie-cable.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 id="drap-suisse" href="http://altius-leman.ch/"><img src="/images/suisse_flag.png" alt="Drapeau Suisse"></a></p></div>
</div> </nav>  <header class="moduletable ">
         <div class="search">
	<form action="/fr/installer/protection-individuelle/protection-individuelle-ligne-de-vie-cable.html" method="post" class="form-group">
		<div class="input-group">
			<!-- <label for="mod-search-searchword94" class="element-invisible">Rechercher</label> --><input name="searchword" id="mod-search-searchword94" maxlength="200" class="inputbox form-control search-query input-medium" type="search" size="10" placeholder="Recherche..."> <div class="input-group-prepend"><button class="button btn btn-primary" onclick="this.form.searchword.focus();">OK</button></div>			<input type="hidden" name="task" value="search">
			<input type="hidden" name="option" value="com_search">
			<input type="hidden" name="Itemid" value="124">
		</div>
	</form>
</div>


upload/1692630588-58614-capturedancrandu2023-08-2117-.png
Modifié par HDcms (21 Aug 2023 - 17:10)
Modérateur
Bonjour/bonsoir,

En regardant ton code, je pense que nous sommes nombreux à se poser la question:

- pourquoi n'ajoute t-il pas ce nouveau lien à liste dédiée aux langages du site ?

<ul aria-labelledby="language_picker_des_87" class="mod-languages__list lang-inline">
  <li class="lang-active">
    <a aria-current="true" href="https://preprod2.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>
  <li>
    <a id="drap-suisse" href="http://altius-leman.ch/">
      <img src="/images/suisse_flag.png" alt="Suisse (? français/italien ou allemand ?)" >
    </a>
  </li>
</ul>


Enfin, sans:
* les feuilles de styles
* l’éventuelle fonction d'un CMS utilisée pour insérer ce nouveau lien

Il est difficile de t'aider avec si peu d'info au départ.

On peut seulement te suggérer de compléter la structure existante , indiquer la langue (à priori pas fr) , voir , de ranger ce nouveau drapeau dans le même répertoire que les autres.

Cdt
Modifié par gcyrillus (25 Aug 2023 - 21:25)
Bonsoir
Je ne suis pas sûr de bien comprendre ce que tu veux dire.
J'ai des extensions différentes dans le cms :
* gestion français/anglais (url interne)
* langue suisse (lien externe autre extension
* autre extension de recherche dans le contenu
Du coup j'ai donné la structure HTML, car je ne vois pas comment faire autrement.
A part avoir donné cet id au drapeau suisse !
@+
Modérateur
HDcms a écrit :
Bonsoir
Je ne suis pas sûr de bien comprendre ce que tu veux dire.
@+

en gros :
a) -pourquoi voit-on apparaitre dans le HTML:
<div class="mod-languages__posttext posttext"><p><a id="drap-suisse" href="http://altius-leman.ch/"><img src="/images/suisse_flag.png" alt="Drapeau Suisse" /></a></p></div>

au lieu de voir un li ajouté à la liste.

b) - Pour la mise en forme, impossible de te proposer une correction ou une raison de l'affichage sans avoir le minimum du CSS impliqué

cdt
Bonne soirée Smiley cligne

edit, si tu utilises un CMS, je ne sais pas duquel il s'agit(il y en a tellement), pour l'extension c'est encore plus flou Smiley cligne
Modifié par gcyrillus (25 Aug 2023 - 21:27)
Bonjour
Toujours coincé.
Les bouts de code des éléments sont générés automatiquement par le cms joomla dans des modules différents (mais effectivement peu importe le cms.
Je peux juste ajouter à certains endroits côté back-offfice un id comme id="drap-suisse"
Chaque module a son propre css.
Ne peux-t-on pas réarranger cet HTML avec un code CSS approprié ? ou c'est treop compliqué ?
Salut,

Tu dois pouvoir réintégrer le lien dans le ul en javascript avec un truc du genre (je n'ai pas tester j'ai repris/adapté un truc que j'avais fais il y a quelques temps): 

let liItem=document.createElement('li'); 
let drapeauSuisseAnchor = document.getElementById("drap-suisse");
liItem.appendChild(drapeauSuisseAnchor);
document.querySelectorAll('ul[aria-labelledby="language_picker_des_87"]')[0].appendChild(liItem);
En gros tu crées un li, tu récupères le lien du drapeau suisse, tu le colles dans le li et tu colles le li dans le ul qui contient les autres drapeaux.
Modifié par Mathieuu (29 Aug 2023 - 16:58)
Bonjour
Je reviens vers vous car le drapeau suisse est bien remonté avec le code

a[href^="http://altius-leman.ch/"]{
  position: relative;
  top: -24px;
  left: 100px
}


Néanmoins j'aurai besoin de faire la même chose avec le champ recherche en le mettant à droite des drapeaux pour avoir une entête toute petite sur une seule ligne
Modifié par HDcms (01 Sep 2023 - 08:55)
Bonjour
Bon je reviens vers vous pour faire la même chose avec le champ recherche en le mettant à droite des drapeaux pour avoir une entête toute petite sur une seule ligne
@+
Prévenir un modérateur
Répondre au sujet
Aller à