1485 sujets

Web Mobile et responsive web design

hello !

voici mon problème.
j'ai une sorte de "mosaïque" faites de cercles et de voudrais centrer un court texte verticalement.

Pour faire mes cercles en css et les border-radius.
et conserver le même ratio j'ai opter pour cette solution :

http://etienner.fr/billet.php?id=3

Sachant que la plupart de ces cercle ont un lien et que tout le cercle doit être cliclable



<ul>
	<li><a href=""><span><span>aujourd'hui</span></span><a></li>
        <li><a href=""><span><span>cette semaine</span></span><a/></li>
	<li><span><span>bla bla</span></span></li>
        <li><span><span>blu blu</span></span></li>
	<li><span><span>titi titi</span></span></li>
        <li><span><span>toto</span></span></li>        
</ul>






/* sur mobile en 3 colonnes */

ul li{
	width: 31%;
	margin: 0.875%;


	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;

	float: left;
	
}


ul  li > span{
	display: block;
	height: 0;
         overflow: hidden;
	padding-bottom: 100%;
	position: relative;
	text-align: center;

}

ul li  span span{
   height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}



Mais voilà ! maintenant je suis bien embêté pour centrer mon texte verticalement Smiley sweatdrop
et dans mon code, c'est un peu la fête du <span>.

Avez-vous un conseil ??? une solution ?

en vous remerciant !

Eddy
Modifié par eddytournier (29 Nov 2012 - 17:35)
bon ben no soluce Smiley decu

mis à part d'attribuer des tailles en px, rajouter des breaking-point pour améliorer l'affichage afin d'éviter d'avoir des rond avec un espace sur les cotés trop important.

Pour l'instant je vois que ça. ....