Webbteknik 1 - Laboration L5b

Med egenskapen float kan man få ett element att "flyta" intill ett annat. Det kan användas på lite olika sätt, som du kommer att se i denna laboration. En annan egenskap som då kan behövas är clear, för att "trycka" ner det som ska komma under de element som ska ligga intill varandra.

2 min.

Förberedelser

Öppna mappen L5b i Visual Studio Code (VSC).
Öppna filerna index.html och style.css i VSC och öppna sidan i Live Server.
Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.

Bild till vänster eller höger

Lägg till en regel för #fig1 med float: left;
- Bilden hamnar då till vänster om det som kommer efter i HTML-koden.
I regeln för #fig1 lägger du till margin: 0 15px 15px 0; eller annan önskad marginal.
- Då fyra värden anges är ordningen top, right, bottom och left.
Ta fram Inspektören i Firefox och peka på img-elementet i koden. Kontrollera att du fått in önskad marginal (visas med gul färg kring bilden).
Ta bort kommentartecknen kring det andra img-elementet i HTML-filen, så att bilden visas på sidan.
Skriv en regel för #fig2 med float: right; och margin: 0 0 15px 15px;

Användning av clear

Du ska nu trycka ner rubriken i texten, så den hamnar under bilderna.

Lägg in attributet class="pushdown" i h2-elementet i HTML-koden.
Skriv en regel i CSS-koden för .pushdown med clear: left;
- Rubriken och efterföljande text hamnar då under den vänstra bilden, dvs då det är "klart i vänsterkanten".
Ändra till clear: right;
- Rubriken trycks då ner tills det är "klart i högerkanten".
- Om man inte vet om det som ligger ovanför är till vänster eller höger, kan man istället använda both, för att ange att det ska vara "klart både i vänster- och högerkanten".
Ändra till clear: both;
Prova nu att ändra så att den första bilden flyter till höger och den andra till vänster.

Klar

Gå nu vidare med föreläsning F5c och därefter laboration L5c.