Screenshot

A portálépítgetés megy. Legutoljára azt magyaráztam, hogy hogyan lehet a Corvinás keresőfelületet belepakolni gyorsan a lapunkba, azóta pedig a kezdőlapot csiszolgattam. Szétosztottam négy nagyobb körbe az egyes lehetőségeket, azt szépen elneveztem, és egy oszlpoba rendeztem, majd az egészet táblázat-szerűen elhelyztem a statikus kezdőlapon, amire a WP 2.2 már nagyon alkalmas, a Beállítások > Olvasás oldalon lehet szórakozni. A legegyszerűbb létrehozni egy home.php nevű lap-sablont (emlékszünk? előző bejegyzés…), majd ezt alakítgatni.

A szerűt azért emeltem ki, mert jómunkásember nem használt táblázatot tartalomigazításhoz (bár erről vannak más vélemények is…), csak dobozokat (alias <div>). Nos, ez nekem mindig munka, hogy újra és újra rájöjjek, hogyan lehet 2x2es felületet létrehozni. Az egyszerűség kedvéért itt most rögzítem.

Tehát, először csináljuk meg a Nagy divet, aztán a két sornak is egyet-egyet, aztán, ha több elemet (listát, bekezdést, blokkot stb.) akarunk rakni egy hasábba, akkor azoknak is egyet. Ez azt jelenti hogy 7 darabot kell megcsinálni, valahogy így:

<div id="kezdolap">
<div id="felso">
<div class="felso_bal"></div>
<div class="felso_jobb"></div>
</div>
<div id="also">
<div class="also_bal"></div>
<div class="also_jobb"></div>
</div>
</div>

Ezt pedig formázzuk be most. A bal oldaliak ellebegnak balra, a jobb oldaliak pedig jobbra, valamint, ha különböző mennyiségű tartalmat teszünk bele, akkor érdemes megadni egy fix magasságot is, mondjuk 200 pixel. Ez CSS-ben így néz ki:

.felso_bal, .also_bal { float: left; height: 200px; }
.felso_jobb, .also_jobb { float: right; height: 200px; }

Gyakorlatilag ennyi. Én még annyit bolondítottam rajta, hogy az egyes blokkok címe mellé raktam egy ikont, amit úgy értem el, hogy <h2> címsor taggel emeltem ki a címet (pl. Hírek), majd a CSS-ben beállítottam, hogy a háttérben jelenjen meg az ikon, balra csúsztatva. Érdemes átlátszó hátterű ikonokat használni (ezt tudja a PNG és a GIF kiterjesztés is), mert így szép hatást lehet elérni színes háttérrel is, ennek “pusztán” annyi a hátulütőja, hogy az Explorer nem tudja kezelni, hanem szürke hátteret pakol be. Állítólag van rá megoldás, én működővel még nem találkoztam. És akkor ez így néz ki:

.felso_bal h2 {background: url(http://a_kep_urlje/kep_cime.png) no-repeat left; padding: 10px 0px 0px 35px;}

momek printscreenÉs így a másik hárommal is. A background állítja be a háttér tulajdonságait, amelyben megadjuk a kép helyét, azt hogy ne ismétlődjék (ezt meg tudja tenni függőleges – x-repeat – és vízszintes – y-repeat – irányban is, amíg ki nem tölti az adott blokk hátterét), valamint hogy a tartalomhoz képest balra lebegtesse (azaz jobbra fussa körül a szöveg), végül pedig a felső és a jobboldali szegélyét állítottuk olyan vastagra, hogy ne folyjon egymásra kép és szöveg.

Az meg már csak egy kósza ötlet volt, hogy az olvasót előre tájékoztassuk, hogy mit talál adott oldalon. Erre ugye van a title="link címe" megoldás, amit elegánsabb megoldással ki is vetíthetünk a linkek mellé egy JavaScript segítségével.

Legközelebb itt folytatom, addig is egy printscreen a kezdőlapról.

“Screenshot” bejegyzéshez ozzászólás

Hozzászólás