28234 sujets

CSS et mise en forme, CSS3

[Résolu] Liste ul et cercle css3

Bonjour,
Je souhaitais tester les cercles en css3. Grâce au très bon article de Riku Asakura, j'obtiens un cercle grâce au code suivant:
#cercle {
	width: 150px;
	height: 150px;
	background-color:#33FFCC;
	-moz-border-radius: 75px;  
	-webkit-border-radius: 75px;  
	-khtml-border-radius: 75px;  
	border-radius: 75px; 
}


Mais je tombe sur un écueil si je veux faire, admettons, une liste horizontale faite de cercles…

Ce code fonctionne
#menu li {
	float: left;
	width: 150px;
	height: 150px;
	background-color:#33FFCC;
	-moz-border-radius: 75px;  
	-webkit-border-radius: 75px;  
	-khtml-border-radius: 75px;  
	border-radius: 75px; 
}


Mais si je remplace le float: left; par un display: inline; je n'ai plus mes cercles.

quelqu'un aurait une explication à ça? Smiley rolleyes
Modifié par speedlab (21 Mar 2010 - 18:23)
Ooops, je me réponds, j'avais fait une erreur de frappe dans le code (x)HTML.
Message à jeter… Pas bon de bosser un dimanche de printemps Smiley sweatdrop
Il y a aussi le fait qu'un élément en display:inline ne peut pas avoir de hauteur ou largeur fixe (les propriétés width et height seront ignorées). Si tu veux pouvoir utiliser width et height tout en gardant certaines caractéristiques du "inline", il faut regarder du côté de display:inline-block.
Merci pour la précision, Florent.
Mais n'y a t'il pas des écueils d'utilisation de display:inline-block, notamment avec IE?
Je crois avoir lu ça sur l'article de Raphael...
Heyoan a écrit :
Mais Florent a trouvé la parade

De mémoire j'ai eu l'info par gc-nomade sur ce forum. La paternité de l'astuce est sans doute attribuable à un autre encore. Smiley cligne
Pour info, les astuces données pour Firefox 1 et 2 sont assez obsolètes aujourd'hui, avec un Firefox 2.0 en dessous de la barre des 1% de parts de marché.
Sujet clos
Aller à