Layout: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
Rad 28: Rad 28:
=== <code>right</code> ===
=== <code>right</code> ===
Precis som ovanstående, fast nu gällandes den högersidan.
Precis som ovanstående, fast nu gällandes den högersidan.
I följande exempel skapar vi tre flytande element som ligger bredvid varandra, dock så puttar vi ner det tredje element på en egen rad med hjälp av <code>clear</code>.
<codepen pen="rrRwoz" tab="css" height="250">
</codepen>


== Problem med layoutflödet ==
== Problem med layoutflödet ==

Versionen från 25 oktober 2016 kl. 10.44

Om du provat att lägga två div-boxar direkt efter varandra, har du säkert märkt att de inte vill ligga på samma rad oavsett hur smala de är. Detta beror på att förvalet för alla box-element är att de ska starta på en egen rad. Detta gör det ju väldigt svårt att få till en bra layout... Turligt nog finns det CSS-egenskaper som kan vara till hjälp här!

Finns många alternativa metoder

Vi ska först gå igenom den klassiska metodiken för att skapa webblayout. Det finns dock modernare och bättre sätt som man kan skapa layout med - främst med flexbox. Vilket är den typ av layout du bör använda för dina egna sidor. Dock är den klassiska float-metodiken så vanligt förekommande att det är ett måste att kunna denna också.

float

Med hjälp av egenskapen float kan vi säga att ett element ska tas ur det "vanliga" layoutflödet och placeras enligt våra önskningar. Förvalet är att float är satt till none, dvs element ska ligga med i det vanliga layoutflödet. Om vi sätter något av de övriga möjliga värdena på float kommer det dock att hända saker.

left

Om vi sätter float till left kommer elementet att förflyttas så långt åt vänster att det antingen hamnar på vänstra kanten av föräldraelementet eller på högra sidan av föregående element som även det har egenskapen float satt till något annat än none. Det vill säga elementen flyter mot vänster sida, så långt de kan tills något "tar emot". När deras föräldraelement blir "fullt" kommer de efterföljande, flytande elementen att hamna en rad neråt. På detta vis kan vi bygga upp en layout som består av flera flytande boxar som ligger bredvid varandra.

I följande exempel skapar vi två element som ligger bredvid varandra på samma rad.

See the Pen jrJwZV by Patrik Grip-Jansson (@PGJ) on CodePen.

right

Detta float-värde fungerar precis som ovanstående, fast istället för att flyta åt vänster så flyter dessa element åt höger.

clear

När vi börjar manipulera layoutflödet med hjälp av flytande boxelement kommer vi snart att hamna i en situation där saker flyter lite mer än man vill. Låt säga att du vill att två boxar ska flyta, men den tredje ska hamna under dem. Om du enbart använder float måste du manipulera de första två boxarnas bredd, så att de "puttar" ned den tredje. Men det finns ett enklare och vettigare sätt att göra detta.

Med hjälp av CSS-egenskapen clear kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.

Man kan ange följande värden för egenskapen.

both

Det får inte förekomma någonting flytande på någon sida av elementet. Elementet förflyttas så långt ner att det ligger "ensamt".

left

Det får inte förekomma något flytande element på vänstra sidan. Elementet flyttas ned så långt att dess vänstra sida är "ren" ifrån andra flytande element.

right

Precis som ovanstående, fast nu gällandes den högersidan.

I följande exempel skapar vi tre flytande element som ligger bredvid varandra, dock så puttar vi ner det tredje element på en egen rad med hjälp av clear.

See the Pen rrRwoz by Patrik Grip-Jansson (@PGJ) on CodePen.

Problem med layoutflödet

Var försiktig med hur du blandar element som flyter med sådana som inte gör det. Det är lätt att man lyckas åstadkomma en situation där element som täcker över varandra. Oftast är det lösbart genom att använda sig av clear-egenskapen. Men man kanske inte alltid märker alla möjliga kombinationer som kan uppstå, speciellt om man gjort en webbsida som ska innehålla dynamiskt innehåll och därför förändrar sig då och då.

Vanligtvis försöker alla blockelement att sätta en storlek som täcker in allt innehåll som finns i dem (om vi inte sätter width eller height explicit vill säga). När vi använder float lyfts dock de flytande elementen ur det normala layoutflödet och därför kommer de inte att räknas som en del av innehållet i föräldraelemetet. Detta kan orsaka en hel del problem. En enkel lösning kan vara att även sätta float på föräldraelementet. Men i många fall varken kan eller vill man göra det. Då måste vi ta till en så kallad "clear fix". Det finns många varianter av denna fix, men om du lägger till följande kod i ditt stylesheet och sedan lägger till klassen clearfix till de blockelement som kräver en fix så bör allt fungera bra.

.clearfix::after { 
   content: "";
   display: block; 
   clear: both;
}

Tyvärr är det rätt vanligt förekommande att man behöver ta till dylika fullösningar för att få till exakt det beteende man är ute efter. Tack och lov blir webbstandarderna allt bättre och det krävs mindre och mindre extraarbete av denna typ.

Nästa aktivitet

Positionering