Table-less hönnun

Í þessari grein ættla ég að setja upp einfalda vefsíðu með hjálp xhtml og css. Ég ættla líka að ganga skrefinu leingra og hafa hana án tables. Þessi aðferð hefur verið að riðja sér til rúms undanfarið og hafa nokkur stór vefsvæði eins og Wired.com tekið hana upp. Fyrst þegar ég sá þessa aðferð notaða trúði ég varla því sem var fyrir framan mig. Ég var ekki viss um það þetta mundi ganga upp, ég vill auðvitað hafa allt HTML sem ég geri pixel-perfect og var ekki viss um að ég gæti náð því fram með þessari nýju hönnun, en það er öðru nær. Þetta er bara eintóm snilld þegar málið er skoðað betur.

Þegar ég segja án tables er ég að meina að beinagrind vefsíðunar verðu gerð með <div> layers. Allt sem getur kallast útliti er fært yfir í CSS og því má segja að aðskilnaður útlits og efnis sé fullkomnaður, næstum því :) Töflur verða ennþá notaðar í það sem þeim var upphaflega ættlað að gera, þ.e.a.s að geyma töflulegar upplýsingar.

En hvað græðum við á þessu ? Til að byrja með ætti vefsíðan þín að minka um allt að 50% í skrár stærð og öllu útliti er svo stjórnað úr einni CSS skrá sem spara, þegar allt kemur til alls, heilan helling af downloadi fyrir notandann. Að stjórna útliti á öllu vefsvæði í heild verður líka súper auðvelt.

En það er lángt frá því að vera það eina. Allir sem hafa gert vefsíðu vita hvað það getur verið erfitt að fá hana til að líta eins út í hinum ýmsu vefskoðurum. Margir nota einshverskonar kóða til að beina notandanum á síður eftir hvaða vafra hann notar en margir hreinlega velja að gefa skít í þá sem ekki nota nýjust vafrana. Núna getum við gefið öllum kost á því að nálgast þær upplýsingar sem leitar er eftir og gefið þeim sem nota nýjust vafrana sem styðja XHTML og CSS-1 staðlana sína grafík og fínerí.

Áður en við förum í layoutið á síðunni ættla ég að sýna ykkur hvað gerir okkur þetta kleift. Málið snýst í stuttumáli um að plata alla gamla og böggaða vafra sem fara ekki eftir stöðlum (t.d NS4 ) til að sækji ekki CSS skránna sem við notum fyirr útlitið okkar. Í staðin fá þessir vafra alveg hráa hvíta síðu sem inniheldur samt allt efnið sem á að vera á síðunni, þ.e.a.s. mydnir og texta.

Svona köllum við á CSS skjalið eða stílsíðuna :

<link rel=“StyleSheet” href=“tableless.css” type=“text/css” media=“all” />

Úreltu vafrarni skilja ekki media=”all” attribute-ið og sleppa alveg að skoða CSS skjalið. Til að sjá þetta í action er hægt að verða sér útum t.d NS4 á download.com eða bara að taka vísunin í CSS út í smástund til að sjá síðan á hennar.

Meira um það sama :

http://www.webreference.com/authoring/style/sheets /layout/advanced/
http://www.webmasterbase.com/article /379

Nokkrar síður sem nota table-less hönnun :

http://www.wired.com/
http://www.meryl.net/css/
http://www.elfur.is/
http://www.wrongwaygoback.com/

Svona lítur HTML skjalið okkar þá út :

-

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">

<html>
<head>
<t itle>[table-less]</title>
<meta http-equiv=“content-type” content=“text/html;charset=iso-8859-1” />
<link rel=“StyleSheet” href=“tableless.css” type=“text/css” media=“all” />
</head>

<body>

<div id=“oldbrowser”>Hérna er hægt að setja texta sem gefur þeim notendum sem nota gamla vafra til kynna að þeir þurfi að uppfæra til að sjá dýrðina :)</div>

<div id=“wrap”>

<div id=“head”><h1>Table-less design!</h1></div>

<div id=“menu”>

<a href=“#” class=“menuitem”>Forsíða</a>
<a href=“#” class=“menuitem”>Myndir</a>
<a href=“#” class=“menuitem”>Linkar</a>
<a href=“#” class=“menuitem”>Vinir</a>

</div&gt ;

<div id=“blogg”>

