Déplacement d'éléments sur mon site
Résolu
ilyasoksuz
Messages postés
643
Date d'inscription
Statut
Membre
Dernière intervention
-
zakariadza Messages postés 17 Date d'inscription Statut Membre Dernière intervention -
zakariadza Messages postés 17 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Déplacement d'éléments sur mon site
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
3 réponses
T'as essayé float:right?
ilyasoksuz
Messages postés
643
Date d'inscription
Statut
Membre
Dernière intervention
18
oui
.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; }
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;
}
<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;
}
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.
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.
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).
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).