Normal flyt & float

Hvis vi ikkje bestemmer det annleis, vil alle html-element følgja kvarandre i den rekkefølgen dei kjem i dokumentet. Og alle element vil leggja seg så langt til venstre som det er mulig. Teksten inne i et avsnitt vil pakka seg til venstre heilt til det ikkje er plass lenger, og så laga linjeskift. Men vi kan også framtvinga enkelt linjsekift med <br>-taggen eller begynna nytt avsnitt med <p>.Dette er det som kallast normal flyt i eit html-dokument, og det er slik nettlesaren din viser ting når du ikkje har bedt den gjera noko anna. Ein del element, som feks. <b>, <a>, <img>, og det nyttige <span> er det som kallast for inline-element. Det betyr at dei ikkje får ei linje over seg. Dei er altså "inne i linja". Andre element som <h1>, <p>, <ul>, <table> og <div> får normalt ei linje både før og etter seg. Disse kallast for block level element, og du kan lesa meir om det på w3schools. div-elementet er nyttig ma. fordi vi kan spesifiera bredde og høyde. Vi kan derfor bruka det som ein container eller boks som innheld andre element, og som vi kan posisjonera på sida slik vi vil.

Bilde og tekst i normal flyt:

La oss sjå litt på korleis bilder oppfører seg ved normal flyt.

Eit bilde er som sagt eit inline-element. Det betyr det vil havna rett etter teksten alternativ tekst

og teksten som kjem deretter vil fremdeles komma på samme linje så lenge det er plass. For å få det penare kan vi jo ta linjeskift vha <br> eller <p> slik at det blir luft mellom tekst og bilde. Resultatet er slik

Her er nytt avsnitt med litt tekst, og så kjem bildet:

Så kjem eit nytt avsnitt. Vi ser at det er luft både over og under bilder. Men det er kanskje ikkje akkurat slik vi vil ha det heller. Ofte vil vi la teksten flyta rundt bildet. Då må vi ta bildet ut av den normale flyten vha stilen float. Les meir om float på w3schools.

Float

I avsnittet nedanfor har eg laga same bildet med style float:right. Resultatet er at bildet legg seg til høgre og teksten tilpassar seg bildet:

Irony fashion axe banh mi, blog Tumblr sartorial bicycle rights drinking vinegar. Sustainable blog Odd Future, irony trust fund iPhone swag. Occupy lo-fi kitsch, Banksy hoodie try-hard meggings irony distillery. Try-hard biodiesel chillwave bicycle rights, paleo stumptown sriracha YOLO letterpress fingerstache twee Tonx Shoreditch. Wes Anderson occupy iPhone, four loko organic +1 hoodie 8-bit photo booth Austin seitan. Chia direct trade meggings PBR&B, pop-up kitsch Truffaut biodiesel mustache keytar cray lomo VHS organic typewriter. Occupy vegan leggings put a bird on it.

Schlitz mumblecore bicycle rights, Intelligentsia twee pork belly hella. Gastropub Schlitz bespoke direct trade gluten-free. Flexitarian skateboard four loko, banjo mustache butcher raw denim street art fap bicycle rights iPhone church-key. Food truck small batch shabby chic Thundercats, Schlitz photo booth fixie seitan cray PBR keytar typewriter Portland normcore literally. Actually art party tattooed normcore, gentrify kitsch quinoa sriracha ethnic biodiesel Echo Park jean shorts ethical. Banksy mumblecore McSweeney's farm-to-table tofu distillery trust fund. Keytar jean shorts cray, Williamsburg artisan fingerstache pug wayfarers mumblecore photo booth skateboard letterpress. Squid PBR&B mlkshk, you probably haven't heard of them fingerstache DIY narwhal. Beard trust fund Tumblr 8-bit. Salvia art party jean shorts, gentrify locavore Cosby sweater asymmetrical twee iPhone pop-up 90's banjo fashion axe banh mi. Gluten-free Intelligentsia McSweeney's, mumblecore artisan Vice food truck irony flannel. Chambray pour-over Pinterest lo-fi, disrupt semiotics salvia vegan. Keytar flexitarian Marfa chia. Ennui bespoke Portland, +1 mixtape meh Banksy.

På w3schools kan du prøva deg fram korleis dette virkar. Der kan du også lesa om korleis du kan laga bildetekst. vha det nye elementet <figure> som kome med HTML5. Det fins også mange kule måtar å gjera det på. (forklaring her)