Bilder, webbsida - Lägga in Bilder på Webbsida

I den här artikeln visar jag hur du lägger in bilder och hur du kan formatera dessa med CSS.

Lägg in en bild

Öppna upp index.html som du jobbar med sedan tidigare. I div-behållaren huvudtext och före första stycket lägger du in följande kod.

<img src="http://www.webbdesigna.se/images/testbild.jpg" alt="Testbild" width="143" height="107"/>

Kanske hade det blivit snyggare om texten flyter kring bilden istället?

Skapa en CSS-class med float och marginaler

För att få detta snyggare så vore det bra om vi kunde få texten att flyta runt bilden och detta kan vi åstadkomma genom att använda CSS float.

1. Börja med att tilldela bilden en egen class. Vi kan kalla den för "floatRight" eftersom bilden kommer att flyta till höger om texten som kommer direkt efter bilden.

Denna kod ska alltså in i din index.html-fil precis innan första stycket:

<img class="floatRight" src="http://www.webbdesigna.se/images/testbild.jpg" alt="Testbild" width="143" height="107"/>

Koden för CSS-klassen som du just skapat lägger du i din CSS-fil:

.floatRight { float: right; margin: 0 0 10px 20px; }

Vi använder oss även av marginaler eftersom vi vill ha ett utrymme mellan bildens vänsta sida samt ett utrymme mellan den undre kanten av bilden och text som kommer att befinna sig nedanför.

Och ja, du gissade rätt. Du kan naturligtvis även använda float: left; om du hellre vill att bilden ska flyta till vänster.

CSS Clear

Bra att veta om du vill att text ska sluta flyta kring en bild och istället lägga sig under bilden är att du kan använda CSS clear.

Antag att stycke 1 skulle vara för kort och att stycke 2 därför också fortsätter att flyta runt bilden även om du vill det. För att förhindra detta och för att för stycke 2 istället ska lägga sig under bilden så kan du lägga till följande inline CSS för stycke 2:

<p style="clear:right;">Stycketext här</p>