.

[hacks/simpleWebSlides.git] / unix_prog_web / unix_prog_web_05.xhtml

diff --git a/unix_prog_web/unix_prog_web_05.xhtml b/unix_prog_web/unix_prog_web_05.xhtml
index bac703d..29a7ce1 100644 (file)
--- a/unix_prog_web/unix_prog_web_05.xhtml
+++ b/unix_prog_web/unix_prog_web_05.xhtml
@@ -379,6 +379,8 @@
       </p>
     </div>
     <div class="sws-slide">
+<span style="position:absolute;right:10pt;top:10pt;color:#0a2">fixed
+      (right:10pt,top:10pt)</span>
       <h1>Positionnement (exemple)</h1>
       <div>
         <div style="45%;margin:0 4%;float:left;"><code>
@@ -406,8 +408,7 @@
 <p><code><![CDATA[  <ul style="position:relative;"><li>…</li> …</ul>]]></code></p>
 <ul style="position:relative;float:right;background:#ddd;">
   <li>Positionnement <span style="position:static;color:#02a">static</span></li>
-  <li>Positionnement <span style="position:fixed;right:10pt;top:10pt;color:#0a2">fixed
-      (right:10pt,top:10pt)</span></li>
+  <li>Positionnement </li>
   <li>Positionnement <span style="position:relative;left:10pt;bottom:-5pt;color:#a20">relative
       (left:10pt,bottom:-5pt)</span></li>
   <li>Positionnement <span style="position:absolute;right:0pt;bottom:10pt;color:#a2a">absolute
@@ -628,6 +629,40 @@
 <p>Cela permet d'appliquer des styles spécifiques lors de l'impression
   d'une page ou pour des terminaux mobiles (ayant une petite taille
   d'écran) ou de changer de style si l'orientation de l'écran est modifiée.</p>
+</div>
+<div class="sws-slide">
+  <h1>Gestion du débordement</h1>
+  <p>L'attribut <tt>overflow</tt> permet de gérer le débordement. Il
+  peut prendre les valeurs <tt>visible</tt>, <tt>hidden</tt> et <tt>auto</tt>
+  : </p>
+  <div style="width:30%;float:left;overflow:visible; height:100pt;background:#ffa;" >
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+aliquip ex ea commodo consequat. Duis aute irure dolor in
+reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+culpa qui officia deserunt mollit anim id est laborum.
+  </div>
+  <div style="width:30%;float:left;overflow:hidden; height:100pt;background:#faf;" >
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+aliquip ex ea commodo consequat. Duis aute irure dolor in
+reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+culpa qui officia deserunt mollit anim id est laborum.
+  </div>
+  <div style="width:30%;float:left;overflow:auto; height:100pt;background:#aff;" >
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+aliquip ex ea commodo consequat. Duis aute irure dolor in
+reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+culpa qui officia deserunt mollit anim id est laborum.
+  </div>
+
 </div>
   </body>
 </html>