CSS grunder och layout med DIV

Jag börjar med att skapa en css-fil och sparar den som minstil.css. sedan börjar jag att deklarera taggen <body> och det gör jag i CSS filen; minstil.css
Det finns ingen annan kod i minstil.css

body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #CCCCCC;
background-color: #000000;
}

(denna kod ligger i css-filen)

 Jag valde Geneva till Font
Fontstorlek 13 pixlar
ljus grå färg på Fonten
Bakgrundsfärg; svart

Vi fortsätter med att deklarera taggen <h1> (rubrik 1)

h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: lighter;
color: #CCCCCC;
text-transform: uppercase;
padding-top: 20px;
}

Vi fortsätter med att deklarera taggen <h2> (rubrik 2)

h2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: lighter;
color: #CCCCCC;
letter-spacing: 0.4em;
text-transform: uppercase;
text-align: left;
padding-top: 25px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 20px;
}

(denna kod ligger i css-filen)

 Jag deklarerade rubrik 1 eller taggen <h1> som den heter, och fortsätter med <h2>

NU har jag deklarerat taggen <body> <h1> <2> och länkat min css-fil till mitt html-dokument ; se nedan hur jag länkar min css-fil in i html-filen:

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

så ser det ut i källkoden på html-filen när du länkat in din css-fil. OBS koden ligger i mellan start <head> och slut </head>

 

 

LÄNKAR - Vi deklarerar länkarna så det ser lite snyggt ut

a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
}

a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
}

a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #FFFFCC;
text-decoration: underline;
}

a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
}

(denna kod ligger i css-filen)

 Länken deklareras







Besökt länk deklareras







Mouse over deklareras







Aktiv länk deklareras

Det är viktigt att de 4 länk deklationerna ligger i den ordningen jag gjort annars kan det bli så att "mouse over" funktionen inte fungerar



DIV-att skapa en layout

Deklarera en DIV (box) i din css-fil

Koden i css-filen

#enbox {
width: 400px;
height: 200px;
}

(denna kod ligger i css-filen)
Koden i html koden i mellan taggarna <body> din kod </body>

<div id="enbox">
ditt innehåll i din box/div
</div>

(denna kod ligger i html-filen)

Hur ser det ut? Se EXEMPEL>>>>>>


Vi lägger till en ram i boxen vi nyss skapade (#enbox), det är svårt att se boxen annars, det värden vi angett är brädd; 400 pixlar och höjd 200 pixlar.

Koden i css-filen

#enbox {
width: 400px;
height: 200px;
border: 2px solid #ffffff;
}

(denna kod ligger i css-filen)
Koden i html koden i mellan taggarna <body> din kod </body> <div id="enbox">
ditt innehåll i din box/div
</div>

Hur ser det ut? Se EXEMPEL>>>>>>
Vi skapar ytterligare en box/div till
Koden i css-filen

#enbox {
width: 400px;
height: 200px;
border: 2px solid #ffffff;
}

#enbox_b {
width: 400px;
height: 200px;
border: 2px solid #ffffff;
}
Koden i html koden i mellan taggarna <body> din kod </body>

<div id="enbox">
ditt innehåll i din första box/div
</div>

<div id="enbox_b">
ditt innehåll i din andra box/div
</div>

Hur ser det ut? Se EXEMPEL>>>>>>
Vi lägger den andra boxen till höger om den första boxen


Koden i css-filen
lägger till egenskapen, float: left; i #enbox och #enbox_b
- vilket gör att allt kommer till vänster om boxarna

#enbox {
width: 400px;
height: 200px;
border: 2px solid #ffffff;
float: left;
}

#enbox_b {
width: 400px;
height: 200px;
border: 2px solid #ffffff;
float: left;
}
Koden i html koden i mellan taggarna <body> din kod </body>

<div id="enbox">
ditt innehåll i din första box/div
</div>

<div id="enbox_b">
ditt innehåll i din andra box/div
</div>

Hur ser det ut? Se EXEMPEL>>>>>>

Att göra en Layout med DIV


Koden i css-filen
VI börjar med en ytter continer som håller allt på plats, i den lägger vi sedan de andra DIV;arn.
jag centrerar boxen med margin-left: auto; och margin-right: auto;

