file browser

css/e16LayoutStatic.php

<html>
 <head>
 <!-- ohne den Viewport bekomme ich auch auf dem Handy viel zu viele Pixel -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"/>
  <title><?php echo baseName(__file__); ?></title>
    <style type="text/css">
             /* Kommentare in css mit ungeschachtelten slash star nicht <!-- ....  in inline css braucht es aber */
    body  { margin: 0; }
    header, main, cont, side, footer {display: block; border-style:solid; border-color:red; border-width: 3px;
         }
    header, main { width: calc(100vw - 6px); } 
    cont {background-color: lightgreen; }
    side { background-color: yellow; }
    cont, side { padding: 10px; }
    header, footer { overflow:hidden; height:30px; background-color: #bbf; }
    main { height: calc(100vh - 39px); border-top-width: 0; background-color: lightgreen; overflow: auto; }
    cont {border: 0;}
    side, footer {border-width: 3px 0 0px 0;  }
    #side, #foot { position: fixed; top: -9999px;}
    #side:checked ~ * side { position: fixed; top:36px; bottom: 0px; left: 0; width: 150px; border-width: 0 3px 3px 3px; overflow: auto;}
    #side:checked ~   main { margin-left: 176px; border-left-width: 0; width: calc(100vw - 179px ); }
    #foot:checked ~ * footer { position: fixed; bottom: 0px; left: 0px; right: 0; border-width: 0 3px 3px 3px;}
    #foot:checked ~ * side { bottom: 33px; }
    #foot:checked ~  main {height: calc(100vh - 72px);  }

/*
    #hdrF { display: none; position: fixed; background-color: #bbf;     
            border-style:solid; border-color:red; border-width: 0;}
    #radio { display: block; top:1.5mm; position: fixed; right: 5mm;  z-index: 3; background-color: #99e; color: #00f; padding: 0 1em;}
    footer span { position: relative;   top: 2mm; left: 1em;}
    .cSide {border-style:solid;border-width: 0;border-color:red;background:yellow; margin: 0; padding: 10px; width: calc(100% - 26px);}
    main {display:block;border-style:solid;border-width:3px;border-color:red;background:green;position:fixed;left:0;right:0;top:8mm;bottom:0; overflow:auto; }
    mainIn {width: 100%; display:block; padding: 1em; }
    footer, .cSide { display: block; position: static; border-width: 3px 0 0 0; }
@media only screen and (min-width: 90mm) {
    #hdrF { display: block; top:1.5mm; left: 45mm; }
}
@media only screen and (min-width: 450px) {
    .cSide {position:fixed;left:0;width:150px;top:8mm;bottom:0mm; overflow:auto; border-width: 3px;  }
    main {width: calc( 100% - 179px ); left: 173px;}
}
@media only screen and (min-height: 100mm) {
    footer { display: block; position: fixed; bottom:0mm; left:0; right:0; border-width: 3px;}
    .cSide, main {bottom:8mm; }
}
#raTe {background-color: yellow;}

#mNo, #mSide, #mHdr {display: block; position:fixed; top: -999mm; } 
#mSide:checked ~  * .cSide {   
  display: block; position: fixed; top: 15mm; left:30mm; padding: 1em; z-index: 2;
    max-width: calc(100vw - 40mm); width: unset; border-width: 3px; padding: 1em; overflow: auto;
}
#mHdr:checked ~ * #hdrF {   
    display: block; top: 15mm; left:30mm; padding: 1em; border-width:3; z-index: 2;
}
#mSide:checked ~ * #raTe { background-color: red; }
#mHdr:checked ~ * #raTe { background-color: purple; }
*/

</style>
 </head>
 <body>
  <input type="checkbox" id="side" value="side"/>
  <input type="checkbox" id="foot" value="foot"/>
 
  <header>
    <img src="e05WiwanniAussicht.jpg" align="left"/> 
    <div style="display: block; float: right;">
        <label for="side">Side</label>
        <label for="foot">Footer</label>
    </div>
    <div id="hdrF">das ist der header drin</div>
  </header>
  <main>
    <cont id="i1">
    hier ist der block main.cont    
      <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>
      <h1 id="i2">Source <?php echo __file__; ?></h1>
        <?php highlight_file(__file__) ?>
        <div id="i3"><a href="#i1">1main</a> * <a href="#i2">2src</a> * <a href="#i3">3end</a> </div>
    </cont>
 <side class="cSide">
 <h1>dies ist block side
 </h1><ol>
 <li> <a href="#i1">1main</a> * <a href="#i2">2src</a> * <a href="#i3">3end</a>
 </li><li> zwei
 </li><li> drei
 </li><li> vier
 </li><li> fuenf
 </li><li> sechs lange lange lange relative position in sidebar li lange lange ende sechs
 </li><li> sieben
 </li><li> acht
 </li><li> neuen
 </li><li> zehn
 </li><li> elf
 </li></ol>
 <a href="#i1">1main</a> * <a href="#i2">2src</a> * <a href="#i3">3end</a>
 </side>
 <footer>
 <span>das ist der footer</span> <img src="e05WiwanniAussicht.jpg" align="right"/>
 </footer>
</main>
</body>
</html>