<html>
<head>
<title>e06Box</title>
<style type="text/css">
/* Kommentare in css mit ungeschachtelten slash star nicht <!-- .... */
b1 {display:block;border-style:solid;border-width:medium;border-color:red;background:yellow}
b2 {display:block;border-style:dotted;border-width:medium;border-color:red;background:pink;outline-style:groove}
.c2 { display:block; background-color: #faa; width: 50px; height: 400px}
.c3 { display: block; background-color: #aaf; margin: 0; padding: 0; border: 0;
position:fixed; left: 0; top: 350; width: 1000px;}
.c4 { display: block; width: 400px; white-space: pre; overflow: hidden;
background-color: yellow; padding: 10px;
border: solid #080 10px;
margin: 0px;
outline-offset: 10px; outline: 10px dashed #0f0;
}
.c5 { position: absolute; top:0; right: 0; }
.c6 { position: absolute; bottom:0; right: 0; overflow: scroll;}
</style>
</head>
<body>
<h1> 1 Heading h1 </h1>
<b1> b1 {border-style:solid;border-width:medium;border-color:red;background:yellow}
<br> b1 {border-style:solid;border-width:medium;border-color:red;background:yellow}
</b1>
<h2> 1.1 ein outline ist ein weiterer Rahmen drumherum</h2>
<b2> b2 {border-style:dotted;border-width:medium;border-color:red;background:pink;outline-style:dashed;}
<br> b2 {border-style:dotted;border-width:medium;border-color:red;background:pink;outline-style:dashed;}
</b2>
<h1> positioning </h1>
position absolute uses the first positioned parent as reference<br>
left; top: etc. consider margin, border and padding, but not outline
<div class="c2">
c2 with position static to reserve space
</div>
<div class="c3">
in .c3 { display: block; background-color: #aaf; margin: 0; padding: 0; border: 0;
position:fixed; left: 0; top: 350; width: 1000px;}
<div class="c4">c4 {
display: block;
width: 100px; white-space: pre;
background-color: yellow;
padding: 10px;
border: solid #080 10px;
margin: 10px;
outline-offset: 10px; outline: 10px dashed #0f0;
}</div>
und weiter in c3
<div class="c4 c5">c4 und
.c5 { position: absolute; top:0; right: 0; }
letzte Zeile c5</div>
<div class="c4 c6">c4 und
.c6 { position: absolute; bottom:0; right: 0; overflow: scroll; }
letzte Zeile c6</div>
</div>
<h1>Source html</h1>
<?php highlight_file('e06Box.php') ?>
</body>
</html>