[résolu] Mise en forme spécial des blocks

Bonjour à tous,

Voilà je suis sur le création d'un thème assez simple pour wordpress et après l'avoir adapté, je me suis rendu compte que ma mise en forme des blocs était par moment déformé. En effet, lorsque je publie un article à l'aide de wordpress, celui-ci me demande de mettre un image à la une; mais par moment je ne souhaite tout simplement pas en mettre et/ou ne veut pas respecté sa hauteur de 250px et c'est ce qui fait que tout ce déforme. Cela fait 2 jours que je patauge dedans en essayant soit de mettre une class spécial a mon blocs mais aucun succès, j'ai essaye divers pseudo-element tel que first-child, last-child, nth-child(odd) et nth-child(event) et je suis parvenu à ce que je souhaité. Le problème et réapparut lorsque j'ai voulu re-mettre un article en lignes tout c'est déformé alors depuis ce matin je ramasse les morceau de mon cerveau à la petit cuillère étant donnée mes faible connaissance en design. J'ai fait deux imprim' écran dont la première est le rendu que je souhaite et la deuxième ce que je souhaiterai évité absolument ^^.

- Screen 1: http://img4.hostingpics.net/pics/379942azerty1.png
- Screen 2:http://img4.hostingpics.net/pics/693522azerty2.png

Voici maintenant la parti html d'un seul blocs ainsi que ses valeurs ajouter:

<div class="loop-entry effectbox">
		<div class="loop-entry-thumbnail">
			<a href="#" title="#">{MA BALISE IMAGE}</a>
		</div>
	<div class="loop-entry-post">
	<h3><a href="#" title="#">Titre de l'article</a></h3>
		<p class="loop-entry-posts-text">Texte de l'article</p>
        <div class="loop-entry-meta">
        	<span class="meta-date">Date: 01/01/2001</span>
            <span class="meta-category">Catégorie: non classé</span>
            <span class="meta-author">Auteur: Petit-Cromagnon</span>
            <span class="meta-permalink"><a href="#" title="Permalink">Permalien</a></span>
        </div>
	</div>
</div>

Et le css:

.effectbox {
	position:relative;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effectbox:before, .effectbox:after {
	content:"";
	position:absolute;
	z-index:-1;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	top:10px;
	bottom:10px;
	left:0;
	right:0;
	-moz-border-radius:100px / 10px;
	border-radius:100px / 10px;
}
.effectbox:after {
	right:10px;
	left:auto;
	-webkit-transform:skew(8deg) rotate(3deg);
	-moz-transform:skew(8deg) rotate(3deg);
	-ms-transform:skew(8deg) rotate(3deg);
	-o-transform:skew(8deg) rotate(3deg);
	transform:skew(8deg) rotate(3deg);
}
.loop-entry:nth-child(odd) { float:left; }
.loop-entry:nth-child(even) { float:right; }
.loop-entry {
	width:310px;
	background:#FFF;
	margin-bottom: 20px;
	border: 1px solid #CCC;
	-moz-box-shadow: 0px 0px 5px #ccc;
	-webkit-box-shadow: 0px 0px 5px #CCC;
	box-shadow: 0px 0px 5px #CCC;
}
.loop-entry-thumbnail {
	margin-bottom: 10px;
}
.loop-entry-thumbnail img {
	display: block;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
.loop-entry-post h3 {
	margin: 0px 5px 5px 5px;
	text-align: center;
}
.loop-entry-posts-text {
	padding: 5px;
	text-align: justify;
}

Je vous remercie d'avance de m'avoir lu et peut-être résoudre mon problème .
Modifié par didouchy (01 May 2013 - 05:28)

La nuit ma porté conseil on dirais ^^.
J'ai réussis à faire quelque chose que je voulais tout en relisant des article concernant mes pseudo-element utilisé. Après moult réflexion, j'ai gardé nth-child(odd) et nth-child(even) puisque je voulais sélectionné 1/2 élément. J'ai donc réfléchi deux petite minutes afin de savoir comment positionné le dernier block à droite sans qu'il ce colle à celui de gauche et c'est alors que j'avais la réponse sous les yeux; Le last-child qui prend le dernier article dans mon cas et je lui est attribuer la valeurs float: right;.

J'ai exactement le rendu que je souhaité avoir, soit ceci:
- http://img15.hostingpics.net/pics/123464Sanstitre1.png
Et quand je supprimer un article et/ou que j'en rajoute d'autre j'ai exactement ce dont je souhaite aussi:
- http://img15.hostingpics.net/pics/865986Sanstitre2.png

Mon problème est que sur internet explorer, celui-ci ne fonctionne pas... et donc je retourne à la case départ .
Je tenez à avertir cet avancé de mon problème en cas ou une personnes souhaiterai m'aidé (a).

Sujet résolu. Masonry été tout simplement inconnu pour moi .