Kenents CSS SKOLA - Nivå; nybörjare - Del 2

DIV - Att skapa en layout med divar

1. Jag börjar med att skapa en i css-fil i Dreamweaver och sparar den som; minstil2.css
Det finns lite kod i minstil2.css som Dreamweaver lade till när du skapade din css-filen - se nedan hur det ser ut i din css-fil när du skapat den.

@charset "utf-8";
/* CSS Document */

2. Hur ska din layout se ut? jag ritade upp min på ett "papper" för att planera hur jag ska skapa min layout
se min planerings bild>>>

3. Nu börjar vi deklarera divarna till vår layout och det gör vi i css-filen.
Jag kommer att använda div id
Tips! #div id kan bara användas en gång i samma html-sida. men du kan använda samma divar på nästa html-sida du gör, det vill säga att du kan använda samma css-fil till alla dina html-dokument.

Nu börjar vi koda våra divar i css-filen- se nedan!!

@charset "utf-8";
/* CSS Document */

#ybermorsan {
width: 900px;
height: auto;
overflow: auto;
border: 2px solid #999999;
margin-left: auto;
margin-right: auto;
}

#banner {
width: 900px;
height: 150px;
background-image: url(banner_css_skola.jpg);
}

#leftcol {
width: 180px;
height: 550px;
padding: 10px;
float: left;
}

#maincol {
width: 680px;
height: 550px;
padding: 10px;
float: left;
}


4. Nu är divarna klara i css filen. Jag lade in en bakgrundsbild i min banner.
Nu ska vi skriva in koden i vårt HTML-dokument, det vill säga lägga in våra divar vi tidigare deklarerat.
Se nedan hur det ser ut i html-filen. (kom i håg! i mellan taggarna <body> och </body>

5. Men innan du börjar att koda html dokumentet måste du koppla i hop css-filen med html-filen

<link href="minstil2.css" rel="stylesheet" type="text/css" /> (OBS! mellan <head> och </head> taggarna)

TIPS! Dreamweavers layout läge ljuger! När du jobbar med CSS och DIV och vill se hur det ser ut - Titta på sidan i din webläsare (i Dreamweavers layout läge kan det se konstigt ut fast det inte gör det i webläsaren).
Din sida ska se lika bra ut i Firefox som i Internet Explorer (annars har du gjort fel).


<!-- så här skriver man kommentarer i html -->
<div id="ybermorsan"> <!-- start ybermorsan -->
<div id="banner"> <!-- start banner -->
</div> <!-- slut banner -->
<div id="leftcol"> <!-- start leftcol -->
länkar till sidan
</div> <!-- slut leftcol -->
<div id="maincol"> <!-- start maincol -->
Huvudinnehåll i din sida
</div> <!-- slut maincol -->
</div> <!-- slut ybermorsan -->


Se hur det ser ut när den är klar!

GÅ till del 3 i css-skolan

En Övning av Kennet Dyrvik - www.tullangen.se - 2009-11-25