28172 sujets

CSS et mise en forme, CSS3

Alignement horizontal d'icons

Salut
j'ai essayer d'aligner des icons en bas de la page, de façon horizontal mais je les trouve toujours vertical ?
est ce que vous pouvez me dire ce qui cloche ? merci

 <div id="footer">Ceci est le pied de page Stay connected
	
	
        <div class="stay-connected-left">

		<div>&nb&p;</div>
		
         <div id="facebook_bloc"> 
            <a target="_blank" href="http://www.facebook.com/pages/CSS/100874439956194" rel="nofollow">	
            <img title="Find us on Facebook" alt="Facebook" src="/images/facebook.png">
			</a>
		 </div>

        <div id="twitter_bloc">	
            <a target="_blank" href="http://twitter.com/css_DVP" rel="nofollow">
            <img title="Find us on Twitter" alt="Twitter" src="/images/twitter.png">
	        </a>
		</div>
		
		<div id="linkln_bloc">	
            <a target="_blank" href="http://www.linkedin.com" rel="nofollow">
            <img title="Find us on linkedin" alt="linkedin" src="/images/linkedin.png">
	        </a>
		</div>
		
		

        </div>
	</div>[code=html]





div#footer.stay-connected-left { display: inline; }
Bonjour,

ça fait beaucoup de div pour 3 pauvres icônes. Pourquoi ne pas utiliser une liste non ordonnée avec les <li> en float:left ? : 


<ul>
  <li id="facebook"><a href="#"><img /></a></li>
  <li id="tweeter"><a href="#"><img /></a></li>
  <li id="linkln"><a href="#"><img /></a></li>
</ul>

Modifié par fufu (11 Apr 2011 - 05:12)

<div id="footer">Ceci est le pied de page Stay connected

<div class="stay-connected-left">

<ul> 

<li id="facebook"><a href="http://www.facebook.com/">
<img title="facebook" alt="facebook" src="/image/facebook.png" /></a></li> 

<li id="tweeter"><a href="http://www.tweeter.com/">
<img title="tweeter" alt="tweeter" src="/image/tweeter.png" /></a></li> 

<li id="linkln"><a href="http://www.linkln.com/">
<img title="rss" alt="rss" src="/image/rss.png" /></a></li> 

</ul> 
</div>
</div>


CSS

div#footer.stay-connected-left  ul li{ display: inline; }


j'ai essayé comme ça mais la disposition est toujours vertical et les images ne s'afficher pas, est ce qu'il y a quelque chose qui manque dans le code ?
En regardant ce bout de code, je me dis que tu as déjà 2 div qui ne te servent à rien.

Tu peux styler l'<ul> directement.

ensuite, enlève le 
display:inline;
et tente un 
float:left;
sur les <li>

exemple : 

<html>
 <head>
  <style>
   #toto { list-style:none; }
   #toto li { float:left; margin-right:5px;}
  </style>
 </head>
<body>

<ul id="toto">
 <li>toto_1</li>
 <li>toto_2</li>
 <li>toto_3</li>
</ul>

</body>
</html>


ce qui devrait t'afficher :
a écrit :
toto_1 toto_2 toto_3

Modifié par fufu (11 Apr 2011 - 17:49)
merci bien, sa marche comme voulue.
mais il y a les images qui ne s'affiche pas? j'utilise des images à dimension 64*64 de type PNG.est ce que le problème peux provenir de la taille de ces images ?
Sujet clos
Aller à