das ist der header

dies ist block sidebar

  1. eins
  2. zwei
  3. drei
  4. vier
  5. fuenf
  6. sechs span bRel relative position in sidebar li ende sechs
  7. sieben
  8. acht
  9. neuen
  10. zehn
  11. elf
  12. zwölf
bAbs absolute in sidebar ?
hier ist der block main

1 Heading h1

  1. 2 verschiedene footer Elemente, überschreiben sich einfach, da in fixed box
  2. text ohne Positionierung fliesst einfach von oben
  3. sidebar über class positioniert
span bRel relative position in main und bAbs absolute in main ?

Source /home/ch45859/web/wlkl.ch/public_html/inf/css/e14Layout.php

<html>
 <head>
  <title><?php echo baseName(__file__); ?></title>
    <style type="text/css">
             /* Kommentare in css mit ungeschachtelten slash star nicht <!-- ....  in inline css braucht es aber */
    header{border-style:solid;border-width:medium;border-color:red;display:block;overflow:hidden;position:fixed;top:0;height:8mm;left:0;right:0}
    footer{border-style:solid;border-width:medium;border-color:red;display:block;overflow:hidden;position:fixed;bottom:0mm;height:8mm;left:0;right:0}
    .cSide {display:block;border-style:solid;border-width:medium;border-color:red;background:yellow;position:fixed;left:0;width:20%;top:8mm;bottom:8mm;overflow:auto}
    main {display:block;border-style:solid;border-width:medium;border-color:red;background:green;position:fixed;left:20%;right:0;top:8mm;bottom:8mm;overflow:auto; padding:1em}
    bAbs {display:block;border-style:solid;border-width:medium;background:blue;position:absolute;width:20%;min-width: 3em;right:0;top:8mm;}
    .bRel {display:block;border-style:solid;border-width:medium;background:orange;position:relative;width:50%;left: 33%;}
    </style>
 </head>
 <body>
 <header>
<img src="e05WiwanniAussicht.jpg" align="left"/> das ist der header
 </header>
 <footer>
das ist der footer <img src="e05WiwanniAussicht.jpg" align="right"/>
 </footer>
 <footer>
und noch ein zweiter footer 2?
 </footer>
 <sidebar class="cSide">
 <h1> dies ist block sidebar
 </h1><ol>
 <li> eins
 <li> zwei
 <li> drei
 <li> vier
 <li> fuenf
 <li> sechs <span class="bRel">span bRel relative position in sidebar li</span> ende sechs
 <li> sieben
 <li> acht
 <li> neuen
 <li> zehn
 <li> elf
 <li> zwölf
 </ol>
<bAbs> bAbs absolute in sidebar ?</bAbs>
 </sidebar>
 <main>
 hier ist der block main
    
 <h1> 1 Heading h1 </h1>
<ol>
<li> 2 verschiedene footer Elemente, überschreiben sich einfach, da in fixed box </li>    
<li> text ohne Positionierung fliesst einfach von oben</li>    
<li> sidebar über class positioniert </li>    
</ol>
<span class="bRel">span bRel relative position in main</span>
<bAbs> und bAbs absolute in main ?</bAbs>
 <h1>Source <?php echo __file__; ?></h1>
<?php highlight_file(__file__) ?>
</main>
und noch ein text ausserhalb Positionierung *************************************************
 </body>
</html>
und noch ein text ausserhalb Positionierung *************************************************