CSS a gyakorlatban

lalEz a cikk Manorama prabhu blogjának, a lal.freeblog.hu oldal táblázatos verziójáról egy tableless css alapra való áthelyezését írja le. A cikk megjelent 2005. december 4-én a Weblaboron is.

A probléma

Táblázat alapú egy oldal, ha a lap szerkezetét egymásba ágyazott többszörösen összetett táblázatokkal oldjuk meg. Ezekre kényszerültünk a CSS előtti időkben ha két vagy három oszlopos megjelenést akartunk elérni, vagy más speciális hatást. A táblázat alapú oldalakkal több bajom is van.

  • A forráskód akkor is nagyon bonyolult és szinte átláthatatlan lesz ha jó úttörő módjára szépen betagoljuk a forrást, minden behúzandó elemet behúzva. Az a tapasztalatom, hogy hiába rakok be mindenféle megjegyzést, hogy ez a navigátor tábla eleje, ez meg a vége, ha valamit egy-két hónap elteltével módosítani akarok, akkor általában nagyon sok ideig tart mire megtalálom, hogy melyik tábla mi is tulajdonképpen. Persze a felhasználók ebből nem érzékelnek semmit, nem is érdekli őket ez a rész 🙂
  • A táblázatokat csak akkor tudják a böngészők helyesen megjeleníteni ha már beolvasták a jelet. Addig meg nem. Ez sokszor azt jelenti, hogy a böngésző tölt és tölt mi meg nem látunk semmit. Még szélessávnál is zavaró, nem beszélve a modemes internetről.
  • A táblázatos oldalak nagyobb fileméretben férnek csak el a sok és elem miatt
  • Minden tábla, tr, td elem megtöri a font tagot, azaz ha az oldalunkon pl Verdana betűtipust akarunk használni, akkor kb 85-ször benne kell lenni a kódunkban, hogy az a Verdana legyen.

A megoldás

Használjunk css-t. Ez kiküszöböli a fent említett hiányosságokat. Ebben a cikkben be fogom mutatni, hogy hogyan kell megtervezni a lapunkat figyelembe véve a CSS-t, hogyan kell a html kódunkat összerakni, hogy kiszolgálja ezt az igényt. Vagyis hogyan kell elkészíteni egy CSS alapú tableless (táblázatok nélküli) oldalt.

A feladat

A feladat az volt, hogy a lal.freeblog.hu lapot alakítsam át. Ilyen volt a lap az átalakítás előtt.

lal-freeblog

Ebből kellett volna egy három oszlopos oldalt csinálnom. Ugye egy többszörösen összetett táblázatba beszúrni egy új oszlopot az nem leányálom. Meghát fent már leírtam, hogy milyen problémáim is vannak a táblázatokkal. Szóval akkor úgy döntöttem, hogy a problémát egy CSS alapú, táblázat nélküli lappal fogom megoldani. A kész lapnak 800*600-on és 1024*768-on meg ez fölött is jól kéne kinéznie, mindenféle böngészőkkel. Ha böngészőnek nevezünk minden programot amely weblapok megjelenítésére képes, akkor az Internet Explorer egyértelműen nem egy böngésző, merthogy sajnos nem képes weboldalak megjelenítésére. Ennek ellenére sokan használják böngészésre. A megoldás: 1 egység alatt összerakni a lapot, hogy bármely böngészőben jól jelenjen meg, ezután 5 egység idő alatt átgyúrni úgy, hogy az Internet Kexpóker is nagyjából úgy jelenítse meg ahogy azt mi szeretnénk…

Na akkor hogy is kell?

Ok, akkor lássuk a medvét, állítsuk össze a html-t sok sok div-vel, meg csináljuk meg hozzá a css-t! Az biztos, hogy egy olyan cuccot kell összerakni ami 3 oszlopból indul ki. Nevezzük őket balsávnak, jobbsávnak és középrésznek.Rögtön az elején jó ha belőjük magunknak, hogy melyik rész fog a legtovább nyúlni. Esetünkben ez a középrész lesz.

A kiindulási alapként szolgáló html kód összeállítása

<!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-2">
    <title>Lál Blog</title>
  </head>
