TABLE+ vecs un pārbaudīts paņēmiens, darbojas visos pārlūkos
+ vienkāršs un saprotams pie salikšanas (loģiska struktūra)
+ Piemīt iespējas, pagaidām nepieejamas DIV`iem- Neiespējami noskaņošanu pilnībā pārnest uz CSS
- Liels daudzums lieka kodaDIV
+ nepārslogo lapas kodu, ļauj to izveidot skaistu
+ ļauj izvadīt informāciju jebkurā lapas vietā, neatkarīgi no tās atrašanās lapas kodā
+ visa vadība notiek no stilu (CSS) faila- Dažādi pārlūki uztver diezgan kaprīzi
- Ir daudz būtisku trūkumu, kaut vai vertikālās centrēšanas nepieejamība
Iznāca 50/50. Tad nu šoreiz apskatīsim piemēros lapas salikšanu ar blokiem, vēl jo vairāk tādēļ, ka tā tomēr jauna tehnoloģija, bet pasaule nestāv uz vietas.
Trīs sleju (kolonnu) DIV salikums
Mēģināsim kopējiem spēkiem, soli pa solim, izveidot 3 sleju lapas salikumu ar blokiem. Sākam veidot jaunu dokumentu, izmantojot NOTEPAD (vai citu vienkāršu redaktoru) un ierakstām tur lapas pamata parametrus:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<style>
</style>
</body>
</html>
Tagad mums jāizdomā, kādi bloki mums būs vajadzīgi:
- Hīders (mūsu šablona "galviņa")
- Vrappers ("ietverošais" bloks - tajā tiks ievietoti visi pārējie bloki)
- Konteiners (šajā blokā ievietosim lapas kreiso, centrālo un labo blokus)
- Kreisais bloks (kreisā sleja)
- Centrālais bloks (vidējā (centrālā) sleja)
- Labais bloks (labā sleja)
- Fūters (mūsu šablona noslēdzošais bloks)
Šobrīd pietiks. Tagad izvietosim blokus mūsu lapā. Sākumā izveidosim Vrapperi un tūlīt zem tā Fūteri, pēc tam Vrapperī ievietosim Hīderi un tūlīt zem tā - Konteineri, kurā savukārt ievietosim visu 3 kolonnu blokus:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#header {height:100px;}
#container {min-width:800px;} <!-- norādām minimālo platumu -->
#center {margin:0px 200px 0px 200px;}
#left {float:left; width:200px;}
#right {float:right; width:200px;}
#footer {height:100px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Šīs problēmas risinājumam mums pašā bloka "Konteiners" apakšā jāpievieno vēl viens tukšs bloks ar parametru clear:both; pēc tam Konteiners stiepsies līdzi atkarībā no pievienotā satura slejās:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#header {height:100px;}
#container {min-width:800px;} <!-- norādām minimālo platumu -->
#center {margin:0px 200px 0px 200px;}
#left {float:left; width:200px;}
#right {float:right; width:200px;}
#footer {height:100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
<div class="clear"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
"Pielīmējam" Fūteri ekrāna apakšējai daļai
Bieži vien, kad lapā vēl ir maz materiāla, zem Fūtera izveidojas nesmuks tukšums, kas var pilnībā sabojāt dizainu. Lai no tā izvairītos, pirmkārt mums jāpiešķir pamata blokam augstums 100% attiecībā pret pārlūka loga augstumu, bet pēc tam pārvietot to uz augšu kopā ar Fūteri par Fūtera platuma(augstuma) daļu, kura mums precīzi jāzin.
Sākumā uzstādīsim Vrappera (id=wrapper) 100% augstumu :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/* uzstādām 100% augstumu */
html, body {height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;}
/* -- -- */
#header {height:100px;}
#container {min-width:800px;} /* norādām minimālo platumu */
#center {margin:0px 200px 0px 200px;}
#left {float:left; width:200px;}
#right {float:right; width:200px;}
#footer {height:100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
<div class="clear"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body {height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;}
#header {height:100px;}
#container {min-width:800px;} /* norādām minimālo platumu */
#center {margin:0px 200px 0px 200px;}
#left {float:left; width:200px;}
#right {float:right; width:200px;}
#footer {height:100px;margin-top:-100px;} /* pievienojam atkāpi */
.clear {clear:both;}
#space {height:100px;} /* atdalītāja stils */
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
<div class="clear"></div>
<div id="space"></div> <!-- div-atdalīšana -->
</div>
</div>
<div id="footer"></div>
</body>
</html>
