Webbutveckling med HTML och CSS

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.