hier ist der block main.cont
1 Heading h1
- 2 verschiedene footer Elemente, überschreiben sich einfach, da in fixed box
- text ohne Positionierung fliesst einfach von oben
- sidebar über class positioniert
Source /home/ch45859/web/wlkl.ch/public_html/inf/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>
