Skapa layouten med CSS

Du har redan tittat på hur man kan använda CSS för att styra utseendet på bland annat text och bild på en webbsida. Detta är inte det enda du kan använda dina stilmallar till. CSS passar också utmärkt för att bestämma var på sidan olika element ska placeras. Något man tidigare, i stor utsträckning, använde tabeller till.

Om du någon gång kommit/kommer i kontakt med en äldre sida, med nästlade tabeller, inser du snabbt fördelen med att göra layouten med CSS-boxar och lager. För att förstå och kunna använda CSS för layout av webbsidor är det bra att känna till ”CSS box-konceptet” som beskriver hur olika element förhåller sig till varandra.

Box-modellen CSS.

Varje box, (X)HTML-element, har ett utrymme för innehåll. Det kan vara text, bild eller något annat. Du kan sedan välja om innehållet ska ha en padding, en ramlinje eller vara placerad på ett visst avstånd från marginalen. Det är i stilmallen du bestämmer värdena. Padding,  border (ramlinje) och margin kan sedan i sin tur delas upp i top, right, bottom och left.

I stilmallen kan en ramlinje anges på följande sätt:

p {
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
}

Hur styr man placering av olika element?

Det element som ofta används för layout av webbsidor är div-elementet som delar upp en sida i olika avsnitt (divisions). Ett vanligt sätt att använda det här elementet är att göra en avdelning som innehåller allt som ska vara i sidhuvudet på webbsidan, till exempel logotyp, bild och meny. I en annan avdelning har man det huvudsakliga innehållet och i en tredje sidfoten. Hur man delar upp allting beror förstås på innehållet och kan variera!

<div id=”header”>All uppmärknings som hör till sidhuvudet.</div>
<div id=”main”>All uppmärkning som hör till det huvudsakliga innehållet. Kanske ligger det fler div-element här.</div>
<div id=”footer”>All uppmärkning som hör till sidfoten, exempel kan vara kontaktuppgifter.</div>

Ovan ser du att id använts som ett attribut till div-elementen. Det speciella med just id är att det är unikt för sidan och endast används en gång. Vill du skapa en speciell stil som ska användas för flera element, till exempel alla bilder eller rubriker, använder du class.

Om du inte bestämmer någon annat i din stilmall kommer alla element att visas i den ordning som du lagt dem i din XHTML-fil. För att bestämma placering av ett element kan du använda egenskaperna position och float. Med position kan du på pixelnivå bestämma var du vill placera ett element på webbsidan. Du kan till och med lägga element i lager ovanpå varandra.

Den egenskap som anges i stilmallen är position och de värden du då kan ange är:

  • static: Default-värdet om inget anges. Betyder att elementen visas i den ordning de kommer i XHTML-dokumentet.
  • relative: Elementet flyttas i relation till den placering den har i XHTML-dokumentet. Utrymmet den normalt upptar bevaras trots att den flyttas.
  • absolute: Elementet positioneras i relation till ett omgivande element, med utgångspunkt från det övre vänstra hörnet, och flyttas helt ut ifrån dokument-flödet.
  • fixed: Elementet positioneras i relation till webbläsarfönstret och kan på så sätt ligga kvar på samma ställe trots att sidan scrollas.

Exempel på hur det kan se ut i stilmallen:

#viktigt{position: absolute; margin-top: 50px;}

I filmerna nedan visas hur du på olika sätt kan använda positionering.

 

 

Flytande element

Med så kallade flytande element kan du frångå den vanliga ordningen i din XHTML-fil och flytta element genom att använda egenskapen float i stilmallen. Du kan då exempelvis välja att låta en bild flyta till vänster eller höger i ett textstycke. Det är också vanligt att man skapar kolumner med hjälp av egenskapen float.

I filmen nedan visar jag ett enkelt exempel på hur du kan jobba med flytande element.

 

Att arbeta med lager

När man arbetar med CSS-boxar och absolut positionering kan man använda egenskapenz-index för att lägga element ovanpå varandra i en bestämd ordning. Default-värdet är 0 då man inte angivit något z-index. Om man jobbar med Dreamweaver, benämns kombinationen div-element och z-index, lager, vilket är en ganska bra beskrivning av vad det handlar om.

Nedan visar jag hur du kan ändra ordning på olika ”CSS-boxar” med hjälp av z-index.

Leave a Reply