Webb 8 – Layouter och floats

En hemsida är uppbygd av olika byggblock. För att få ett flyt som påminner om hur du läser en tidning eller bok vill man lägga ut blocken i ett rutnät. Eftersom olika skärmar har plats med olika mycket innehåll behöver webbläsaren kunna flytta runt materialet som passar med storleken på skärmen.

Det finns några olika system för hur materialet anpassar sig. Det vanligaste är att byggblocken fyller på från vänster till höger med radbrytning när det inte får plats mer i bredd. Vissa element radbryter dock direkt. I vissa fall kan man även välja att placera ut element med exakta koordinater på skärmen.

Element flyttar sig efter bredd på sidan

Display

Det finns alltså olika sorters element. Det styrs med CSS-propertyn display. De vanligaste är block och inline. Ett block radbryter direkt även om det skulle få plats mer medan inline löper på ända ut i kanten. Det finns ett 20-tal andra attribut till display där inline-block också används mycket.

Vill du göra kolumner går det att göra ett enkelt upplägg bara genom att arbeta med display. I sidhuvud och sidfot använder vi block och i kolumnerna använder vi med inline-block enligt följande exempel.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      header,
      footer {
         background-color: skyblue;
      }
      article {
         background-color:antiquewhite;
         display: inline-block;
         width: 49%;
      }
    </style>
  </head>
 <body>
    <header>Sidhuvud med text logo och meny</header>
    <article>Kolumn 1</article>
    <article>Kolumn 2</article>
    <footer>Sidfot med tex kontaktinformation</footer>
  </body>
</html>

Float

Det andra huvudsättet att göra layouter är att använda floats. Mer avancerat men också svårare att förstå. Floats gör att byggblocken flyter fritt antingen åt höger eller vänster. Idén med floats är att du ska kunna lägga bilder höger eller vänster-justerat och låta texten flyta runt. Idag är floats defacto-lösningen för att skapa webblayouter. Ibland är det rätt verktyg men ofta blir det onödigt komplext.

För att flyta något till höger sätter du CSS-propertyn float: right på ett byggblock. Elementet lyfts då ut från det vanliga vänster-till-höger-flödet och flyter istället längst bort till höger mot sin behållare. Det svåra är att element runt omkring oftast påverkas och ibland kan det kännas helt obegripligt.

Precis nedanför våra flytande element kan vi återställa ordningen med CSS-propertyn clear:both;. Då skapas ett radbryt ner till elementet och allt nedanför hanteras som vanligt igen.

Strategi

Bygg dina olika delar en i taget. Testa varje del för mobilanpassning. På så sätt kommer delarna skala rätt oavsett bredd.

Bygg ett block i taget. De flesta delar av din hemsida fungerar oberoende av de andra. Testa alla för mobil och dator.
Bygg ett block (röd, grön, gul) i taget. De flesta delar av din hemsida fungerar oberoende av de andra. Testa alla för mobil och dator.

För att förstå och lära sig göra layouter behöver du experimentera med det. Mycket. Vill ni läsa detaljerna först finns det en väldigt bra genomgång på CSS-Tricks. Börja där och glöm inte kaffet :)

Detta är det viktigaste och svåraste med hela CSS. Nu är du redo att börja bygga riktig webb! 👏 👍 💪 Grattis! Svårare än så här blir det inte :)

Uppgifter

Vill du finns det en floats-exempel-sida om apelsiner att utgå ifrån.

CSS-propertyn – display

  • Placera fem små bilder (max 100 x 100 px) på en HTML-sida. Bilderna lägger sig från vänster till höger på sidan. De byter inte rad förrän raden är full.
  • Placera fem rubriker på en HTML-sida. De fylls på uppifrån och ner. Även om rubrikerna borde få plats bryter de alltid rad.
  • Utforska i Chrome debuggern vilka element som är display: block; och vilka som är display: inline;.
  • Testa att ändra bilderna till display: block; och rubrikerna till display: inline;. Vad händer? Experimentera! Jämför också display: inline-block; :)

Floats

Skapa följande mobilanpassade webblayout. Använd float:left på <nav> & <article>."Infra

  • Testa din layout genom att ändra storlek på webblasarfönstret. När du har en liten (mindre än ca 500 px bred) skärm får du en kolumn. Annars växer den till två.
  • Extrauppgiften när du är färdig är att göra två kolumner i sidfoten. Den ena med kontaktuppgifter och i den andra kan du lägga in valfritt innehåll.

Frågor

  • Vad är skillnaden på display:inline och display:inline-block?