Kenents CSS SKOLA - Nivå; nybörjare - del 1

DIV - Att skapa en layout med divar

1. Jag börjar med att skapa HTML-fil som jag döper till; test.html . Sedan skapar jag en i css-fil i Dreamweaver och sparar den som; minstil.css
Det finns lite kod i minstil.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 . Nu ska vi koppla ihop vår HTML-fil med CSS-filen. (exemplet bygger på att du sparat båda filerna i samma mapp).
Koden nedan skall in mellan start-tagg <head> och slut-tagg </head> i ditt html-dokument.
>>> Se förklarande bild >>>>


<link href="minstil.css" rel="stylesheet" type="text/css" />

Nu är HTML-filen och CSS-filen samman kopplade med varandra, det behöver du bara göra en gång, se bara till att spara båda filerna när du jobbar i dem. Annars kanske det du gjort inte syns, om du inte sprar dina filer innan du förhands granskar din sida i webläsaren.


3. Sedan ska jag skapa diven. jag börjar med att deklarera en div i CSS-filen.
Tips! - den div vi skapar är en #div id och den är unik, det vill säga att den får bara användas en gång per html sida. En #div id får inte börja med en siffra i sitt #namn eller å ä ö.

@charset "utf-8";
/* CSS Document kod i css-fil */

/* CSS kommentar - här börjar deklrationen av #dvien i css filen */
#enbox {
width: 400px;
height: 200px;
background-color: #fb5e5e;
}


<!-- html kommentar - koden nedan skrivs in i html filen -->
<div id="enbox"> <!-- start diven enbox - kod i html filen -->
</div>

Se hur det blev >>>>>>

Tips! för att göra kommentar i CSS - fil /* så här ser en CSS kommentar ut, denna kod läses inte */
Tips! för att göra kommentar i HTML - fil <!-- så här ser en html kommentar ut, denna kod läses inte -->
4. Vi bygger vidare, ja skapar en #div id till och det gör vi i css-filen, minstil.css


/* CSS kommentar - här börjar deklrationen av den andra #dvien i css filen */
#box2 {
width: 400px;
height: 200px;
background-color: #00ff30;
}

fyll på med koden nedan i din html-fil ( fyll på raden under den div du tidigare skrev in)


<!-- html kommentar - koden nedan skrivs in i html filen -->
<div id="box2"> <!-- start diven box2 - kod i html filen -->
</div>

Se hur det blev >>>>>

NU tar jag med all kod (både i html-filen och css-filen)
som jag skrvit och visar den hela tiden i mina exempel




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

#enbox {
width: 400px;
height: 200px;
background-color: #fb5e5e;
}

#box2 {
width: 400px;
height: 200px;
background-color: #00ff30;
}
/* All kod vi gjort i css filen*/


koden nedan i html-filen ( som skall in mellan taggarna <body> och </body>


<!-- html kommentar - koden nedan skrivs in i html filen mellan body taggarna -->
<div id="enbox">
</div>

<div id="box2">
</div>



Ja det var all kod vi gjort hit tills. Vi fortsätter! nu ska vi lägga de båda divarna bredvid varandra i stället, det gör vi med egenskapen, float left


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

#enbox {
width: 400px;
height: 200px;
background-color: #fb5e5e;
float: left;/* jag lade till denna för att divarna ska kunna ligga bredvid varandra */
}

#box2 {
width: 400px;
height: 200px;
background-color: #00ff30;
float: left;/* jag lade till denna för att divarna ska kunna ligga bredvid varandra */
}


Se hur det se ut nu!>>>>

Ja det var lite grundläggande hur divar och css fungerar. Nu är det dax att gå till steg 2 i min css skola

GÅ till del 2 i css-skolan

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