Najbolj zoprna stvar, pri stari postavitvi, je bila uporaba <TABLE> za oblikovno postavitev strani v tri stolpce. Tri? Ja, aplikacija je zastavljena za 3, jaz pa trenutno uporabljam le dva. No, mobilna stran nima navigacijskega stolpca.

In tu je bil kaveljc. Odločanje kaj in kako izpisati s tabelo na mobilni strani je bilo precej zoprno. Povrhu vsega sem želel fleksibilnost, da imam stolpce možnost premikat in menjat med seboj. Žal, brez dobrega poznavanja CSS tega nisem znal storiti, zato sem bil prisiljen uporabiti tabelo.

Torej sem se zakopal v učenje CSS, pa še to bolj površno, priznam. A, k sreči, sem že takoj na začetku našel Steven Bradley-evo nazorno prestavitev in rešitev problema.

Ideja je načeloma preprosta: na spletni strani želim glavo z nogo, vmes pa vsebinski del, ki je razdeljen na tri stolpce.

Izkaže se, da potrebujem zgolj 6 <DIV>-ov: #body, #head, #foot, #content in #sidebar1, #sidebar2. In to v naslednjem zaporedju:

<div id="body">
<div id="head">Glava</div>
<div id="sidebar1">Stranski1</div>
<div id="content">Vsebinski</div>
<div id="sidebar2">Stranski2</div>
<div id="foot">Noga</div>
</div>

#body potrebujem zato, da vsebino centriram na sredino okna brskalnika in hkrati določim maksimalno širino prikaza. Če ostale <DIV>e prikažemo brez CSS, ze izpišejo en za drugim, ker je načeloma tisto kar želimo z izjemo sredinskih, ki bi morali biti en ob drugem.

Najlažje to storimo, da stolpcem določimo širino in jih float-amo na levo. Seveda mora biti skupna vsota širin enaka širni #body-a.

#body {
width: 640px; /* določimo širino */
margin: 0 auto; /* sredisnka poravnava */
position: relative; /* pomembno za podrejene DIVe, če so position:absolute */
}
#sidebar1, #sidebar2 {
float: left;
width: 120px;
}
#content {
float: left;
width: 400px;
}

Če bi želel zamenjati razporeditev stolpcev, je dovolj, da eksperimentiram s float-anjem levo ali desno. Pri malce bolj komplicirani postavitvi (absolutno pozicioniranje) pa je nujna uporaba tudi margin.

Vse lepo in prav, a kaj, ko se s tako postavitvijo noga postavi tik pod glavo, sredinski stolpci pa nimajo enake višine. Vse to enostavno rešimo z naslednjim CSS zapisom:

#foot {
clear: both;
}

S tem se noga postavi pod najdaljši vsebinski stolpec.

Najlepše pri vsem skupaj pa je, da pri odločanju kaj prikazujemo na mobilni strani uporabimo zgolj 2 if-a. In to samo za prikaz DIVov #sidebar1 in #sidebar2.

<div id="body">
<div id="head">Glava</div>
<?php if (!$mobile) : ?><div id="sidebar1">Stranski1</div><?php endif ?>
<div id="content">Vsebinski</div>
<?php if (!$mobile) : ?><div id="sidebar2">Stranski2</div><?php endif ?>
<div id="foot">Noga</div>
</div>

Vse ostalo, vključno s CSS, ostane nespremenjeno!