Njoo eli kun liikaa tablella tehtyjä sivupohjia näkee, ajattelin tehdä oppaan miten voi tehdä aivan saman diveillä!
Lopputulos:
http://www.shadowpures.com/purediv1. Laitetaan ensin alkuun kaikki "turha" + stylesheet määritykset (tässä oppaassa en käytä ulkoisia stylesheetsejä!)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Div only :)</title>
<style>
.headdiv {
margin-left: auto;
margin-right: auto;
width: 800px;
}
.logodiv {
width: 800px;
height: 120px;
text-align: center;
border: 1px solid black;
background-color: #BBE4C1;
}
.leftdiv {
margin-top: 5px;
width: 195px;
float: left;
border: 1px solid black;
background-color: #BBE4C1;
text-align: center;
}
.rightdiv {
margin-top: 5px;
width: 595px;
float: right;
border: 1px solid black;
background-color: #BBE4C1;
text-align: center;
}
</style>
</head>
2. Seuraavaksi body määritykset ja ensimmäinen div
<body
style="color: rgb(0, 0, 0); background-color: rgb(229, 248, 255);"
alink="#000099" link="#000099" vlink="#990099">
<div class="headdiv">
Headdiv on päädiv joka sisältää sisällään kaikki muut divit (eli logo-, sisältö- ja sivupalkkidivit)
3. Sitten vain lisätään loput divit ja sisältö niihin
<div class="logodiv">
<h1>Otsikko</h1>
</div>
<div class="leftdiv">
<h2>Sivupalkki</h2>
Blablabla...
</div>
<div class="rightdiv">
<h2>Lorem ipsum..</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at
risus eu felis lacinia auctor. Maecenas vitae ligula. Aenean leo.
Praesent sodales suscipit ipsum. Aliquam dui magna, cursus vel,
sagittis nec, scelerisque consequat, mauris. Aliquam tellus. Vestibulum
pede quam, tempus id, bibendum nec, ornare ut, magna. Curabitur dictum
sapien. Nunc commodo. Morbi adipiscing, urna sit amet rutrum imperdiet,
purus pede imperdiet enim, eget faucibus libero dolor a purus. Maecenas
mauris nisl, fermentum faucibus, imperdiet a, lobortis quis, mauris.
Praesent sed justo luctus quam vehicula vehicula. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mauris in magna. Vivamus ut eros nec nisi mollis tristique. Proin
faucibus orci.
Quisque fermentum ligula ut leo. Vivamus tempus arcu vel justo. Nulla
facilisi. Aliquam libero magna, facilisis ultrices, fermentum sodales,
pretium non, nisl. Morbi congue pede a neque. Aliquam ultricies.
Vivamus vel leo. Sed ultricies risus eu ligula. Donec id est. Aenean in
augue vitae eros faucibus tincidunt. Nulla facilisi. Etiam quis dui.
Maecenas quis ligula at arcu condimentum egestas. Aliquam iaculis nulla
et nunc. Curabitur tempus. Ut diam odio, tempus in, volutpat eu, tempus
a, lacus. Mauris pretium, purus egestas cursus lacinia, magna tellus
sagittis purus, ut cursus nibh nisl in felis. Pellentesque adipiscing
arcu rutrum arcu. Integer commodo congue felis.
</div>
Floatin avulla pystymme laittamaan sisältö ja sivupalkki divit vierekkäin
4. Loppuun vielä headdivin päättötagi + normaalit sivun lopetukset
</div>
</body>
</html>
