Doc: ajout exemple mise en pages boites

874e816b · llaffont · 9dfca943 · 874e816b · 874e816b
Commit 874e816b authored 11 years ago by llaffont
--- a/.gitattributes
+++ b/.gitattributes
@@ -2182,6 +2182,7 @@ cosmogramme/tests/php/classes/unimarc_musso.txt -text
 cosmogramme/tests/php/classes/unimarc_supertramp.txt -text
 cosmogramme/tests/php/integrationTest.php -text
 cosmogramme/tests/phpunit.xml -text
+doc/exemple_boites.html -text
 doc/extern_libs.org -text
 doc/my.cnf -text
 doc/vocabulaire_fusion.txt -text

--- a/doc/exemple_boites.html
+++ b/doc/exemple_boites.html
+<html>
+	<head>
+    <style>
+    .clear {
+      clear: both; /** fait en sorte que la hauteur de la colonne prennent en compte les boites en position "absolute" */
+    }
+
+    .colonne {
+      width: 600px;
+      margin: 0 auto;
+      position: relative;
+      border: 2px solid black;
+    }
+
+    .boite {
+      width: 35%;
+    }
+
+
+    .boite:first-child {
+      width: 70%;
+    }
+
+    .boite > div {
+      padding: 5px;
+      margin: 5px;
+      border: 2px solid black;
+      height: 200px;
+    }
+
+    .boite:first-child > div {
+      background-color: blue;
+    }
+
+    .boite:first-child + .boite > div {
+      background-color: red;
+    }
+
+    .boite:first-child + .boite  + .boite > div {
+      background-color: green;
+    }
+
+    .boite:first-child + .boite  + .boite  + .boite > div {
+      background-color: pink;
+    }
+
+    .boite:first-child + .boite  + .boite  + .boite + .boite > div {
+      background-color: yellow;
+    }
+
+
+    .boite:first-child + .boite  + .boite  + .boite + .boite  + .boite > div {
+      background-color: cyan;
+    }
+
+    .boite:first-child + .boite  + .boite  + .boite + .boite  + .boite + .boite > div {
+      background-color: brown;
+    }
+
+    /** Après la troisième boite, les boites se positionnent en haut avec une 
+     marge de la largeur des boîtes à gauche, pour donner l'effet "2 colonnes" **/
+    .boite:first-child + .boite  + .boite ~ .boite {
+      position: absolute;
+      top: 220px; /** place la boite à 0px du haut de son parent relatif, soit "colonne" */
+      margin-left: 35%;
+    }
+
+    .boite:first-child + .boite  + .boite + .boite + .boite {
+      top: 440px;
+    }
+
+    .boite:first-child + .boite  + .boite + .boite  > div {
+      border-bottom: none;
+      height: 210px;
+    }
+
+    .boite:first-child + .boite  + .boite + .boite  + .boite > div {
+      border-top: none;
+      height: 200px;
+    }
+
+
+    .boite:first-child + .boite  + .boite  + .boite + .boite  ~ .boite {
+		  margin-left: 70%;
+      width: 30%;
+		}
+
+
+    .boite:first-child + .boite  + .boite  + .boite + .boite + .boite {
+      top: 0px;
+    }
+
+
+    .boite:first-child + .boite  + .boite  + .boite + .boite + .boite > div {
+      height: 420px;
+    }
+
+
+    .boite:first-child + .boite  + .boite  + .boite + .boite + .boite + .boite {
+      top: 438px;
+    }
+
+    </style>
+  </head>
+
+  <body>
+    <div class="colonne">
+      <div class="boite"><div>Boite 1</div></div>
+      <div class="boite"><div>Boite 2</div></div>
+      <div class="boite"><div>Boite 3</div></div>
+      <div class="boite"><div>Boite 4</div></div>
+      <div class="boite"><div>Boite 5</div></div>
+      <div class="boite"><div>Boite 6</div></div>
+      <div class="boite"><div>Boite 7</div></div>
+      <div class="clear"></div>
+    </div>
+  </body>
+</html>