DIV-Übung 2025-01-03


<html>
<head><title>(C) David Vajda - 2025-01-03 - Excersize</title></head>
<body>
<style>
.divblock {
    display: block;
}
.divinline {
    display: inline;
}

.div1 {
    width: 10%;
}
.div2 {
    width: 20%;
}
.div3 {
    width: 50%;
}
</style>

<div class="div1">
<div class="divblock">
aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj
</div>
<div class="divinline">
aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj aljshasdhaljsdadlhadladshajldasdlaldshjhlkasdj

</div>

</div>

&Uuml;bung 2

<style>
.divblock2 {
    display: block;
    width: 10%;
}
.divinline2 {
    display: inline;
    width: 10%;
    background-color: yellow;
}

.div12 {
    width: 10%;
}
.div22 {
    width: 20%;
}
.div32 {
    width: 50%;
}
</style>
<div class="div32">
<div class="divblock2">
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
</div>
<div class="divinline2">
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
</div>
</div>
&Uuml;bung

<style>
.div4 {
    position: fixed;
    left: 320px;
    top: 320px;
}
</style>
<div class="div4">
Dies ist position fixed <br>
a sada ahjshd  ahsdasd ha ja
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
</div>
<style>
.div5 {
    position: sticky;
    left: 320px;
    top: 320px;
    background-color: green;
}
</style>
<div class="div5">
Dies ist position sticky <br>
a sada ahjshd  ahsdasd ha ja
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
</div>
a sada ahjshd  ahsdasd ha ja
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
a sada ahjshd  ahsdasd ha ja
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
a sada ahjshd  ahsdasd ha ja
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
a sada ahjshd  ahsdasd ha ja
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
a sada ahjshd  ahsdasd ha ja
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
a sada ahjshd  ahsdasd ha ja
a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j a l j s h a s d h a l j s d a d l h a d l a d s h a j l d a s d l a l d s h j h l k a s d j
</body>

<style>
.div6 {
    float: left;
    width: 10%;
}
.div7 {
    float: right;
    width: 10%;
}
.div8 {
    clear: left;
    width: 10%;
}
.div9 {
    clear: right;
    width: 10%;
}
</style>
<div>
<div class="div6">
a a a a a a a a a a a a a a  a a a a a a a  a a a a a a a a a a a a a a a a a a a a a a a a a a a a  a a a a a a a a a a a a a a  a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
</div>
<div class="div7">
b b b b b b b b b b  b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b  b b b b b  b b b b b b b b b b b b b b b  b b b b b  b b b b b b b b b b  b b b b b b b b b b b b b b b  b b b b b  b b b b b b b b b b  b b b b b  b b b b b b b b b b  b b b b b
</div>
<div class="div6">
a a a a a a a a a a a a a a  a a a a a a a  a a a a a a a a a a a a a a a a a a a a a a a a a a a a  a a a a a a a a a a a a a a  a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
</div>
<div class="div7">
b b b b b b b b b b  b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b  b b b b b  b b b b b b b b b b b b b b b  b b b b b  b b b b b b b b b b  b b b b b b b b b b b b b b b  b b b b b  b b b b b b b b b b  b b b b b  b b b b b b b b b b  b b b b b
</div>

<div class="div9">
c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c  c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c  c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c  c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c c
</div>
<div class="div9">
d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d dd d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d dd d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d
</div>
</div>

</html>
Image Screenshot_20250103_044550
Image Screenshot_20250103_045109
Image Screenshot_20250103_045115
Image Screenshot_20250103_045521
Image Screenshot_20250103_045526
Image Screenshot_20250103_050342