#ybercontiner {
width: 700px;
height: 600px;
margin-left: auto;
margin-right: auto;
border: 2px solid #333333;
}
Koden i html koden i mellan taggarna <body> din kod </body>

<div id="ybercontiner">
innehåll här
</div>

Hur ser det ut? Se EXEMPEL>>>>>>


STEG 2

Koden i css-filen
VI börjar med en ytter continer som håller allt på plats, i den lägger vi sedan de andra DIV;arn.
jag centrerar boxen med margin-left: auto; och margin-right: auto;

jag lägger till en box som en banner överst på sidan, jag lade till bakgrundsfärg på den så det syns att den ligger på plats .

jag har nu deklarerat två boxar

#ybercontiner {
width: 700px;
height: 600px;
margin-left: auto;
margin-right: auto;
border: 2px solid #333333;
}

#banner {
width: 700px;
height: 100px;
background-color: #0000FF
}

Koden i html koden i mellan taggarna <body> din kod </body>

Det är bra att strukurera sin kod så man ser vilka div taggar som hör till vilka, använd tab och gör din kod lätt att förstå

<div id="ybercontiner">


<div id="banner">


din banner /tex / rubrik här


</div>


</div>


Hur ser det ut? Se EXEMPEL>>>>>>

STEG 3

Koden i css-filen
VI börjar med en ytter continer som håller allt på plats, i den lägger vi sedan de andra DIV;arn.
jag centrerar boxen med margin-left: auto; och margin-right: auto;

jag lägger till en box som en banner överst på sidan, jag lade till bakgrundsfärg på den så det syns att den ligger på plats .

jag har nu deklarerat två boxar

jag lägger till två boxar till en kolumn till vänster och en till höger, de ligger båda i #ybercontiner men under #banner

#ybercontiner {
width: 700px;
height: 600px;
margin-left: auto;
margin-right: auto;
border: 2px solid #333333;
}

#banner {
width: 700px;
height: 100px;
background-color: #0000FF
}

#leftkolumn {
width: 140px;
height: 490px;
padding: 5px;
background-color: #009999;
float: left;
}

#rightkolumn {
width: 540px;
height: 490px;
padding: 5px;
background-color:#00CC66;
float: left;
}

Koden i html koden i mellan taggarna <body> din kod </body>

Det är bra att strukurera sin kod så man ser vilka div taggar som hör till vilka, använd tab och gör din kod lätt att förstå

Jag färgade de DIVar som hör i hop med varandra så det skulle vara lätt att förstå.

Du kan så klart lägga till fler egenskaper till dina boxar och lägga till fler boxar med om du vill, det är bara att bygga vidare.

<div id="ybercontiner">


<div id="banner">


din banner här


</div>


<div id="leftkolumn">


länkar mm


</div>


<div id="rightkolumn">


huvud innehåll


</div>


</div>

Hur ser det ut? Se EXEMPEL>>>>>>


Slutligen hur ser den kod ut som jag använt mig av;

Koden i css-filen


@charset "utf-8";
/* detta är en kommetar i min css-fil 2008-10-12 */

body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #CCCCCC;
background-color: #000000;
}

h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: lighter;
color: #CCCCCC;
text-transform: uppercase; /* gör om små bokstäver till stora bokstäver */
padding-top: 20px;
}

h2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: lighter;
color: #CCCCCC;
letter-spacing: 0.4em; /* gör mellanrum mellan bokstäverna */
text-transform: uppercase; /* gör om små bokstäver till stora bokstäver */
text-align: left;
padding-top: 25px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 20px;
}

a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
}

a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
}
a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #FFFFCC;
text-decoration: underline;
}
a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
}

Koden i html-filen


de färgade DiV;arna
hör i hop.
Det är bra att strukurera sin kod så man ser vilka div taggar som hör till vilka, använd tab och gör din kod lätt att förstå

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tullangen.se - CSS grunder</title>
<link href="minstil1.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="ybercontiner">
<div id="banner">
din banner här
</div>
<div id="leftkolumn">
länkar mm
</div>
<div id="rightkolumn">
huvud innehåll
</div>
</div>

</body>

 

</html>

 







Exempel på en layout med div / Kennet Dyrvik 2008-11-05