Kennets CSS SKOLA
Förklaring och kod-exempel för en layout med DIV
klicka på bilden så ser du hur jag har placerat div:arna
Nedan ser du hur divarna skapas i css-filen och html-filen
Koden i css-filen
@charset "utf-8";
/* CSS Document(detta är en kommentar ) Tullängsskolan 2009 - CSS tips - IT Digital Design */
#ybermorsan {
width: 900px;
height: auto;
overflow: auto;
border: 2px solid #FF6600;
margin-left: auto;
margin-right: auto;
background-color: #000000;
}
#banner {
height: 150px;
width: 100%;
background-color: #dfcd9f;
}
#leftcol {
width: 180px;
height: 550px;
padding: 10px;
float: left;
background-color: #ab925a;
}
#maincol {
width: 480px;
height: 550px;
padding: 10px;
float: left;
background-color: #e1ddd2;
}
#rightcol {
width: 180px;
height: 550px;
padding: 10px;
float: left;
background-color: #d2ae56;
}
Koden i HTML- filen
OBS!! Tänk på att koden nedan skall vara i html-filen och i mellan start-tagg <body> och slut-tagg </body>
<body>
<div id="ybermorsan"> <!-- här börjar ybermorsan och den håller de andra divarna på plats -->
<div id="banner"><!-- Bär börjar diven banner, som ligger inuti ybermorsan -->
Banner</div><!-- Slut Banner -->
<div id="leftcol"> <!-- här börjar leftcol, som ligger inuti ybermorsan -->
Länkar eller något mer</div> <!-- slut leftcol -->
<div id="maincol"> <!-- här börjar maincol, som ligger inuti ybermorsan -->
huvudinehåll på din sida placeras här
</div> <!-- slut maincol -->
<div id="rightcol"> <!-- här börjar rightcol, som ligger inuti ybermorsan -->
den högra kolumnen kan du ha till något kul
</div> <!-- slut rightcol -->
</div><!-- Slut ybermorsan -->
</body>
En Övning av Kennet Dyrvik - www.tullangen.se - 2009-11-23