28172 sujets

CSS et mise en forme, CSS3

Affichage de posts wp comme Pinterest

Bonjour,

Cela fait quelque temps que je suis entrain de me rendre fou sur le positionnement de mes div.
Alors voila j'ai une page ou je voudrais afficher certains posts wordpress de la même façon que Pinterest affiche ses Pins.

J'ai bien sur essayer de bien checker leur code avec firebug mais j'ai toujours des problèmes.

Voila mon code HTML :


<body>

<?php include('header.php'); ?>

<div id="contenu-blog">
  <div id="publications">
  <?php $posts = get_posts('numberposts=30&order=DSC');
  foreach ($posts as $post) : start_wp(); ?>
    <div class="item">
      <div class="post">
      <div class="titre-post">
        <?php $title = the_title('','',TRUE);  ?>
      </div>
      <div class="excerpt">
        <?php the_excerpt(); echo "<br />"; ?>
      </div>
      </div>
    </div>
    
  <?php endforeach; ?>  
  </div>
</div>

<?php include('footer.php'); ?>

</body>


Voila mon code CSS :


#contenu-blog
{
	width:1020px;
	min-height:300px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(visuels/background-contenu.png);
	
}

#publications
{
	padding-top:40px;
	position:relative;
	width:980px;
	margin-left:auto;
	margin-right:auto;
	
}

.item
{
	
	position:absolute;
	background-color:#FFF;
	padding: 15px 15px 0;
	margin-left:10px;
	margin-top:10px;
	width:190px;
	margin-left:20px;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	-moz-box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
}

.post
{
	width:190px;
}

.titre-post
{
	color:#000;
	font-size:14px;
	padding-bottom:5px;
	border-bottom:thin 1px #CCC;
	
	
}

Je n'arrive pas a trouver mon erreur pour que les Divs ne se superposent pas mais se mettent côte à côte au fur et à mesure que des posts sont créés.

Merci d'avance,

PS: C'est mon premier post alors pardonnez moi si je ne suis pas très clair.
Modifié par Tony Monast (21 Mar 2012 - 13:36)
Bonjour,
Je cherchais à réaliser un même effet également, à savoir des vignettes de largeur fixes mais hauteurs différentes.
Dans l'autre sens (hauteurs équivalentes, mais largeurs différentes), un bon float ou inline-block auraient été parfait, mais la, ces deux solutions ne sont pas acceptable étant donné qu'elles laissent à un moment ou un autre un espace verticale entre deux vignettes (float laisse un espace en dessous [vignette d'une même 'ligne' alignés par le haut], la ou inline-block laisse un espace au dessus de la vignette[aligné par le bas]).
http://apeiron.fr/folio/?path=ArthurJ/airnadette26-27jan pour expliciter mon problème.
J'ai regardé un peu pinterest, et je vois qu'ils fonctionnent par position absolute (certainement généré par js je suppose), qui dans les trois (même) posts du dessus semble manqué, il y a l'absolute, mais pas de coordonnées différentes par vignette.

Ma question est : est-il obligatoire de passer par un traitement de la position de chaque vignette, ou existe-il une propriété qui pourrait m'aider à casser cette notion de ligne (le but étant de sortir d'une idée de l'ordre en faisant un folio très fouillis). Je réfléchissait à faire une division de hauteur la largeur de la fenêtre, remplir à coup de inline-block et de lui faire une rotation de 90°, mais ça semble beaucoup pour pas grand chose Smiley ohwell
Sinon, un grand tableau, ou les vignettes prendrai plusieurs rowspan en fonctin de leur hauteur ?
J'ai continué a regarder toute la journée et je penses que ce que Pinterest fait c'est qu'ils (via javascript) récupère les coordonnées de positionnement de la div précédente afin de pouvoir positionner la div suivante avec position:absolut en fonction de celle-ci.

Par contre je sais pas du tout comment faire ça, quelqu’un pourrait-il me guider ?

Merci
Hello.

En effet tout le positionnement sur Pinterest est géré via JS (d'ailleurs le site ne se charge pas du tout sans JS, sans raison valable), c'est donc ce que j'aime appeler "une belle grosse daube".

moialex23 a écrit :
Alors voila j'ai une page ou je voudrais afficher certains posts wordpress de la même façon que Pinterest affiche ses Pins.
Soyez originaux.
Sujet clos
Aller à