Positionering och formatering
CSS för webbsidans huvudelement
I förra artikeln strukturerade du upp din webbsida med div-element och namngav dem sedan med id:n för att kunna skilja dem från varandra. I den här artikeln lär lär du dig att formatera dessa med hjälp av stilmallen som vi skapade tidigare.
Grundformatering och positionering av wrapper
- Öppna CSS-filen som du skapade tidigare.
- För att sätta en fast bredd på wrappern, öppna din CSS-fil och skriv in nedanstående kod. Det spelar ingen roll var i CSS-filen som du lägger in koden så länge som du inte lägger den i en annan CSS-deklaration.
div#wrapper {width: 750px;}
Ovanstående kod betyder, kort och gott, att div-elementet med namnet wrapper ska ha bredden 750pixlar. Syntaxen är enkel och du kommer snabbt att lära dig den när du provar dig fram själv på egen hand.
- Lägg till nedanstående kod efter "width: 750px;" för att sätta en vänster- och högermarginal som justeras automatiskt och centrerar de element som finns inuti wrappern:
margin-left: auto; margin-right: auto;
- Givetvis kan du lägga till en toppmarginal och en bottenmarginal också. Lägg till detta till den tidigare koden för wrappern:
margin-top: 30px; margin-bottom: 30px;
Vid det här laget så bör du ha lärt dig att varje deklaration separeras med ett semikolon.
- Hela koden för div-elementet wrapper bör nu se ut så här:
div#wrapper {width: 750px; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px;}
Koden för marginalerna kan förkortas enligt:
{margin: 30px auto 30px auto;}
På det här sättes underlättas läsningen av koden för webbläsaren - din sida laddas snabbare eftersom koden blir kortare.
När man förkortar så anger man värdena i denna ordning: topp, höger, botten, vänster. Separera inte värdena med semikolon. Denna typ av förkortningar kan även göras för padding, kantlinjer, färg på kantlinjer m.m.
Den färdiga koden i CSS-filen bör, när du har förkortat koden för marginalerna vara:
div#wrapper {width: 750px; margin: 30px auto 30px auto;}
Grundformatering och positionering av sidhuvud
Gör en enkel formatering av sidhuvudet. Antagligen så vill du att texten/länkarna som skrivs i sidhuvudet inte ska tangera kanten om du väljer att lägga in en kantline senare, så du bör använda dig av padding. Någon marginal behövs inte så skriv in detta på en ny rad i CSS-filen :
div#sidhuvud {margin: 0; padding: 20px;}
Koden betyder att div-elementet med ID sidhuvud ska ha alla marginaler 0 och att all padding ska vara 20 pixlar. När du vill att alla element ska formateras på ett likadant sätt så behöver du alltså bara skriva in ett värde, utan att ange om det är topp- höger- botten- eller vänster som ska formateras. Om du istället velata vara lite omständig så skulle du istället kunnat skriva {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;}.
Grundformatering och positionering av huvudtext
Det du förmodligen är mest intresserad av att göra nu är att skapa ett mellanstånd mellan sidhuvudet och huvudtexten, så att allt inte är ihoptryckt på ett och samma ställe. 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;}
Grundformatering och positionering av sidfot
Nu bör du fått grepp om hyur 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;}
Om du är osäker på om du har gjort rätt så kan du ladda ner CSS-koden här och spara den som "css.css" i samma katalog som din webbsida.
Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: HTML (.txt) CSS (.txt)
Nästa artikel: Skapa och formatera stycken och rubriker
