Webbteknik 1

Laboration 5B

Flytande element

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.

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