28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Tout d'abord excusez moi si un tel sujet à déjà été traité, je n'ai rien trouvé de semblable, alors je me lance :

J'ai créé un <p> avec 5 images dedans, comment faire pour occuper toute la largeur disponible de mon paragraphe ?

Voici mon code :

<p id="social_networking">
<a href="http://www.facebook.com/xxxx"><img src="/images/facebook_32.png" width="32" height="32" alt="Facebook"></a>
<a href="http://twitter.com/xxxx"><img src="/images/twitter_32.png" width="32" height="32" alt="Twitter"></a>
<a href="http://plus.google.com/xxxx"><img src="/images/google_plus_32.png" width="32" height="32" alt="Google+"></a>
<a href="http://www.youtube.com/user/xxxx"><img src="/images/youtube_32.png" width="32" height="32" alt="Youtube"></a>
<a href="http://www.flickr.com/photos/xxxx/"><img src="/images/flickr_32.png" width="32" height="32" alt="Flickr"></a>
</p>


et enfin le CSS que j'ai fait pour le moment mais qui ne me conviens pas vraiment si la taille du paragraphe augmente Smiley sweatdrop :

p#social_networking img {
margin:0 0 0 12%;
}
p#social_networking a:first-child img {
margin:0 0 0 0;
}


Merci pour vos réponses !
Modifié par Ddjay (17 Nov 2011 - 18:27)
Tu veux répartir tes images espacées régulièrement en largeur?
Dans ce cas ça doit être possible:
- avec des liens en display:inline-block; width:20%; (mais il faudra utiliser une technique pour éviter les espaces de texte entre tes éléments... faire une recherche sur inline-block pour en savoir plus);
- ou encore avec des liens en display:table-cell;.
Dans les deux cas on ajoutera bien sûr un text-align:center si on veut centrer les images dans chaque lien.
Merci fvsch !

Ça colle !

Voilà ce que j'ai fait :

p#social_networking a {
	display:inline-block;
	width:19%;
	text-align:center;
}


Il y'a un 19% par contre, je ne sais pas pourquoi ... mais ça fait pile ce que je voulais, par contre j'aurais pu me creuser un petit peu les méninges lol