file browser

css/e15LayoutHLMOF.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 */
    htmlxx, bodyxx { width: 100%; }
    header, footer{border-style:solid;border-width:0;border-color:red;background-color: #bbf;
        display: block; overflow:hidden;height:8mm;vertical-align: middle; }
    header { top:0; position: fixed; left: 0; right: 0;  }
    #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="radio" id="mNo" name="menu" value="mNo"checked>
  <input type="radio" id="mSide" name="menu" value="mSide"></input>
  <input type="radio" id="mHdr" name="menu" value="mHdr">
  <div id="radio">
  <label for="mNo">No</label>
  <label for="mSide">Side</label>
  <label for="mHdr">Hdr</label>
</div>
 <header>
<img src="e05WiwanniAussicht.jpg" align="left"/> 
  <div id="hdrF">das ist der header drin</div>

 </header>
 <main><mainIn id="i1">
 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>
<div style="display: none;">
</div>

 <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>
 </mainIn>
 <sidebar class="cSide">
 <h1>dies ist block sidebar
 </h1><ol>
 <li> <a href="#i1">1main</a> * <a href="#i2">2src</a> * <a href="#i3">3end</a>
 <li> zwei
 <li> drei
 <li> vier
 <li> fuenf
 <li> sechs lange lange lange relative position in sidebar li lange lange ende sechs
 <li> sieben
 <li> acht
 <li> neuen
 <li> zehn
 <li> elf
 <li> <a href="#i1">1main</a> * <a href="#i2">2src</a> * <a href="#i3">3end</a>
 </ol>
 </sidebar>
 <footer>
 <span>das ist der footer</span> <img src="e05WiwanniAussicht.jpg" align="right"/>
 </footer>
</main>
</body>
</html>