Submitted by Zeck on
Bonjour,
Cela fais plusieurs jours que je cherche et je commence à sécher.. La réponse ne doit pas être dur mais pour le coup je trouve pas ...
Voilà dans mon footer j'ai 3 icônes et j'aimerais qu'elle soit aligner HORIZONTALEMENT mais elles sont en genre de diagonale (Voir photo)
Je vais vous mettre le HTML et le css ...
HTML
<div id="rs">
<div class="rs">Rejoignez-nous !</div>
<a target="_blank" href="https://www.facebook.com/RiveCreative">
<div id="fb"></div></a>
<a target="_blank" href="http://instagram.com/rivecreative">
<div id="insta"></div></a>
<a target="_blank" href="https://www.linkedin.com/company/rive-créative">
<div id="pinter"></div></a>
</div></div>Et le CSS
#rs {
padding-top:5px;
width:280px;
height:150px;
float: left;
display:inline;
margin:10px;
margin-top:5px;
}
.rs{
font:17px 'Open Sans',Tahoma, Helvetica, sans-serif;
color:#fff;
text-align:left;
width:200px;
padding:10px;
padding-top:1px;
border-bottom:1px solid #fff;
}
#fb {
background: url("images/fb.png") no-repeat scroll;
-webkit-transition: all 250ms cubic-bezier(.06,.33,.78,1.01);
transition: all 250ms cubic-bezier(.06,.33,.78,1.01);
opacity: 0.2;
filter: alpha(opacity=20);
display:block;
float: left;
height: 50px;
width: 50px;
margin:10px;
margin-top: 15px;
}
#fb:hover {
opacity: 1; filter: alpha(opacity=100);
float: left;
height: 50px;
width: 50px;
margin:10px;
margin-top: 18px;
}
#insta {
background: url("images/insta.png") no-repeat scroll;
-webkit-transition: all 250ms cubic-bezier(.06,.33,.78,1.01);
transition: all 250ms cubic-bezier(.06,.33,.78,1.01);
opacity: 0.2;
filter: alpha(opacity=20);
display:block;
float: left;
height: 50px;
margin:10px;
width: 50px;
margin-top: 15px;
}
#insta:hover {
opacity: 1; filter: alpha(opacity=100);
float: left;
height: 50px;
width: 50px;
margin:10px;
margin-top: 18px;
}
#pinter {
background: url("images/in.png") no-repeat scroll;
-webkit-transition: all 250ms cubic-bezier(.06,.33,.78,1.01);
transition: all 250ms cubic-bezier(.06,.33,.78,1.01);
opacity: 0.2;
filter: alpha(opacity=20);
display:block;
float: left;
height: 50px;
margin:10px;
width: 50px;
margin-top: 15px;
#pinter:hover {
opacity: 1; filter: alpha(opacity=100);
float: left;
height: 50px;
margin:10px;
width: 50px;
margin-top: 18px;
}
Merci de votre aide :)
| Fichier attaché | Taille |
|---|---|
 dzdzdzd.png | 10.81 Ko |
Salut,
Permalien Soumis par softwar le 12 Mai, 2015 - 16:53
Salut,
Il y a un problème avec ton conteneur qui possède la classe rs et tes différentes div :
Conteneur .rs = width:200px - padding:10px => 180px au total
Les div pinter, fb et insta font : width;50px + margin:10px = 70px x 3 = 210px...
Du coup ton conteneur est trop petit pour accueillir tes différentes div.
Voilà, je pense que si tu agrandis ton conteneur ou si tu réduis tes images alors ça passe :)
P.S : oubli pas que tu as un conteneur encore au dessus... #rs
Bon courage
Bonjour,
Permalien Soumis par Zeck le 12 Mai, 2015 - 18:43
Bonjour,
Merci de ta réponse, malheureusement j'ai déjà pensé à ce problème et j'ai essayé de mettre les conteneur #rs et .rs à 500px de largeur pour être sur malheureusement rien n'y fais les images ne s'alignent pas..
Cela ne viendrait-il pas du fait que ce soit des div ?
C'est vrai que je me suis
Permalien Soumis par softwar le 13 Mai, 2015 - 09:20
C'est vrai que je me suis focalisé sur ton CSS et non sur ton HTML...
Il faudrait que tu revois ta structure, mettre tes dans tes div et non l'inverse.
Tu as aussi une fin de balise en trop... ici :
Déjà corrige ton HTML et refait ton CSS et ca normalement ça devrait rouler...
Bon courage
C'était ça l'erreur ! Que je
Permalien Soumis par Zeck le 13 Mai, 2015 - 10:54
C'était ça l'erreur ! Que je suis bête !
Il fallait que je mette mon lien dans la div, et pas l'inverse... Je l'ai vu 54558522 fois et j'ai pas été capable de voir l'erreur ! mdrr
Merci beaucoup en tout cas !!!
De rien ;) Des fois il faut
Permalien Soumis par softwar le 13 Mai, 2015 - 11:05
De rien ;) Des fois il faut prendre un peu de recul :)
Au plaisir et bon courage pour la suite :)