<div class=“bloggitem”>
<div class=“bloggdate”>[10.01.03 - 20:32]</div>
<h2>Ipsum sem ullamcorper</h2>
<p>Cras sit amet magna. Nulla mattis, pede nec venenatis rutrum, ipsum sem ullamcorper leo, a sodales mi mauris non velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec orci. Aliquam ultrices dolor vel dui. Nam massa tortor, dignissim ut, tristique et, pellentesque vel, leo. Duis vulputate libero a orci.</p>
<p>Etiam fermentum, pede ac condimentum mattis, pede purus faucibus mauris, ut accumsan enim diam tincidunt libero. Etiam dui elit, scelerisque quis, lobortis at, bibendum sed, justo. Proin leo neque, lobortis eu, sodales et, adipiscing vitae, ligula. Quisque iaculis, lorem vitae pellentesque rhoncus, quam mauris consequat lacus, vel suscipit diam nibh volutpat ipsum. Sed eget ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac lectus. Vestibulum tempus pede. Nam rhoncus, tellus vel sagittis eleifend, ante tellus aliquam neque, sed placerat lectus nunc eget diam. Pellentesque posuere, est at lacinia tristique, ligula metus semper massa, vitae consectetuer enim nulla mattis sem. Proin wisi odio, rhoncus vel, hendrerit vitae, rutrum eu, odio. Suspendisse euismod venenatis sapien. Suspendisse ultricies, velit eget tristique mattis, libero est tincidunt orci, tristique dictum mi risus id ante. Nam venenatis, turpis et malesuada gravida, wisi neque condimentum lacus, ut interdum ipsum purus a sapien. Curabitur ornare sem id pede. Fusce blandit turpis vitae sapien pretium aliquam. Vestibulum nisl tortor, mollis at, congue in, convallis et, lorem. Pellentesque wisi dui, fermentum ut, rhoncus consequat, aliquet aliquet, enim. Praesent lobortis lorem nec augue. Praesent aliquet mollis nunc.</p>
</div>

<div class=“bloggitem”>
<div class=“bloggdate”>[09.01.03 - 17:03]</div>
<h2>Fusce nonummy bibendum massa</h2>
<p>Fusce nonummy bibendum massa. Duis iaculis, wisi vehicula hendrerit ultricies, dui lectus venenatis nunc, nec pretium diam felis non libero. Cras et velit.</p>
</div>

<div class=“bloggitem”>
<div class=“bloggdate”>[09.01.03 - 15:26]</div>
<h2>Nulla mattis</h2>
<p>Nulla mattis, pede nec venenatis rutrum, ipsum sem ullamcorper leo, a sodales mi mauris non velit.</p>
</div>

</div>

&l t;/div>

</body>
</html>

-

Og svo stílsíðan (tableless.css) :

-

body {
background-color: #333E48;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #fff;
margin: 0px;
}

A {
color: #E02B2B;
}

H1 {
font-size: large;
font-weight: bold;
margin: 0px;
color: #ADB2B6;
}

H2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
margin: 0px;
padding: 0px;
color: #ADB2B6;
}

#center {

}

#wrap {
width: 680px;
margin: 10px;
border: 1px solid #3D4851;
}

#head {
padding: 15px;
background-color: #303B44;
border-bottom: 1px solid #3D4851;
}

#oldbrowser {
display: none;
}

#blogg {
color: #000;
float: right;
border-left: 1px solid #3D4851;
padding: 10px;
}

.bloggitem {
padding: 10px;
background-color: #303B44;
margin-bottom: 1px;
}

.bloggitem P {
text-align: justify;
color: #858B91;
}

.bloggdate {
float: right;
color: #5C656D;
}

.bloggdate A {
text-decoration: none;
}

.divline {
height: 1px;
background-color: #ADB2B6;
overflow: hidden;
}

.divlineblogg {
height: 1px;
background-color: #5C656D;
overflow: hidden;
}

/* MENU */

#menu {
padding: 10px;
width: 150px;
float: left;
}

.menuitem {
display: block;
border-bottom: 1px solid #333E48;
background-color: #ADB2B6;
text-decoration: none;
font-weight: bold;
color: #333E48;
padding: 5px;
}

.menuitem:hover {
display: block;
border-bottom: 1px solid #333E48;
background-color: #fff;
text-decoration: none;
font-weight: bold;
color: #333E48;
padding: 5px;
}

-