Discussion :

[herveD]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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".

[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.

[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 ?

[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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Édit:

A versifier, sans utiliser l'id drap-suisse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

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>

[NoSmoking]

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[herveD]

Bonjour
Merci à vous.
J'ai utilisé la méthode de @ProgElecT

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

En fait c'est une class que je peux ajouter , modifier le header tag : div, p ...

[herveD]

Bonsoir

Pouvez m'aider à faire la même chose pour le module [recherche]

[ProgElecT]

Salut

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

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

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
div.search {
  position:relative;
  top:-55px;
  margin-left: 8px;
}

Mais c'est du bidouillage.

[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

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