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>

Slutresultat

Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: XHTML (.txt) CSS (.txt)

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)