Aligner des éléments sur la même ligne

Version imprimable

Bonjour
J'ai un module qui génère automatiquement le positionnement du site anglais/français.
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 ?
J'aimerais que tout soit aligné sur la même ligne, mais je n'y arrive pas
En haut à droite sur preprod2.altius.fr/fr/installer.html (merci de ne pas mettre de lien, on ne sais jamais)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>

23/08/2023, 23h01
mathieu

le dernier drapeau est dans une balise "div.mod-languages__posttext.posttext". et c'est certainement cette balise qui fait le retour à la ligne.
essayez de mettre ce drapeau avec les 2 autres dans la balise "ul".
24/08/2023, 10h05
herveD

Bonjour
Désolé, mais j'ai toujours le même problème, je ne peux pas toucher à la génération de ce type de code par le cms.
Ce que je peux dès fois, c'est mettre dans un champ du backoffice une class ou un id comme je l'ai fais.
28/08/2023, 08h29
herveD

Bonjour
Toujours coincé.
Les bouts de code des éléments sont générés automatiquement par le cms dans des modules différents.
Ne peux-ton pas réarranger cet HTML avec du CSS ?
28/08/2023, 09h47
ProgElecT
Salut

Comme signaler par mathieu
Il faudrait attribuer l'id à la DIV <div class="mod-languages__posttext posttext">, donc
<div class="mod-languages__posttext posttext" id="drap-suisse">.

Puis ajouter un CSS visant cet id,
Code:

1 2 3 4 5 #drap-suisse{ position: relative; top: -24px; left: 100px }
Édit:

A versifier, sans utiliser l'id drap-suisse
Code:

1 2 3 4 5 a[href^="http://altius-leman.ch/"]{ position: relative; top: -24px; left: 100px }
Je ne sais pas si j'ai bien compris,

Citation:

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

donc, pourquoi ne t'es-il pas possible d'ajouter la/les ligne() à la suite du drapeau anglais ?

Si tu as ajouté cette ligne, penser a ajouter title="Suisse" dans la balise <img>
29/08/2023, 08h23
NoSmoking
Bonjour,

Citation:

Envoyé par herveD

Ne peux-ton pas réarranger cet HTML avec du CSS ?

le mieux serait quand même d'intégrer cette dernière option dans le même conteneur que les autres.

Cependant tu pourrais t'en sortir avec le CSS suivant :
Code:

1 2 3 .mod-languages { display: flex; }
et en supprimant l'élément <p>, parfaitement inutile, dans ton ajout, qui engendre des décalages.
Code:

1 2 3 <div class="mod-languages__posttext posttext"> <a id="drap-suisse" href="http://altius-leman.ch/"><img src="/images/suisse_flag.png" alt="Drapeau Suisse"></a> </div>
29/08/2023, 11h55
herveD

1 pièce(s) jointe(s)
Bonjour
Merci à vous.
J'ai utilisé la méthode de @ProgElecT
Code:

1 2 3 4 5 a[href^="http://altius-leman.ch/"]{ position: relative; top: -24px; left: 100px }
Je n'ai pas pu ajouter l'id comme demandé (cf image ci dessous) ; J'avai essayé de mon côté
Code:

1 2 3 4 5 .mod-languages__posttext{ /* position: relative; top: -24px; left: 100px*/ }
mais j'aime moins bien

J'envoie l'image de la partie que je peux "modifier" dans le module "langue" ou ici le module "recherche" de joomla
Pièce jointe 643195
En fait c'est une class que je peux ajouter , modifier le header tag : div, p ...
31/08/2023, 19h03
herveD

Bonsoir

Pouvez m'aider à faire la même chose pour le module [recherche]
31/08/2023, 21h49
ProgElecT
Salut

Citation:

Envoyé par herveD

... à faire la même chose pour le module [recherche]

Mettre l'input et le bouton en dessous des drapeaux ?
Code:

1 2 3 4 5 div.search { position:relative; top:-55px; margin-left: 8px; }
Mais c'est du bidouillage.
01/09/2023, 08h55
herveD

Bonjour
Merci.
Non c'était plutôt à droite des drapeaux, pour avoir une entête toute petite, mais bon c'est déjà mieux.
Je ne trouve pas que c'est du bidouillage si je n'ai pas le choix de la génération du code HTML du cms
06/09/2023, 15h38
herveD

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
@+