hier ist der block main
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/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>