<body>
  <div class="kozepresz">
  </div>
  <div class="balsav">
  </div>
  <div class="jobbsav">
  </div>
</body>
</html>

Be kell vallanom itt már kissé célirányosnak kell lenni, a div-ek sorremdjénél már figyelembe kell venni a leendő css megoldást. Én ezt fogom használni a fő div-eknél: position: absolute. Így a három fő div-et bármilyen sorrenben betehetem a html kódba, mivel a böngészők nem a html kódbeli helyük, hanem a css abszolút pozicionálási szabálya alapján fogják megjeleníteni. Azért rakom mégis a középrészt előre, mivel itt lesz a tényleges tartalom, és bizonyos keresőprogramok magasabb helyre teszik az oldalt ha a keresett szó a html kódban előrébb szerepel.

A css alapja

<style type="text/css">
/*html entitánsok*/
body{font-family: "trebuchet ms", trebuchet, sans-serif;
  font-size: 12px;
  margin:0 0 0 0;
  padding: 0 0 0 0;
  background:#a44;}

/*az oldal felépítését befolyásoló elemek*/
.balsav{position: absolute;
  left:0;
  top:0;
  width:200px;
  background:#a44;
  padding-bottom:10px;
  color:#d94;}

.kozepresz{margin:0 200px 0 200px;
  background:#d94;
  padding-bottom:10px;
  border-right: 10px solid #333;
  border-left: 10px solid #333;}

.jobbsav{position: absolute;
  right:0;
  top:0;
  width:200px;
  background:#a44;
  padding-bottom:10px;}

/*a középrész elemei*/

/*a balsáv elemei*/

/*a jobbsáv elemei*/

/*design elemek*/

A body elemmel megmondjuk, hogy milyen betűtipust akarunk, és 0-ra állítjuk a margókat és a paddingot. A background definicót itt egyetlen ok miatt adjuk meg. Azt akarjuk, hogy ilyen szinű legyen a bal sáv legalsó boxának a háttere. De akkor miért itt adjuk ezt meg? Azért mert az Internet Kexpóker nem tudja a bal sávunk legalsó boxát olyan hosszan lefelé megnyújtani amilyen hosszú a középrész, hanem csak olyan hosszúra hagyja amekkora a tartalma + az alsó box paddingja és marginja. Mi viszont azt akarjuk, hogy a legalsó box lelógjon a lap aljáig (vagyis a középrész aljával egy vonalban legyen). Ezért azt csináljuk, hogy a lapunk háttere olyan színű mint amilyen szinűre akarjuk a bal alsó boxot. Minden más boxnak adunk egy háttérszínt, ennek meg majd nem. Így a box beleolvad majd az alapértelmezett háttérbe és úgy néz ki mintha lelógna odáig. Ha ez nem világos, akkor majd ha kész az oldal adjatok a bal legalsó boxnak egy border értéket és látni fogjátok, hogy minek hol a határa.Mielőtt bárki felháborodna, hogy igenis lehet CSS-sel a height értéket állítani sajnos azt kell mondanom, hogy lehet, de a Kexpókert nagy ívben nem érdekli.

A balsávot a left:0 top:0 pozícióba vagyis a bal felső sarokba igazítjuk. a jobbsávot meg a jobb felső sarokba. Mindkettő 200 px széles. Ez egy 800*600-as képernyőnél azt jelenti, hogy a középrész (400 px – borderek) széles lesz. Nagyobb felbontásnál a középrész nagyobb lesz. A középrésznek jobbra és balra 200px-es margint adunk meg, hogy ne lógjon rá se a balsávra se a jobbsávra és adunk neki némi bordert, hogy úgy nézzen ki mint ahogy a táblázatos oldalunk nézett ki.

A középrész

A középrészen két boxunk van, egy a fejlécnek egy meg a tartalomnak. Tegyük be a css-be a szükséges bejegyzéseket.

/*a középrész elemei*/

.fejlec{background:#a44;
  border-bottom: 10px solid #333;
  height:150px;
  padding: 0 15px 0 15px;}

.tartalom{margin: 15px 15px 0 15px;
  clear:left;
  text-align:justify}

Semmi érdekes, csak a fejlécnek adunk egy alsó border-t, hogy adja azt a kinézetet mint amit a táblázatos verzió adott. Persze ehhez be kell pár új div-et tenni a html kódunkba is.

<div class="kozepresz">
  <div class="fejlec">
  </div>
  <div class="tartalom">
  </div>
</div>

OK. A fejlécbe be fogjuk tenni az egyetlen táblázatot az oldalunkon. Erre azért van szükség, mert eddig még nem találtam más biztos módszert szöveg és kép minden böngészőnél megfelelő illesztésére. Rövidebben a Kexpóker miatt. Azt szeretném, hogy a kép jobb szélre legyen igazítva, a szöveg pedig a maradék hely közepére. A blogcím css definició annyiról szól, hogy méretet és színt adunk majd a fejlécben szereplő szövegnek.

<div class="fejlec">
  <table border="0" width="100%">
    <tr>
      <td class="blogcim">
        Egy Krisnás szerzetes naplója
      </td>
      <td align="right">
        <img src="lal.gif">
      </td>
    </tr>
  </table>
</div>

Na, jöhet a tartalom rész. Beteszünk ide is egy pár design-t módosító css tagot, de erről csak ennyit. Itt érdemes valamiféle tartalommal jó alaposan feltölteni ezt a részt, mivel az éles oldalon is itt van a legtöbb szöveg, és így tudjuk majd a legjobban tesztelni, hogy hogyan is nézd majd ki a kész oldal.

<div class="tartalom">
  <div class="bejegyzescim">
    Változás
  </div>
  <div class="bejegyzesinfo">
    <a href="#">05-11-08 17:23</a> |
    <a href="#">1 hozzászólás</a>
  </div>
  <div class="bejegyzes">
    Most éppen az oldalon változtatgatok. (...).
  </div>

</div>

A balsáv

A bal oldali sávban kiindulásként 3 boxunk lesz, de persze lehet ennél több is, az is ugyanígy működik.

/*a balsáv elemei*/
.balegy{background-color:#357;
  text-align:right;
  padding:10px 10px 10px 10px;
  font-size: 14px;
  border-bottom: 10px solid #333;}

.szlogen{margin-bottom:50px;}

.elerhetoseg{color:white;
  margin-bottom:50px;}

.balketto{background-color:#050;
  border-bottom: 10px solid #333;
  padding:10px 10px 10px 10px;}
.balharom{text-align:right;
  padding:10px 10px 10px 10px;}

Magyarul semmi különös, csak szinek, borderek, igazítások és más szépítőszerek. A balegy lesz felülről az első boxunk, a balketto a második a balharom meg a harmadik. Ez a balharom lesz az ami miatt a body-nak azt a bizonyos background értéket. Itt látszik is, hogy a balegy-nek és a balketto-nek is adunk háttérszínt, a balharomnak meg nem, hanem hagyjuk, hogy örökölje a balsav-tól. (A balsav-nak nem is kelett volna háttérszínt adni, így a body-tól örökölt volna ez, de a Kexpóker óvatosságra inti az embert 🙂

És az ehhez tartozó html kód. Itt aztán végképp nincsen semmi érdekes. Fogtam és az eredeti lap forráskódjából bemásoltam minden ide tartozó dolgot. Persze a forrást kicsit pofásítottam, mert a régi nagyon össze volt dobálva. Itt jól lehet látni, hogy a táblázatos oldalakkal ellentétben – ha rendesen betagoljuk tabulátorokkal a forrást – milyen szépen lehet látni, hogy melyik box meddig tart. Szóval ha később majd valamit az egyik boxból át akarunk rakni a másikba, akkor biztos, hogy könnyen meg fogjuk találni.

<div class="balsav">
  <div class="balegy">
    <div class="szlogen">
      Már régóta gondolkoztam, hogy...
    </div>
    <div class="elerhetoseg">
      <b>Elérhetőségeim:</b><br>
      Skype: manoram<br>
      MSN: manorama@freemail.hu<br>
      Mobil: (30) 231-8722
    </div>
  </div>
  <div class="balketto">
    <div>
      <!-- SiteSearch Google -->
      <form method="get"
             action="http://www.google.com/search">
      <input name="ie" value="iso-8859-2" type="hidden">
      <input name="oe" value="iso-8859-2" type="hidden">
      <b>Keresés:</b>
      <input name="q" size="10" maxlength="255" value=""
             type="text">
      <select name="sitesearch" id="sitesearch">
        <option value="lal.freeblog.hu" selected="selected">
           A blogon</option>
        <option value=".hu">Magyar oldalakon</option>
        <option value="">Weben</option>
      </select>
      <input name="btnG" value="Keres" type="submit">
      <input name="domains" value="lal.freeblog.hu" type="hidden">
      </form>
      <!-- SiteSearch Google -->
    </div>
    <div>
    <b>Audió blog / Podcasting:</b>
    <ul>
      <li><a href="index.php?adas=8">2005.10.08</a>
         19:26" - 8,9 MB</li>
      <li><a href="index.php?adas=7">Vidám szerzetesek
         videó 2.</a></li>
      <li><a href="index.php?adas=6">Vidám szerzetesek
          videó 1.</a></li>
      <li><a href="index.php?adas=5">2005.07.21</a>
          26:54" - 12,3 MB</li>
      <li><a href="index.php?adas=4">2005.04.30</a>
          29:11" - 13,3 MB</li>
      <li><a href="index.php?adas=3">2005.03.12</a>
          25:42" - 11,7 MB</li>
      <li><a href="index.php?adas=2">2005.02.27</a>
          20:22" -  9,3 MB</li>
      <li><a href="index.php?adas=1">2005.02.04</a>
          26:08" - 10,4 MB</li>
    </ul>
    <a href="info.php" target="_blank">Infó a letöltésekről</a>
    </div>
  </div>
  <div class="balharom">
    <b>Régebbi bejegyzések</b><br>
    <a href="#">2004. szeptember</a><br>
    <a href="#">2004. október</a><br>
    <a href="#">2004. november</a><br>
    <a href="#">2004. december</a><br>
    <a href="#">2005. január</a><br>
    <a href="#">2005. február</a><br>
    <a href="#">2005. március</a><br>
    <a href="#">2005. április</a><br>
    <a href="#">2005. május</a><br>
    <a href="#">2005. június</a><br>
    <a href="#">2005. július</a><br>
    <a href="#">2005. augusztus</a><br>
    <a href="#">2005. szeptember</a><br>
    <a href="#">2005. október</a><br>
    <a href="#">2005. november</a><br>
    <a href="#">mostanság</a><br>
  </div>
</div>

A balharom boxban volt még egy fontos honlapok nevezetű rész, még azt is hozzá kell tennünk. Ennek a links nevet adtam. Itt egy nem túl szabványos megoldást használtam ahhoz, hogy három oldalon legyen border: először megadtam, hogy mind a négy oldalon legyen 6px, majd a jobb oldalit felüldefiniáltam. A css validator warningol is rá.

.links {border: solid black 6px;  border-right: 0;

background: #CA7;

padding: 10px 10px 10px 0;

margin: 14px 0 0 0;

color:#000;}

És itt megintcsak fogtam az eredeti html kód ide vonatkozó részét és bemásoltam ide.

<div class="links">
  <ul>
    <b>Fontos honlapok:</b>
    <li><a href="http://www.krisna-volgy.hu/"target="_blank">
        Krisna-völgy</a></li>
    <li><a href="http://www.krisna.hu/" target="_blank">
        Krisna.hu</a></li>
    <li><a href="http://www.mantra.hu/" target="_blank">
        Mantra.hu</a></li>
    <li><a href="http://www.haribol.hu/" target="_blank">
        Haribol.hu</a></li>
    <li><a href="http://www.krisnaudvar.hu/" target="_blank">
        Krisna Udvar</a></li>
  </ul>
</div>

No, akkor a bal oldali sávval meg is vagyunk.

A jobbsáv

Ide nem tudtam, hogy mit akar a kedves kuncsaft, szóval csináltam 2 boxot a balsav-val megegyező szinekkel és gondoltam majd ha kiderül, akkor a beltartalmat meg lehet változtatni. Hát lássuk a CSS-t, amiben csak a szokásos szépítőszerek és borderek szerepelnek.

/*a jobbsáv elemei*/
.jobbegy{background-color:#357;
  padding:10px 10px 10px 10px;
  font-size: 14px;
  border-bottom: 10px solid #333;}
.jobbketto{background-color:#050;
  border-bottom: 10px solid #333;
  padding:10px 10px 10px 10px;}

A html-t meg csak feltöltöttem valami szöveggel, hogy lehessen látni a várva várt végeredményt.

<div class="jobbsav">
  <div class="jobbegy">
    Most éppen az oldalon változtatgatok. Ha valami furcsaságot
    látsz, akkor amiatt van.. :)
  </div>
  <div class="jobbketto">
    Most éppen az oldalon változtatgatok. Ha valami furcsaságot
    látsz, akkor amiatt van..
  </div>
</div>

Na ha ezen mind végigjutottunk, akkor kész is vagyunk.
lal-tableless

Meg lehet nézni a végeredményt. Persze pár szemfüles olvasó bizonyára észreveszi, hogy a CSS-ben van pár design-t módosító definíció, de ezeket már az előttem szólók úgy is elmagyarázták, így én nem tettem.

Megjegyzések

  • Az elnevezésekkel jó vigyázni. Pl most úgy hívjuk az egyik dobozunkat, hogy balketto. Ha ezt egyszer csak szeretnenk átrakni a jobb oldalra, akkor azt ugye a html kód változtatása nélkül tisztán a css módosításával is meg tudjuk tenni. pár position:absolute;top:valami;right:valami; meg is oldaná. Pl a CSSZengarden oldalán 500 különféle design van hozzárendelve egyetlen html oldalhoz. No ilyenkor félrevezető lehet, hogy balketto-nek hívunk egy jobb oldali boxot…
  • Ez a design jól néz ki 1024*768 és annál nagyobb felbontásban Kexpókerrel, Firefoxxal, Operával. 800*600-on türhető a Kexpókeren kívül mindegyikkel. A Kexpóker 800*600-on eltünteti vagy megtöri a jobbsáv és a középrész közötti sötétszürke csíkot (a kozepresz border-jet). Ezen nem aggódtam annyira, mert tudom, hogy a lapot 10-15%-ban nézik 800*600-on és ennek kb 50%-a Kexpókerrel. Nekik meg úgy kell. De még úgy se olyan csúnya.

Tanácsok tableless oldalak létrehozásához

  • Először rajzoljuk le magunknak, hogy mit szeretnénk legyártani.
  • Rajzunkat fordítsuk le a CSS nyelvére valahogy így: “Egy három oszlopos oldalt akarok, amin a fejléc a középső oszlop része”, vagy mondjuk: “Egy teljes szélességet lefoglaló fejlécet és alatta egy három oszlopos lapot akarok”. Ez segíteni fog az alap html összerakásában, és a fő boxok beazonosításában.
  • Ezután készítsünk egy html file-t, amiben még nincsen semmi, csak a fő div-ek. Ennek valahogy úgy kell kinéznie mint a “A kiindulási alapként szolgáló html kód összeállítása” részben csináltuk itt. Más szavakkal ez azt jelenti, hogy lesznek olyan div-ek amikben nincsen más tartalom, csak másik div-ek.
  • A CSS-ünket először design nélkül, csak az oldal felépítésére koncentrálva kezdjük el. Vagyis nem kellenek betűk, szinek, stb, hanem csak position, float, stb elemek.
  • Ezután szépen építkezve fejlesszük a html-t és a CSS-t egymás melett, először egy-egy elemet teljesen elkészítve (pl balsáv) és utánna tovább a többi elemet.
  • Legyünk óvatosak a fix szélességek használatával. Pl egy 200px széles div-ben elhelyezhetünk egy 190px széles képet/táblázatot, de a padding és a border értékek miatt lehet, hogy nem fog elférni. A Kexpóker biztosan hibásan jeleníti meg, a többi böngészőnél is nem várt hatásra számíthatunk ha pl a 190 px széles képünket betesszük egy 200 px széles div-be aminek 15px jobb és baloldali paddingja van.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.