[Résolu] Positionnement en CSS

Bonjour,
D'abord, je voulais dire un grand merci au site, que j'ai découvert il y a une semaine et qui m'a été d'une très grande aide. J'ai un profil de "débutant ++" en CSS 3, à savoir que j'ai l'habitude de manipuler les propriétés "de base" depuis longtemps, mais dès que cela devient un zest compliqué, je disparais ! *pouf vanish*

Donc, j'ai un problème avec mon bloc... Il s'agit d'un bloc social, qui se présente sous la forme suivante (je n'ai mis que 2 lignes car j'ai pas encore fait le reste mais cela reprend le même principe) :

<div class="socialize">
	<ul>
		<li class="social-twitter">
			<a href="http://twitter.com/" class="fa fa-twitter"></a>
			<span class="social-label">67 followers</span>
			<span><a href="http://twitter.com/"><i class="fa fa-chevron-right social-chevron"></i></a></span>
		</li>
		<li class="social-facebook">
			<a href="http://facebook.com/" class="fa fa-facebook"></a>
			<span class="social-label">45 fans</span>
			<span><a href="http://facebook.com/"><i class="fa fa-chevron-right social-chevron"></i></a></span>
		</li>
	</ul>
</div>

Bon, ce n'est pas très élégant comme "programmation", mais cela m'affiche le tout. J'ai préféré mettre des li / span, ca me semblait plus logique vu que c'était en ligne...
J'ai juste un problème avec les spans du milieu (les followers). J'aurais aimé que les span soient alignés. C'est à dire que le "67" et le "45" soient alignés par le côté gauche. J'ai mis un float left, mais, cela ne donne guère de résultat...

Je ne sais pas si je peux mettre le css, vu qu'il est un peu long, mais le voici

.socialize {
}
.socialize a {
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
color: #fff;
}
.socialize a:hover {
text-decoration:none;
}
.socialize .social-label {
font-size: 18px;
color: #fff;
}
.socialize .social-chevron {
color: #fff;
float:right;
padding-top: 10px;
}
.socialize .social-twitter {
font-size: 32px;
background: #2aa9e0;
padding : 0px 10px!important;
}
.socialize .social-facebook {
font-size: 32px;
background: #204385;
padding : 0px 10px!important;
}
.socialize .social-googleplus {
font-size: 32px;
background: #d3492c;
padding : 0px 10px!important;
}

Je vous ai prévenu, c'est codé avec les pieds
Voila la capture de comment c'est actuellement.


Avez-vous une idée de comment aligner les "span du milieu" ?
Modifié par Nhog (20 Mar 2014 - 11:42)

Bonjour,

en appliquant un « display: inline-block » sur tes liens, tu pourras leur donner une largeur ( width: 20%; par exemple ) ce qui t’assurera que tes span soient alignées.

Tu peux d’ailleurs appliquer ce display sur tes span également — et ainsi les aligner verticalement au milieu à l’aide de « vertical-align: middle; », si le cœur t’en dit

J’espère avoir répondu à ta question,
Bon courage !

Ten a écrit :
Bonjour,
Tu peux d’ailleurs appliquer ce display sur tes span également — et ainsi les aligner verticalement au milieu à l’aide de « vertical-align: middle; », si le cœur t’en dit

Enfin pour ça, le display inline des span suffit

@Nhog, pourquoi mettre les liens que sur les deux icônes mais pas sur toute la boîte? Un seul lien sera plus propre, plus accessible, et plus agréable pour tout le monde.
Modifié par kustolovic (20 Mar 2014 - 09:23)

D'abord, merci à tous les 2 pour la vitesse de réponse !

La solution de Ten marche à la perfection, c'est merveilleux ! J'en ai profité pour lire un peu le fonctionnement du inline-block (bon, il me faudra un peu de temps pour digérer, mais cela semble assez intéressant...). D'après ce que j'ai vu, c'est plutôt bien supporté par les navigateurs (seul IE7 manque à l'appel; je n'ai pas les derniers chiffres d'utilisation, mais cela doit être plutôt faible).
Pour le vertical align, je regarde, cela m'évitera de mettre des paddings un peu partout...

Pour le <a> (que propose kustolovic), l'idée est vraiment très intéressante, surtout que je pourrais alors utiliser le hover plus "naturellement".

Je tente de mettre tout cela en place et encore un gros merci à tous les 2 !!!

Pour inline-block et ie6 et 7, une classe conditionnelle te permettra de pallier au problème :

.ie67 .socialize{
  zoom :1; /*offre le layout à un élément */
  display:inline;
}

Cf :
http://www.alsacreations.com/article/lire/1209-display-inline-block.html

" Pour IE un élément inline qui possède le Layout aura le même comportement qu'un inline-block "

...et les classes conditionnelles, très pratiques :
http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html


Modifié par Manhattan (20 Mar 2014 - 11:14)

Voila encore de saines lectures que celles proposaient par Manhattan, Merci !
Cela rappelle des souvenir que ce IE6... J'en ai vu des développeurs le maudire durant toutes ces années !

J'ai passé le sujet en résolu, car tout ce que vous m'avez proposé a parfaitement fonctionné !

Et surtout merci pour votre rapidité, pour le fait que vous vous mettez à mon niveau (même moi j'ai compris ce que vous m'avez expliqué !). Bref, un forum merveilleux que voila où l'on est pas pris de haut !