Sidlayout

Det finns många sätt att göra den övergripande layouten till en sida och det finns väl egentligen inga sätt som är "fel". Vanligtvis har sidor en header, en footer och minst två kolumner. Det är vanligt att det förutom dessa delar också finns en horisontell navigeringsdel. Med kolumner så menas vertikala indelningar som ligger vid sidan om varandra. Denna sida har t.ex. en footer, en header, en vertikal navigering och en eller flera artiklar. Den är ju ganska simplistiskt och lättöverskådlig (med meningen).

Innan exempel på olika typer av layout så skall jag gå igenom några sätt som behöver användas för att faktiskt skapa layouts. Det går som tidigare nämnt att faktiskt göra layouts med table element men detta är ett dåligt sätt att göra det på. Table är till för att ställa upp information och inte sköta design.

Ett viktigt attribut för layouts är position. Med detta attribut så anger man hur webläsaren ska hantera element i det normala flödet på en sida. Standardvärdet är static och det betyder att elementet rättar in sig i det normala flödet för sidan. Absolute är att elementet ignorerar flödet och lägger sig realtivt till det första icke-statiska fäderneelement. Detta kan medföra att detta element hamnar ovanför andra element. Fixed är att elementet är fixerat efter webläsarens viewport. Med viewport menas den del av webläsaren där man ser själva innehållet. Fixed gör då att element alltid kommer ligga synligt om det är synligt från början. Alltså om ett element ligger i övre högra hörnet så kommer det ligga kvar där även efter att man scrollar ner. Relative är att ett element ligger relativt till sin normala position. Med normala position menas den statiska positionen elementet borde få. Om man inte anger något ytterligare värde kommer elementet få samma position som med static. För att ange dessa värden så finns attributen: top, right, bottom, left. Dessa tar ett värde i form av en vanlig enhet. De fungerar bara om ett element har absolut eller relativ position och de fungerar lite annorlunda beroende på vilken av dessa som används. När positionen är relativ som betyder dessa värden att elementet "flyttas" med så många enheter i den riktningen man valt. Dock så flyttas inte elementet egentligen utan det tar upp plats på sin orginalposition, det ser bara ut som det har flyttat sig. När man använder dessa attribut för en absolut position så betyder det att man flyttar elementet så många enheter från den kant man valt. Det fungerar väldigt mycket som margin med det undantag att elementets egentliga storlek inte växer.

Float är som tidigare nämnt till för att flytta ett element åt antingen höger eller vänster. Om vi anger float:left; så kommer elementet flyttas till vänster så långt det kan inom föräldra elementet. Innehållet på sidan fortsätter dock att flöda vid sidan av detta element. Om mer än ett element har float åt samma håll så lägger de sig vid sidan om varandra, med det första elementet i HTML koden längst till vänster o.s.v. Om ett element inte får plats brevid ett annat så lägger det sig under och så långt ut till den valda riktningen som möjligt. Om man inte vill att följande element ska flöda vid sidan av det element som har ett float attribut använder man sig av attributet clear. Detta tar värden i form av right, left eller both. Vad dessa då gör är att den ser till att elementet inte har något element vid sidan av sig i den riktningen man valt. Med both menas då både left och right och detta gör att det valda elementet alltid kommer att hamna på en ny rad.

z-index är precis vad det låter som. Det är ett värde som anger "höjden" på element. En hemsida är ju i 2-D så det kan te sig lite annorlunda men vad detta attribut gör då är att bestämma vilka element som ska synas om de ligger "över" varandra. Ett högre värde gör att det ligger "högre" upp och det högsta värdet är det som syns. Detta fungerar bara om man angivit position för elementet (alltså absolute, fixed eller relative).

