test
DESCRIPTION
Test test ny nyTRANSCRIPT
Float egenskaben I de følgende 14 øvelser med float egenskaben kan du vælge enten at gemme hver øvelse for sig eller at bygge videre på den første øvelse. I den viste øvelse herunder bygges der videre på den foregående øvelse. – Tjek i browseren efter hver øvelse. Øvelse 1: Opret floatopg.html og floatstyle.css og link stylesheetet til html-dokumentet. Åben floatstyle.css og indskriv følgende: body
{
margin: 20px;
padding: 0;
font-family: verdana, sans-serif;
color: #000;
background-color: #fff;
}
h1 {
font-size: 18px;
}
#box
{
width: 400px;
height: 400px;
border: 1px solid #000;
}
.orange
{
float: left;
width: 100px;
height: 100px;
background-color: #f63;
}
Åben floatopg.html og indskriv følgende: <h1>"float: left" element</h1> <div id="box">
<div class="orange">
</div>
</div>
Øvelse 2: I .orange udskift float: left; med float: right; <h1>"float: left" element</h1> ændres til <h1>"float: right" element</h1>
Øvelse 3: Anvende float: left udgaven fra øvelse 1, og indsæt noget mumletekst i floatopg.html efter den orange box, således: <div class="orange">
</div>
Lorem ipsum dolor…
Øvelse 4: Nu gør du så det samme med float: right udgaven fra øvelse 2:
Øvelse 5: Elementer der ikke floates lægger sig under det foregående element. Åben floatstyle.css og foretag følgende ændringer i .orange:
.orange
{
width: 100px;
height: 100px;
background-color: #f63;
border-bottom: 1px solid #000;
}
Åben floatopg.html og foretag disse ændringer: <body>
<h1>Elementer uden float</h1>
<div id="box">
<div class="orange">1
</div>
<div class="orange">2
</div>
<div class="orange">3
</div>
</div>
</body>
Øvelse 6: Åben floatstyle.css og foretage følgende ændringer: float: left;
border-right: 1px solid #000;
I floatopg.html foretager du kun denne ændring: <h1>Tre elementer med "float: left"</h1>
Øvelse 7: Nu skal du helt på egen hånd lave den samme øvelse, blot med float: right ☺
Øvelse 8: I floatstyle.css fjerner du: border-left: 1px solid #000;
og ændrer float til:
float: left;
og tilføjer classen .sort: .sort {
float: left;
width: 50px;
height: 50px;
background-color: #000;
}
Øvelse 9: Når et element er for bredt til at blive placeret ved siden af et andet element, vil det blive placeret under det foregående element. Klasserne .orange og .sort skal nu se således ud: .orange
{
float: left;
width: 320px;
height: 100px;
background-color: #f63;
}
.sort {
float: left;
width: 100px;
height: 100px;
background-color: #000;
}
I floatopg.html skal overskriften lige ændres til: <h1>Et "for bredt" floated element</h1>
Øvelse 10: For at floate et element skal elementet have en bredde (width). Hvis du undlader at give elementet en bredde, vil elementet fylde, hvad indholdet i elementet fylder. I floatstyle.css fjerner du linjen med width samt klassen .sort. I floatopg.html fjerner du: <div class="sort">
</div>
Og skriver lidt tekst i klassen .orange, som f.eks.: <div class="orange">Tekst
</div>
Øvelse 11: Overskrifter (h1-h6), tekstafsnit (p), lister (ol, ul, li) m. fl. kaldes blokelementer. Lad os se, hvorledes blokelementer og floatede elementer fungerer sammen.
I floatstyle.css tilføjer du igen en bredde: width: 100px;
I floatopg.html indsættes mumleteksten (fra øvelse 3) i et p-tag i #box således: <div id="box">
<p>Lorem ipsum…</p>
<div class="orange">
</div>
</div>
Øvelse 12: Nu placerer du .orange før tekstafsnittet således: <h1>Floated element foran et blokelement</h1>
<div id="box">
<div class="orange"></div>
<p>Lorem ipsum…</p>
</div>
Øvelse 13:
For at forstå hvad et blokelement er, skal du nu tilføje p blokelementet en ramme (border). Det gør du ved at give p tagget en klasse .ramme. Men du ændrer også lige .orange, så du bedre kan se, hvad der sker: .orange
{
float: left;
width: 100px;
height: 100px;
border: 1px solid #f63;
}
p.ramme { border: 5px solid #aaa; }
I floatopg.html tilføjes klassen .ramme: <p class="ramme">
Øvelse 14: Eller hvad med en baggrundsfarve i stedet for..? p.ramme { background-color: #ccc; }
Tillykke, - nu kan du de grundlæggende ting omkring float egenskaben..! ☺ Forbehold for tastefejl..! ☺