28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement div texte et icones

Bonjour à tous,
Voilà 3h que j'épluche tutoriels et forums et que j'essaie différentes solutions inline, list, float et autres sans succès. J'ai pourtant l'impression que le problème d'alignement de texte et d'icônes dans mon header ne doit pas être si compliqué à résoudre. A voir ici: http://bit.ly/1CLrOgO


		<div class="followhead">
<ul id="followtop">
<li>
		<div class="followon">Soutenez-nous:</div>
</li>
<li>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4BDB4XTDC3EKS">
<input type="image" src="http://www.allwewish.org/wp-content/themes/twentyfourteen-child/images/faireundonBlk.png" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">
<img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
</form>
</li>
<li>
		<div class="followon">Suivez-nous:</div>
</li>
<li>
		<a href="https://www.facebook.com/pages/AllWeWish/169775679716350?ref=ts&fref=ts" title="AllWeWish sur Facebook"><div class="followonfb"></div></a>
		<a href="http://www.pinterest.com/allwewish/" title="AllWeWish sur Pinterest"><div class="followonpi"></div></a>
		<a href="http://www.youtube.com/user/AllWeWish" title="AllWeWish sur Youtube"><div class="followonyt"></div></a>
		<a href="https://plus.google.com/u/0/102246671561003525922/posts" title="AllWeWish sur Google+"><div class="followonggl"></div></a>
		<a href="http://www.allwewish.org/feed/" title="AllWeWish en RSS"><div class="followonrss"></div></a>
		</div>
</li>
<li>
		<div id="transpo">
		<?php if(function_exists("transposh_widget")) { transposh_widget(array(), array('title' => 'Translation', 'widget_file' => 'flags/tpw_flags_css.php')); }?>
		</div>
	</div>
</li>
</ul>




#transpo{background:transparent;color:#000;font-family:Lato,'Sans Serif';font-size:12px;font-weight:400;font-style:normal;color:#000;text-transform:uppercase;margin:0;position:fixed;right:4%;top:1%;z-index:4000}
.followhead{position:absolute;right:250px;top:10px;}
#followtop, #followtop li {display:inline}
.followon{display:block;float:left;font-family:Lato,?sans-serif;font-size:12px;font-weight:400;font-style:normal;color:#000;text-transform:uppercase;margin:4px}
.followonfb,.followonpi,.followonyt,.followonrss,.followonggl{height:32px;margin:0 5px;width:32px;display:block;float:left}
.followonfb{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:0 -1948px}
.followonfb:hover{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:0 -1866px}
.followonpi{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:-850px -410px}
.followonpi:hover{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:-850px -328px}
.followonyt{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:-850px -574px}
.followonyt:hover{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:-850px -492px}
.followonggl{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:-850px -246px}
.followonggl:hover{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:-850px -164px}
.followonrss{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:-850px -82px}
.followonrss:hover{background-image:url(http://tst.allwewish.org/wp-content/themes/twentyfourteen-child/images/AWWSpriteImages.png);background-position:-850px 0}


J'espère que l'un de vous pourra m'aider...
Merci d'avance,
à bientôt!
Thierry
Bonjour Taspasvu, merci pour ta réponse.
Je n'ai pas touché au z-index car mon but n'est pas de faire passer les icônes devant le reste du header mais d'aligner comme suit:

Soutenez-nous: /// Icône Faire un don /// Suivez-nous: /// 5 Icônes réseaux sociaux
Bon, j'ai fini par trouver: en mettant mes li en display:inline-block et en modifiant ensuite les marges
Sujet clos
Aller à