För att ange storleken på element så finns de vanliga enheterna att tillgå och attributen man gör detta med är width och height. De gör precis vad de låter som att de ska göra. Utöver dessa finns det min- och max- prefixer (alltså min-width eller max- height, o.s.v.) som gör precis vad de låter som också. Anger man min-width så kommer elementet alltid ha minst denna bredd. Om innehållet inte passar in så växer det precis som om man inte angett ett värde alls. Max-width fungerar på ungefär samma sätt bara bakvänt. Elementet växer beroende på innehåll tills det når max-width och då slutar det växa.

Vertical-align är ungefär vad det låter som. Det är till för att ange hur ett element ska ligga vertikalt. Det fungerar dock bara på inline element och inte på block element. Man kan t.ex. inte ange att ett <div> element ska ligga i mitten via vertical-align om man inte först angett att detta div element ska vara inline. Det finns en hel del värden till detta attribut och det går att ange direkt i enheter. Följande är ett <span> element som har fått vertical-align:text-top; samt en markerad outline och förstorad font.Text-top betyder att elementets top läggs på samma höjd som fontens höjd. Som syns så ligger ju inte texten på samma rad undertill som resten av texten som är brukligt. Den gör också att radavståndet blir större.

Nu kommer tre exempel på sidlayout. De är alla gjorda med en header, tre kolumner och en footer. Detta är ett ganska vanligt sätt att bygga upp en sida på och man får också väldigt mycket valmöjligheter som designer. Det är t.ex. väldigt enkelt att lägga till en horisontell navigeringsmeny. Det som skiljer de olika layouterna är hur de "växer". För att se hur en sidas layout är uppbyggd kan man enkelt bara förstora eller förminska webläsarens fönster. Om ingenting rör sig så är det sannolikt att sidan har en fixerad layout. Detta betyder att de grundläggande elementen har en förbestämd storlek och om man ökar storleken på fönstret så syns bara mer av bakgrunden. Om man minskar fönstret så kommer innehållet inte synas. Exempel finns här. Om man vill att innehållet ska växa eller minska med webläsarens fönster så använder man sig av en flytande layout. Då fyller helt enkelt innehållet upp hela webläsarens viewport och ändrar sin storlek beroende på hur stor just denna viewport är. Exempel finns här. Den sista layouten som det kommer exempel på är en elastisk layout. Med elastisk layout menas att elementen växer beroende på fontstorleken. Detta gör att en elastiskt layout är väldigt bra för folk som behöver ändra på fontstorleken av någon anledning. Sidor med annan layout kan få mindre önskvärt utseende om man gör detta. Exempel finns här.

Skillnaden mellan dessa layouter är ganska uppenbar om man testar lite. Det finns en väldigt central del som skiljer dessa åt och det är valet av enheter för storlek. I en fixerad layout använder man helt enkelt en absolut enhet. I en flytande så använder man sig av procent. I en elastisk använder man sig av den relativa enheten em, som ju är ett mått på storleken för font. När man använder sig av relativa enheter ska man tänka på att dessa alltid är relativa till ens förälder. Om man t.ex. har två stycken <div> element, ett inom det andra. Det yttre har en width på 50% vilket betyder att det kommer sträcka sig till hälften av webläsarfönstret. Om man sedan vill att det inre div elementet ska vara 1/4 av sidans totala bredd så anger man width 50% igen. Detta för att värdet är relativt till föräldervärdet och 50% av 50% blir ju 25%. Om detta div element dock skulle ligga efter det första div elementet och inte inne i det skulle man ange width 25% för att få det att sträcka sig 1/4 av webläsarens bredd.

Förutom självbyggda kolumner så finns det faktiskt CSS attrobut som heter column. Detta gör att ett element helt enkelt delas in i kolumner (antalet anges med column-count). Det finns en hel del attribut för detta men jag kommer visa två: columnt-count och column-width. Följande paragraf har column-count satt till 5 och column-width till 100px. Texten är skrivet flytande och läggs helt enkelt bara i en ny kolumn när platsen tagit slut.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

I skrivande stund har Internet Explorer stöd för detta och Firefox, Chrome och Safari kräver prefix för att det ska funka.