Positionering och Formatering med CSS

I förra artikeln strukturerade vi upp din startsida med div och id. I den här artikeln visar jag dig hur du gör för att positionera och formatera dessa områden med CSS.

Grundformatering och formatering av wrapper

Öppna CSS-filen som du jobbat med tidigare

Lägg till följande kod till CSS-filen på en ny rad:

div#wrapper {width: 750px;}

Denna kod betyder att div-elementet med namnet wrapper ska ha bredden 750pixlar.

Vi vill själva webbsidan i webbläsarfönstret och lägger därför till följande CSS-kod:

div#wrapper {width: 750px; margin-left: auto; margin-right: auto;}

Du kan även enkelt lägga till en toppmarginal och bottenmarginal.
Addera därförföljande kod:

div#wrapper {width: 750px; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px;}

Förkortning

CSS-kod kan ibland förkortas och marginalerna är ett exempel på det. Om du vill kan du förkorta dessa till:

margin: 30px auto 30px auto;

Dessa läses i ordningen, toppmarginal, högermarginal, bottenmarginal, väntermarginal. Separera inte dessa värden med semikolon.

Genom att förkorta CSS-koden underlättar du läsningen av den för både dig själv och för webbläsare. För webbläsare innebär det att laddningstiden för dina webbsidor blir kortare.

Nu bör din CSS-kod för wrappern se ut enligt följande:

div#wrapper {width: 750px; margin: 30px auto 30px auto;}

Sidhuvud

Vi kommer nu att göra en enkel formateringen av sidhuvudet. Eftersom vi vill att länkar eller text som skrivs i sidhuvudet ska tangera en eventuell kantlinje så bör du använda dig av padding som skapar ett avstånd mellan textmassa och kant.

Vi struntar i marginaler den här gången och skriver därför in följande kod på en ny rad i CSS-filen:

div#sidhuvud { margin: 0; padding: 20px; }

Nu undrar du kanske varför jag inte skrev margin-top, margin-left eller liknande som jag gjorde i exemplet för wrappern här ovanför. Svaret är enkelt: Om vi vill att både top, right, bottom och left ska ha samma värde så kan vi förkorta det genom att bara skriva in ett enda värde för den valda egenskapen.

Huvudtext

Låt säga att du är intresserad av att skapa ett avstånd mellan sidhuvudet och huvudtexten. För att skapa detta avstånd så bör du använda dig av en toppmarginal. Padding är också bra att lägga in så att texten får lite luft om du senare bestämmer dig för att lägga in en kantlinje runt huvudtexten.

Skriv alltså in detta på en ny rad i CSS-filen:

div#huvudtext { margin: 50px 0 0 0; padding: 20px ;}

Sidfot

Nu bör du fått grepp om hur du gör de mest grundläggande inställningarna för div-elementen. Sidfoten kan du egentligen lämna för tillfället och formatera senare.

Men, du kanske vill lägga in din kontaktinformation i sidfoten iallafall? Antagligen blir det snyggast om du centrerar texten, så på en ny rad i CSS-filen lägger du in:

div#sidfot { text-align: center; }