Discussion :

[cheboy]

Bonjour.

J'utilise un formulaire "select" qui affiche un formulaire de sélection de langue avec le drapeau de la langue. Le souci c'est que sur device réduit (tablette ou téléphone), il s'affiche sans s'adapter à la taille du Device (je parle là du Responsive Design). Je pouvais utiliser les @media query pour créer la version responsive Design. Mais le souci, c'est que je souhaiterais seulement afficher le Drapeau (soit la classe CSS switcher a img) au niveau des petits devices comme les tablettes et les appareils mobiles (téléphone) comme formulaire de sélection de sorte à ce que quand on sélectionne le drapeau et non le drapeau + le nom de la langue comme sur Ordinateur, on puisse changer sa langue normalement.

Code HTML :

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

1
2
3
4
5
6
7
<div class="switcher notranslate">
<div class="selected">
<a href="#" onclick="return false;"><img src="fr.png" height="24" width="24" alt="fr" /> French</a>
</div>
<div class="option">
<a href="#" onclick="doGTranslate('fr|en');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="English" class="nturl"><img data-gt-lazy-src="en.png" height="24" width="24" alt="en" /> English</a><a href="#" onclick="doGTranslate('fr|fr');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="French" class="nturl selected"><img data-gt-lazy-src="fr.png" height="24" width="24" alt="fr" /> French</a></div>
</div>

Code CSS :

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
.switcher {
    font-family: Arial;
    font-size: 12pt;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    width: 173px;
    line-height: 17px;
}
 
.switcher a img {
    vertical-align: middle;
    display: inline;
    border: 0;
    padding: 0;
    margin: 0;
    opacity: 0.8;
}
 
.switcher .selected {
    background: #fff linear-gradient(
180deg, #efefef 0%, #fff 70%);
    position: relative;
    z-index: 9999;
}

Comment donc modifier mon Code CSS pour faire du Responsive Design en permettant d'afficher SEULEMENT le Drapeau de la langue comme liste de sélection sur les petits devices (tablettes et téléphones mobile) ???

Merci de m'aider s'il vous plaît

[jreaux62]

Bonjour,

1- mettre les textes dans <span> :

Code html :

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

<a href="#" ...><img ... /><span> French</span></a>

2- CSS :

Code css :

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

1
2
3
@media screen and (max-width:767px) {
	.switcher a span{ display:none; }
}

[cheboy]

Merci pou la réponse. Mais le display: none cache juste les Noms de la langue mais ne repositionne ou ne redimensionnent pas le formulaire de sélection lui-même. Vous pouvez voir comment ça s'affiche après que j'ai procédé comme vous venez de me l'indiquer:



Comment donc redimensionner correctement tout le formulaire de sélection de sorte à ce qu'il occupe seulement les dimensions du Drapeau ???

Merci de m'aider.

[jreaux62]

Cherche un peu...

[cheboy]

Cherche un peu...

Voici ce que j'ai fait:

Code :

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

1
2
3
4
5
@media screen and (max-width:767px) {
  .switcher a span{ display:none; }
  .switcher { width:56px; }
  .switcher .selected a { padding: 14px 4px; line-height: 24px; }
}

Et le résultat n'est pas mal sauf que je souhaite le détacher de l'icône du formulaire de recherche qui est à l'extrémité droite et le positionner au centre car l'affichage en @media screen donne ce qui suit:



Comment donc le détacher de l'icône du formulaire de recherche situé à l'extrémité droite et le positionner au centre puisqu'il est collé à cette icône de recherche et ne lui permet de s'afficher correctement ???

Merci de m'aider s'il vous plaît.

[cheboy]

Je viens de résoudre cela en ajoutant simplement un position: relative; margin-right: 20px; à .switcher.

Merci.