Déplacement d'éléments sur mon site [Résolu/Fermé]

Signaler
Messages postés
657
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
12 mars 2019
-
Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
-
Bonjour,

Je viens d'insérer sur ma page web deux petites icônes de langage. (côté supérieur sur la droite). http://www.ilyasoksuz.com/

Ceux-ci ne reste pas fixe là où j'ai inséré car quand je redimensionne la fenêtre de cette page web, je vois ces deux icônes se déplacer sur toute la page, vers la gauche, vers la droite, un peu n'importe où. D'ailleurs, j'ai testé le site sur d'autres écrans plus large et je me suis aperçu que même sans redimensionner cette fenêtre de page, cela se déplace quand même avec un léger espacement entre.

Je voudrais les tenir fixe sur la page. (ex.: comme les deux petites bannières facebook et twitter dans le bas de page).

Merci de votre aide.









3 réponses

Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
10
T'as essayé float:right?
Messages postés
657
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
12 mars 2019
16
oui
Messages postés
657
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
12 mars 2019
16
.fr { background:url(layout/fr.png) no-repeat left top; width:20px; float:left; height:13px; display:block; margin-top:10px; margin-left:50px; cursor:pointer; }
.fr:hover { background-position:0 -17px; }

.tr { background:url(layout/tr.png) no-repeat left top; width:20px; float:right; height:13px; display:block; margin-top:10px; margin-right:155px; cursor:pointer; }
.tr:hover { background-position:0 -17px; }
Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
10
Je crois qu'il serait mieux de faire:
<ul id="lang">
<li><a href="http://votresite/fr"><img src="images/fr" /></a></li>
<li><a href="http://votresite/tr"><img src="images/tr" /></a></li>
</ul>

Et dans le css
#lang{
margin:0;
list-style-type:none;
float:right;
}
#lang li{
display:inline;
}
Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
10
A mon avis, ce serait mieux de faire des <img /> . Pour la clarté, vous pouvez très bien faire:
img[src="images/fr"] {
opacity:0.8;
}
img[src="images/fr"]:hover {
opacity:1;
}
Messages postés
657
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
12 mars 2019
16
je ne comprend plus rien là. Pouvons nous récapituler tout cela svp ? Sur ce qui doit être dans le css et le html. merci !

Donc, ce que je veux c'est qu'il y ait ces deux petits icônes 'lun a côté de l'autre et centré par rapport à la marge de droite et l'autre image de contact en orange. Avec effet de clarté quand le curseur passe dessus. Et sans déplacement, ça doit rester fixe.
Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
10
D'accord.
Dans le html, vous faites une listes à puces (<ul>) avec deux éléments (<li>): dans le premier vous faite un <img> pour drapeau de france, et dans le 2ème un <img> pour le drapeau de turkie.
Dans le CSS: vous indiquez que la <ul> flotte à droite, et list-style-type:none pour supprimer les puces. dans les 2 <li>, vous faites display:inline ou inline block pour que les 2 drapeaux soient dans la même ligne.
Ainsi, pour la clarté, dans <img>s vous faites opacity:0.8, et quand on passe la souris dessus (:hover), l'opacité devient 1.
Vous pouvez toujours faire quelques effets (comme: transition-duration) pour qu'il y ait des transitions dans le changement d'opacité (renseignez vous sur le sujet).
Messages postés
657
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
12 mars 2019
16
d'accord j'y arrive. j'ai pu aligner les deux icônes et les mettre à droite...

mais maintenant pour la clarté ça ne fonctionne pas. c'est bien ceci ?

#img[src="layout/fr.png"] {
opacity:0.8;
}
#img[src="layout/fr.png"]:hover {
opacity:10;
}
Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
10
Pardon pour le retard.
En fait, faut supprimer les # car là on sélectionne les balises img dans lesquelles src="layout/fr.png". Pour :hover vous faites opacity:1.0 pas 10 :)
Merci.