Déplacement d'éléments sur mon site
Résolu/Fermé
ilyasoksuz
Messages postés
643
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
2 juin 2021
-
29 déc. 2012 à 04:02
zakariadza Messages postés 17 Date d'inscription vendredi 20 avril 2012 Statut Membre Dernière intervention 3 janvier 2013 - 31 déc. 2012 à 14:59
zakariadza Messages postés 17 Date d'inscription vendredi 20 avril 2012 Statut Membre Dernière intervention 3 janvier 2013 - 31 déc. 2012 à 14:59
A voir également:
- Déplacement d'éléments sur mon site
- Site de telechargement - Guide
- Site inaccessible - Guide
- Site de vente entre particulier - Guide
- Photoshop elements gratuit - Télécharger - Retouche d'image
- Site partage photo - Guide
3 réponses
zakariadza
Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
10
29 déc. 2012 à 21:03
29 déc. 2012 à 21:03
T'as essayé float:right?
ilyasoksuz
Messages postés
643
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
2 juin 2021
18
29 déc. 2012 à 21:49
29 déc. 2012 à 21:49
.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; }
zakariadza
Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
10
30 déc. 2012 à 10:42
30 déc. 2012 à 10:42
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;
}
ilyasoksuz
Messages postés
643
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
2 juin 2021
18
30 déc. 2012 à 16:20
30 déc. 2012 à 16:20
je parle ici de 2 icônes en PNG.
Quand on fait passer le curseur de la souris dessus, ça doit faire un effet de clarté au niveau des icônes... c'est bien le cas actuellement.
Quand on fait passer le curseur de la souris dessus, ça doit faire un effet de clarté au niveau des icônes... c'est bien le cas actuellement.
zakariadza
Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
10
30 déc. 2012 à 17:51
30 déc. 2012 à 17:51
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;
}
img[src="images/fr"] {
opacity:0.8;
}
img[src="images/fr"]:hover {
opacity:1;
}
ilyasoksuz
Messages postés
643
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
2 juin 2021
18
30 déc. 2012 à 18:34
30 déc. 2012 à 18:34
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.
zakariadza
Messages postés
17
Date d'inscription
vendredi 20 avril 2012
Statut
Membre
Dernière intervention
3 janvier 2013
10
30 déc. 2012 à 21:00
30 déc. 2012 à 21:00
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).
ilyasoksuz
Messages postés
643
Date d'inscription
mercredi 31 décembre 2008
Statut
Membre
Dernière intervention
2 juin 2021
18
30 déc. 2012 à 21:17
30 déc. 2012 à 21:17
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;
}
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;
}
29 déc. 2012 à 21:48