Afficher une mosaique d'image et/ou de couleurs

Bonjour,

en gros, je cherche à afficher un faux "tableau" (fait avec des css flottantes) de 4x3 avec des images rectangulaires dont seul un carré serait affiché. Parfois, il n'y aura pas d'image mas un carré de couleur...

si je n'affiche que des vignettes redimentionnée et dont l'overflow est caché, ça fonctionne (sauf que je n'arrive pas à trouver l'idée pour afficher des bords d'image arrondies, la partie basse étant tronquée)... mais dès que je veux n'afficher qu'un carré de couleur (corredpondant à un bloc css), ça plante lamentablement... sans caracteres, je n'ai rien, si j'écris dans le bloc, j'ai mon texte dans un bloc à la taille du texte...

bref, je rame...

mon code html pour l'image(avec une boucle en php pour en afficher 9 et un test aléatoire pour en pas afficher une image mais mon fameux bloc couleur)

<div class=rogne>
    <p><img src="image.jpg"></p>
</div>

et pour le bloc couleur:

<div class="float_carre">
    <div class="bloc_couleur" style="background-color:red;">a</div>
</div>

mon code css

.rogne img {
position: relative;
height: 200px;
}

.rogne p {
position: relative;
width: 150px;
height: 150px;
overflow: hidden;
float:left;
margin:5px 0px 0px 5px;
}

.rogne {
width:600px;
}

.rogne bloc_couleur{
 width:110px; height:110px;
}

.rogne float_carre {
 float: left;
 padding:10px;
 }

Modifié par el_loco (27 May 2012 - 23:11)