Eviter les blancs (retour à la ligne)

Bonjour,

je cherche a éviter les blancs (foncé sur l'image ) dû aux retours à la ligne :

<style>
html, body{padding:0; margin:0; background-color:#1B1B1B; width:100%; height:100%; }
#splash{background-image:url(images/logo.png); width:192px; height:46px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-115px; }
#container{float:left; width:900px;}
.large{width:200px; height:200px; display:block; background:red; float:left;   margin-top: 0;}
.small{width:200px; height:100px;  display:block; background:blue; float:left;   margin-top: 0;}
.mini{width:200px; height:50px;  display:block; background:grey; float:left;   margin-top: 0; }
li{margin:0; padding:0;}
</style>

<div id="container">
<li class="large"></li>
<li class="small"></li>
<li class="mini"></li>
<li class="small"></li>
<li class="mini"></li>
<li class="small"></li>
<li class="mini"></li>
<li class="mini"></li>
<li class="small"></li>
<li class="mini"></li>
</div>

Mais je sais pas si une propriétée existe pour

Merci.
Modifié par naptiv (12 May 2009 - 19:09)

Bonjour naptiv,

Je vais essayer de t'aider à régler ton problème.

Déjà, ton code CSS n'est pas valide.
Pour voire et donc corriger l'erreur, je te conseil de le passer au validateur.

Ensuite, en ce qui concerne tes retours à la ligne, remplace tes display: block; par des display: inline; comme ceci :

<style>

html, body{padding:0; margin:0; background-color:#1B1B1B; width:100%; height:100%; }

#splash{background-image:url(images/logo.png); width:192px; height:46px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-115px; }

#container{float:left; width:900px;}

.large{width:200px; height:200px; display:inline; background:red; float:left;   margin-top: 0;}

.small{width:200px; height:100px;  display:inline; background:blue; float:left;   margin-top: 0;}

.mini{width:200px; height:50px;  display:inline; background:grey; float:left;   margin-top: 0; }

li{margin:0; padding:0;}

</style>

Pourquoi ?

Tout simplement parce que la propriété block empêche les retours à la ligne tandis que la propriété inline fais le contraires.

Voilà, en espérant que ça t'ai aidé .

Modifié par jQz (12 May 2009 - 18:33)

Salut,

@jQz > le display:inline ne sera pas pris en compte car le float induit un rendu de type bloc. Pour ce qui est de valider le code tu aurais pu le faire aussi car tu as recopié la même erreur : grey au lieu de gray.

@naptiv > je ne pense pas que ça soit possible.

Merci à vous deux,

je vais donc essayer autre chose

a écrit :
Pour ce qui est de valider le code tu aurais pu le faire aussi car tu as recopié la même erreur : grey au lieu de gray.

Je n'ai fais que copier/coller son code.
C'est en corrigeant ses erreurs qu'on les comprends et que l'on ne les refais pas .
Modifié par jQz (12 May 2009 - 19:15)