At flyde er en af de afgørende CSS-koncepter. Uden forståelse for denne princip er det ikke muligt at opbygge hjemmesider baseret på CSS. Det nye sjove ved at kode er, at du kan forstå det fint ved at overføre det til flydende, hvilket sætter det hele på plads. I sidste ende betyder at flyde faktisk ikke andet, end at et element placerer sig til venstre eller højre for et andet element. (Normalt ville elementet være under et andet element).
Et første eksempel skal tydeliggøre denne aspekt.
<p><img src="billede.jpg" /> Dette sæt indeholder 12 egne former, som I kan bruge i jeres flyer, baggrunde osv. Formerne er opdelt i 18, 21 og 24 striber samt forskellige strålebredder. Disse forudindstillinger er en god base for flotte effekter i jeres layouts og billeder.</p>
Her blev der defineret en afsnit. Inden for denne afsnit er der et billede og almindelig tekst.
En kig på resultatet viser, at billedet er i tekstflowet.
Nu kommer float-egenskaben på banen.
img { float: left;}
Også her en gennemgang af resultatet.
Her blev billedet altså flydet. Teksten flyder derfor omkring billedet.
Man kan tildele egenskaben float værdierne left og right for at lade elementet flyde til venstre (float: left) eller til højre (float: right) "svæve".
I kan også prøve at anvende float: right på billedet.
img {
float: left;
margin-right: 20px;
}
Billedet fik tildelt en højre margin på 20 pixels. Dette resulterer i følgende udseende:
Prøv gerne at eksperimentere lidt med marginene.
At afslutte flydningen
Lad os vende tilbage til billedeksemplet. Jeg udvider syntaksen med en ekstra tekstafsnit.
<p><img src="billede.jpg" />Dette sæt indeholder 12 egne former, som I kan bruge i jeres flyer, baggrunde osv. Formerne er opdelt i 18, 21 og 24 striber samt forskellige strålebredde. Disse forudindstillinger er en god base for flotte effekter i jeres layouts og billeder.</p> <p>Dette sæt indeholder 12 egne former, som I kan bruge i jeres flyer, baggrunde osv. Formerne er opdelt i 18, 21 og 24 striber samt forskellige strålebredde. Disse forudindstillinger er en god base for flotte effekter i jeres layouts og billeder.</p>
Resultatet ser sådan ud:
Faktisk omgiver ikke kun den første afsnit grafikken. Det samme gælder også for det andet tekstafsnit. Det er simpelthen fordi, grafikken rager ned over den første afsnit. For bedre forståelse tildeles jeg bare en baggrundsfarve til afsnit, hvor grafikken er inkluderet.
Når I ser resultatet, bliver det tydeligt, at grafikken faktisk rager ned over afsnittet. Dette er naturligvis ikke altid ønsket på denne måde. På dette punkt bliver clear-egenskaben interessant. For dette kan afslutte flydningen. clear tvinger et efterfølgende element til faktisk at begynde under et flydende element og ikke ved siden af dette. clear-egenskaben kender følgende værdier:
• left – afsluttes float: left
• right – afsluttes float: right
• both – afsluttes både float: right og float: left
I det følgende eksempel tildeler jeg det andet afsnit clear: left for at afslutte flydningen.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="billede.jpg" />Dette sæt indeholder 12 egne former, som I kan bruge i jeres flyer, baggrunde osv. De former er opdelt i 18, 21 og 24 striber samt forskellige strålebredder. Disse forudindstillinger er en god base for flotte effekter i jeres layouts og billeder.</p>
<p style="clear:left;">Dette sæt indeholder 12 egne former, som I kan bruge i jeres flyer, baggrunde osv. Formerne er opdelt i 18, 21 og 24 striber samt forskellige strålebredder. Disse forudindstillinger er en god base for flotte effekter i jeres layouts og billeder.</p>
</body>
</html>
Ved hjælp af den viste syntaks vises den anden afsnit faktisk under billedet.
I de fleste tilfælde kan man i stedet for clear: left eller clear: right bare bruge clear: both. Derfor anbefales det at oprette en tilsvarende klasse i sit stylesheet, som man så kan kalde ved behov.
.clearing {
clear: both;
}
Du kan altid bruge denne klasse, når flydningen af et element skal afsluttes.
<p class="clearing">Indhold ...</p>
Hvad svømningen er god til
Naturligvis er svømningen ikke kun nødvendig for tekstflow i forbindelse med billeder. Faktisk udgør det grundprincippet for CSS-baserede websites. Takket være svømningen kan man f.eks. nemt realisere flerspaltede layouts. Se et eksempel herpå:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Startside</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Her er indholdet af websitet.
</div>
</body>
</html>Her opbygges et tospaltet layout. Det specielle ved det er, at spalterne står ved siden af hinanden.
Og det at stå ved siden af hinanden realiseres gennem konceptet for svømning. Detaljerede oplysninger om opbygning af websites baseret på svømning følger senere i denne serie.
