Redesign inZine do tabless

od autora: ·

[cvičenie] Keby som robil prerábku inZine do tabless (štrukturovaný dokument s CSS layoutom), tak by som zrejme začal s takouto kostrou dokumentu.
Komu sa nevidí to čo vidi: Nepísal som ani riadok CSS predpisu (prakticky nevidím žiadny problém v okopírovaní designu inZine len za pomoci kaskádových štýlov, ak ešte nerozumiete, tak potrebujete vysvetliť čo je to CSS), neurobil som úplný obsah dokumentu úvodnej stránky. Základná štruktúra zohľadňujúca potreby pre naštýlovanie je zachovaná. Snáď ma táto párminutová záležitosť nepripravila o bezchybnosť ;-) (skôr áno).
Zdrojový kód je vo vnútri príspevku.
Podobné pokusy som videl na jednom webe, zabudol som URL a aj kto ma k tej stránke priviedol. Škoda – nakopne ma niekto správnym smerom?

inZine – zdrojový kód dokumentu

<html>
<head>
<title>
inZine - by Robert Madaj
</title>
</head>
<body>
<h1>inZine</h1>
<div id="navigation">
<ul>
<li><span>Demovnica</span></li>
<li><span>Tv Tipy</span></li>
<li><span>Archiv CZ</span></li>
<li><span>Archiv 5D</span></li>
<li><span>Music Files</span></li>
<li><span>Nocny Zivot</span></li>
<li><span>pozadie</span></li>
</ul>
</div>
<div id="intro">
<h2>Uvodnik</h2>
<p>Meno Priezvisko</p>
<p>Vase reakcie</p>
</div>
<div id="main">
<div class="headline">
<img src="" alt="image" />
<p class="headtop">
<span class="author">Meno Priezvisko</span>
<span class="date">(21.10.2003)</span>
</p>
<h2>Aj tak chcem byt poziarnikom</h2>
<p>Rok vladnutia SDKU, SMK,..</p>
<p class="perex">Napriek nominálnemu nárastu miezd si môžeme v skutočnosti tento rok kúpiť opäť o niečo menej. Zvýšili sa ceny energií, zužuje sa rozsah bezplatnej zdravotnej starostlivosti, mení sa systém sociálneho zabezpečenia, má sa zaviesť jednotná sadzba dane.</p>
<p class="subnavigation">
<span class="category">1/2pendix</span>
<span class="comm">Vase reakcie</span>
</p>
</div>
<div class="headline">
<img src="" alt="image" />
<p class="headtop">
<span class="author">Meno Priezvisko</span>
<span class="date">(21.10.2003)</span>
</p>
<h2>Aj tak chcem byt poziarnikom</h2>
<p>Rok vladnutia SDKU, SMK,..</p>
<p class="perex">Napriek nominálnemu nárastu miezd si môžeme v skutočnosti tento rok kúpiť opäť o niečo menej. Zvýšili sa ceny energií, zužuje sa rozsah bezplatnej zdravotnej starostlivosti, mení sa systém sociálneho zabezpečenia, má sa zaviesť jednotná sadzba dane.</p>
<p class="subnavigation">
<span class="category">1/2pendix</span>
<span class="comm">Vase reakcie</span>
</p>
</div>
[...]
<div id="pagecounter">
<form>
</form>
</div>
<div id="footer">
<ul>
<li><span>Demovnica</span></li>
<li><span>Tv Tipy</span></li>
<li><span>Archiv CZ</span></li>
<li><span>Archiv 5D</span></li>
<li><span>Music Files</span></li>
<li><span>Nocny Zivot</span></li>
<li><span>pozadie</span></li>
</ul>
</div>
</div>
<hr>
<div id="links">
<div class="header">
<h1><span>inZine</span></h1>
<p class="date">21.10.2003</p>
<p class="by">robinco technologies</p>
</div>
<div id="search">
<form></form>
</div>
<div id="anketa">
</div>
<h2>TOP TIPY</h2>
<p>najcitanejsie clanky za 7 dni</p>
<ul>
<li>Peter Pistanek:<br />Boles namiesto slasti</li>
</ul>
<h2>PACH KRWI</h2>
<p>najfrekventovanejsie diskusie:</p>
<ul>
<li>Kazdy ma..</li>
</ul>
<h2>MENU</h2>
<ul>
<li>Home</li>
</ul>
</div>
</body>
</html>

Na kód si uplatňujem autorské práva ;-)

Môže sa Vám ešte páčiť...