28173 sujets

CSS et mise en forme, CSS3

Empiler des elements block (un peu comme un tetris)

Bonjour à tous,

Comme le titre de mon post l'indique, je cherche à empiler des block un peu comme un tetris.

c'est en fait pour organiser un sitemap, chaque cadre correspond à une liste (qui peut en conteni d'autres).

Bref, je pense qu'un croquis vaut mieu qu'une explication. Pour le moment je les positionnent avec une width fixe et un float:left; ce qui me donne :

http://img382.imageshack.us/img382/4783/1sy1.png

Et j'aimerais obtenir ceci :

http://img174.imageshack.us/img174/5669/2fm9.png

J'avoue que sur ce coup la je ne sais pas trop par ou commencer, d'autant plus que mes listes sont générées automatiquement via PHP et je n'ai donc pas beaucoup de liberté pour leur attribuer des id pour chaques, il faudrait que je trouve une solution pour qu'elle se positionnent toute bien d'un coup.

Quelqu'un aurait une idée ?

(désolé apparement les balises ne veulent pas marcher..... il faut donc cliquer sur les liens Smiley ohwell )

Merci d'avance Smiley cligne
Modifié par zmove (12 Oct 2006 - 17:22)
pourrais-tu mettre des numéros sur tes blocs pour savoir dans quel ordre ils apparaissent dans ton code ?
ok, les liens de mon post original ont été édités pour envoyer sur des images avec le numéros.

Globalement c'est dans le sens de la lecture.
Modérateur
bonsoir,

aie ! je ne vois pas de solution juste en html / css . peut-etre javascript ou xlst s(i tu as du temps a perdre) , mais sans garantie a 100% du resultat final chez l'internaute .

En php il suffirait de "compter" les balise , de mettre les block pairs dans un premier conteneurs , puis les impairs dans le conteneurs suivants ... en imaginant que tu n'as que 2 empilements , si plus il faudra faire en plus une petite division pour distribuer dans 3 , 4 ou 5 conteneurs.

Il me semble qu'une solution solide viendrait coté serveur et pas coté navigateurs.

++
Bonjour,

Et une alternance float: left et float: right ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >		
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title></title> 
   <meta name="TITLE" content="" />
	<style type="text/css">
#conteneur{
width: 410px;
overflow: hidden;
margin: auto;
}

.gauche{
float: left;
margin-top: 10px;
}

.droite{
float: right;
margin-top: 10px;
}

hr{
clear: both;
}
	</style>



</head>
<body>
<div id="conteneur">


<div class="droite" style="width: 200px; height: 200px; border: 1px solid #968d00">1
</div>

<div class="gauche" style="width: 200px; height: 300px; border: 1px solid #968d00">2
</div>

<div class="droite" style="width: 200px; height: 150px; border: 1px solid #968d00">3
</div>

<div class="gauche" style="width: 200px; height: 250px; border: 1px solid #968d00">4
</div>

</div>
</body>

</html>
je vais essayer la solution de l'alternance des float, j'aimerais éviter d'ajouter du javascript ou autre...

Dommage qu'il n'y ai pas une propriété magique proche du float qui positionnerai l'éléments de cette façon ^^

Il va donc falloir que triffouille dans le PHP, j'essayais d'éviter cela car la sitemap est généré par une classe(php) qui gêre tout le système d'arborescence du site. Alors pour arriver à donner une classe(css) juste pour la page sitemap sans l'appliquer à tout le reste du site, ca va être coton...

Merci bien du coup de pouce Smiley biggrin
Modifié par zmove (13 Oct 2006 - 11:19)
Sujet clos
Aller à