ugrás a tartalomhoz

CSS lépésről-lépésre: a design tervtől a kész oldalig

rrd · 2006. Júl. 4. (K), 06.00
CSS lépésről-lépésre: a design tervtől a kész oldalig
Kap az ember egy design tervet, ami egy rajzot, egy Photoshop vagy egy Gimp fájlt jelent. Vagy esetleg nem kapja, hanem saját maga készíti el. Nagyon szép és csiribiri, de hogy lesz ebből egy weblap? Egyáltalán megvalósítható teljes pontossággal egy design terv? Hát lássuk, cikkemben a folyamat lépésein fogom végigvezetni az olvasót, bemutatva a fontosabb döntési pontokat, az egyik lehetséges utat.

A terv és a feltérképezés

Ebben az esetben a design tervet egy e-mailben kaptam egy Photoshop fájl formájában. Aki szeretné, az le is töltheti (7,2 MB).

Első lépésként térképezzük fel, hogy milyen főbb elemekből épül fel az oldal. Ez valami olyasmi, mint egy építkezésen az alaprajz. Ilyenkor ha nem mi magunk készítettük el a tervet, illetve ha nem tudjuk, hogy az oldalnak milyen funkciói vannak (vagy hogy melyik mit csinál), mindenképpen konzultálni kell a tervezővel / megrendelővel. Íme a terv, pár elem beazonosításával:

Elemek



  1. Legfelül van a kép ami az oldal fejléc grafikája. A designer azt mondta, hogy ez egy Flash fájl lesz és valami multimédiás varázslatot fog csinálni. Ennek az elemnek a fejléc nevet adtam. (a képen az 1-es jelöli)
  2. Közvetlenül ez alatt van egy csík, amin mindenféle információ látható (névnapok, napkelte, stb). Ezt az elemet infópanelnek neveztem el. (a képen a 2-es jelöli)
  3. Ezután jön a legnagyobb rész, a közép nevet adtam neki. Ezt az elemet még tovább kell bontanunk.
    • A bal oldali oszlopot elneveztem balsávnak, itt van a menü, a hírlevél feliratkozás, a vaisnava naptár és a friss blogok. (a képen 3/A jelöli)
    • A középső oszlopba kerül majd mindig a megjelenítendő tartalom. Így ezt a nevet adtam neki. (a képen 3/B)
    • A jobb oldali oszlopot jobbsávnak neveztem el, ez ad helyet a keresésnek, a darshan képeknek, a hirdetésnek, az apróhirdetéseknek és a recepteknek. (a képen 3/C)

  4. Végül legalul van egy kis rész ami a lent nevet kapta. (4-es)

A tervrajz

Ezek alapján már megrajzolhatunk egy kis tervrajzot magunknak, ami jó segítség lesz az oldalunk felépítésében. Csupaszítsuk le az oldalunkat minden első körben felesleges sallangtól (színektől, tartalomtól), és koncentráljunk csak az oldalunk vizuális felépítésére, vázára. Valami ilyesmit kellene kapnunk:

Tervrajz

A kódolás előtt

Mielőtt az ember nekiugrik a kódolásnak nem árt pár dolgot szemügyre venni a design tervben, van ugyanis pár érzékeny pont, amit jó ha az elején tisztázunk. Ehhez megnyitottam a Photoshop fájlt és elkezdtem írni egy listát.

  1. A magam részéről nem tartom túl jó ötletnek a kék alapon fehér betűket, mert hosszabb szövegeket nehéz így olvasni. A megrendelő azt mondta, hogy nem baj, neki tetszik. Akkor oké, ez így marad, de legalább szóltam.
  2. A fejléc Flash fájl még nem volt kész, írtam a designernek, hogy úgy dolgozzon rajta, hogy a jelenlegi magassága és szélessége ne változzon, se a Flash kiindulási állapotában, se annak bármelyik fázisában. Az oldal szélességét ehhez fogom igazítani, és ugyan megoldható lenne változó szélességgel, de egy folyamatosan táguló, szűkülő tartalmi rész valószínűleg rettentő zavaró lenne a látogatók számára.
  3. A Flash-t a magam részéről egyébként sem kedvelem, mert még gyorsabb internet esetében is sokszor lassacskán töltődnek be. Az oldalt várhatóan modemes emberkék is nézni fogják, akiknek meg nagyon sokáig is eltarthat míg letöltődik a Flash. A megrendelő megszavazta, hogy maradjon.
  4. Az eredeti design terv 900 px széles volt a narancs háttér nélkül. Ez 800*600-as felbontásnál azt jelenti, hogy a usernek vízszintes irányban is scrolloznia kell, hogy elérje a jobbsávot. A felhasználók kb. 10%-a 800*600 alatt nézte az oldal elődjét. A megrendelő erre rábólintott, a designer meg szívta a fogát, és átalakította 770 px szélesre.
  5. Infopanel

    Az infópanelen az adott napra vonatkozó vaisnava esemény (a pédában: Srila Prabhupada elindul az USA-ba) változó hosszúságú, illetve ha nincs az adott napon ilyen esemény akkor üres. A designer annyit mondott, hogy ha nincs akkor nincs, ha meg hosszabb akkor vágjuk le.
  6. Betűtípusok. Ez általában érzékeny pont szokott lenni, jobb előre tisztázni. A weben ugye a sans és a sans-serif a két olvasható szabványos font család. Azt, hogy ezen a családon belül konkrétan milyen betűtípussal fogja a böngészőprogram az oldalunkat megjeleníteni csak hellyel-közzel tudjuk alakítani, mert különböző operációs rendszerek különböző betűtípusokat használnak. Ezért ha szétnézünk a neten azt fogjuk látni, hogy az Arial / Helvetica párost használják döntő többségben. Miért? - mert ez a páros nagy valószínűséggel elérhető lesz minden oprendszerben tevékenykedő látogató számára.
    • A vaisnava naptár, a friss blogok, a darshan és a receptek a design tervben egy DauphinPlain nevű betűtípussal szerepeltek. Ez még az én gépemen sem volt telepítve (pedig van egy rakás betűtípusom), tehát könnyen megsaccoltam, hogy a potenciális látogatók közül hánynak lehet meg a gépén. A címeket (mint pl. vaisnava naptár) megoldhattam volna képek elhelyezésével, de ezt semmiféleképpen sem akartam, mert ezen elemek tartalmát a működő oldalon egy PHP program fogja generálni, szóval ott biztos, hogy normál szöveget kell alkalmazni. A designer rábólintott az Arialra, a megrendelő meg észre se vette, hogy megváltoztattuk :)
    • A tartalmi rész, a lent, az apróhirdetés és a receptek a design tervben Tahoma betűtípussal szerepeltek. Ez egy alap windows font, de linux alatt biztos nincs és gyanítom, hogy Macintosh alatt sincs. A designer pár percnyi pislogás után azt javasolta, hogy ha van a usernek akkor legyen Tahoma, ha nincs akkor legyen ez is Arial. Nesze neked tipográfia.
    • A maradék elemek (infópanel, menü, hírlevél) eleve Ariallal készültek, így ezekkel nem volt semmi szívfájdalmam.

  7. Darshan

    A darshan képek mögött látható egy szép design elem, egy árnyék. Ezzel az volt a bajom, hogy várhatóan a thumbnail-ek nem lesznek ugyanakkorák minden esetben, ami azt jelenti, hogy vagy több méretben kell elkészíteni az árnyékot és gondoskodni arról, hogy mindig a jó méret kerüljön alkalmazásra, vagy pedig elfelejtjük az árnyékokat. A megrendelő azt mondta, hogy egyelőre felejtsük el, aztán majd később meglátjuk.
  8. A menük szövegének nem szabad túl hosszúnak lennie, mert akkor le fognak lógni a helyükről.
  9. A tartalmi részen a képek meletti szöveg a tervben mindig pontosan a kép alsó szélének a vonalában fejeződött be. Ez az éles oldalnál valószínűleg nem így fog történni, a tartalom felelős nagy nagy valószínűséggel néha rövidebb, néha hoszabb bevezető szövegeket fog írni. Ezek miatt az éles oldal tartalmi része nem lesz ilyen rendezett mint a tervben.
  10. A vaisnava naptár eseményei esetlegesen jóval hosszabbak lehetnek mint a designtervben, ilyenkor ez az elem függőlegesen sokkal nagyobb helyet fog elfoglalni.


Miután minden észrevételemet leegyeztettem a megrendelővel és a designer megcsinálta a szükséges módosításokat nekikezdhettem az oldal felépítésének.

Doctype választás

Mivel a működő oldal egy HTML bevitelt is engedélyező CMS által generált website lesz és a site tartalmi gazdája tőlem hallott előszőr arról, hogy a weben léteznek szabványok, úgy döntöttem hogy az oldal doctype-ja transitional lesz. Bíztattam a tartalmi felelőst, hogy ismerkedjen meg az XHTML szabvánnyal és próbálja majd azt alkalmazni a feltöltött cikkekben.

Beszéljünk számítógépül

Akkor kezdhetjük az építkezést! A kis alaprajzunkat fogalmazzuk meg a számítógép nyelvén.

  • A lapunk 770 px széles és a tartalomtól függően változó magasságú.
  • Amennyiben a böngésző ablaka szélesebb a 770 px-nél akkor az egész lapot vízszintesen középre szeretnénk igazítani.
  • A böngészőablak felső széléhez nem ér hozzá a lapunk, hanem a kettő között van egy kis rész (10 px). Alul ugyanez.
  • Legfelül van egy fejlécünk ami egy Flash fájlt tartalmaz és szintén 770 px széles, valamint 180 px magas.
  • Ez alatt van az infópanel ami szintén 770 px széles, és 65 px magas.
  • A balsáv a bal oldalon van és 161 px széles.
  • A jobbsáv a jobb oldalon van és 125 px széles.
  • A kettő között van a tartalom és így (770-161-121) 468 px széles.
  • Mindezek alatt van a lent, ami 770 px széles és 61 px magas


A bal sáv

A balsáv és a jobbsáv szélességét úgy kaptam meg, hogy fogtam a Photoshop fájlt és lemértem, hogy a bal és a jobb oldalon milyen szélesen tart a más színű oszlop. Magyarul a bal oldalon a bal szélen lévő kékség kezdetétől a tartalmi rész kékjéig, a jobb oldalon a tartalmi rész kékjétől a jobb legszél kékjéig mértem.

Infopanel méret

Az infópanel magasságát úgy határoztam meg, hogy a fejléc aljától (vagyis ahol elkezdődik a kékség) a tartalmi rész kékségének a tetejéig mértem. Megvallom őszintén, hogy nem véletlen, hogy pont addig, de ennek megindoklását későbbre halasztom. (Megjegyzés: eredetileg ez a magasság csak 56 px magas volt, ennyi szerepelt a design terven. Menet közben derült ki, hogy ekkora helyen sehogy sem fog elférni normálisan az oda tervezett tartalom, így megnagyítottuk 65 px-re. A probléma az volt, hogy a különböző betűkészletekkel dolgozó különböző operációs rendszerű gépek nem azonos méretet foglaltak el. Az IE-n kívül mindegyik rávehető volt, hogy olvashatóan férjen el 3 sornyi adat ezen a helyen, de ez IE nem. Így végül megnöveltük 65 px-re.)

Alapozás

Feltérképeztük a főbb elemeket, megrajzoltuk az alaprajzot, összeszedtük az esetleg problémás alkotóelemeket, így hát elkezdhetünk alapozni.

Az alap HTML kód

<div id="lap">
  <div id="fent">
    <div id="fejlec">
      fejlec
    </div>
    <div id="infopanel">
      infopanel
    </div>
  </div>
  <div id="kozep">
    <div id="balsav">
      balsáv
    </div>
    <div id="tartalom">
      tartalom
    </div>
    <div id="jobbsav">
      jobbsav
    </div>
  </div>
  <div id="lent">
    lent
  </div>
</div>

Az alap CSS fájl

/*oldal felépítése*/
#lap{width:770px; 
  margin:10px auto 10px auto;}
#fent, #kozep, #lent{margin:0 0 0 0;}
#fejlec{height:180px;}
#infopanel{height:65px;}
#balsav{float:left;
  width:161px;}
#jobbsav{float:left;
  width:141px;}/*141*/
#tartalom{float:left;
  width:468px}/*468=770-141-161*/
#lent{clear:both;}
/*design elemek*/
/*debugging*/
#fejlec{background-color:red;}
#infopanel{background-color:green;}
#tartalom{background-color:yellow;}
#balsav{background-color:pink;}
#jobbsav{background-color:gray;}
#lent{background-color:red;}
Bevezettünk egy fent nevezetű divet, ami összefogja a fejlécet és az infópanelt. Nincs rá feltétlenül szükség, de mivel a következő részeket floatolni fogjuk, jobb ha ezek ketten ott fenn egy csoportba vannak, ha már úgy is egyforma szélesek és egymás alatt vannak. Másrészről meg szerintem így a forráskód is követhetőbb, mert van egy fent, egy közép és egy lent elemünk. A 3 oszlopos kialakításra azt a módszert választottam, hogy mindhárom oszlopnak megadtam a szélességét és balra floatoltam őket. Mivel az oldal egy fix grafikára épül, a méreteket végig pixelben fogom megadni. A végeredmény:

1. fázis



A színeken ne tessék kibukni, az csak azért van, hogy lehessen látni amit látni kell.

Body

body{background-image:url('./img/hatter.jpg');
  color:white;
  font-family:Arial,sans-serif;
  font-size:12px;}
object, form{margin: 0 0 0 0;
  padding: 0 0 0 0;}
Betettük a háttérképet (amit az eredeti Photoshop fájlból szeltem ki úgy, hogy varratmentesen lehessen mind vízszintesen mind függőlegesen egymás mellé pakolni, ez a hatter.jpg), az alapértelmezett betűszínt fehérre állítottuk, és megadtuk, hogy Arial (sans-serif) 12 px nagy legyen. A fejléc képünk nem fog az ablak tetejéhez ragadni, mert már az előzőekben megadtuk a legkülső lap nevű divünknek a 10 px-es felső margint, valamint az oldalsó margin-ok autora állításával gondoskodtunk az egész oldal középre igazításáról. (IE alatt ez nem fog működni, erre majd később vissza kell térnünk.) Valamint szintén óvatosságból az object és form elemre 0-s margin és padding értéket állítottunk.

Fejléc

<div id="fejlec">
  <object type="application/x-shockwave-flash"
      data="./img/headbanner.swf" height="180"
      width="770">
    <param name="movie"
      value="./img/headbanner.swf" />
  </object>
</div>
Ide egyszerűen csak betettük a Flasht, ami még nem volt készen, nem működött (a multimédiás dolga), de legalább beillesztettük, hogy lássuk mi lesz multimédia nélkül.

Lent

/*oldal felépítése*/
  #lent{clear:both;}
/*design*/
/*lent*/
  #lent{background-image:url('./img/lablec.jpg');
    text-align:center;
    font-size:10px;
    padding:10px 0 10px 0;
    font-family:Tahoma,sans-serif;
    font-size:11px;
    height:41px;}/*61-10-10*/
<div id="lent">
  Site map | Elérhetőségek | Jogi nyilatkozat
</div>
A lenti részbe a szövegeket helyeztük el, amikből valamikor majd linkeket fogunk csinálni. A CSS-ünkben megadtuk a lent háttérképét (amit szintén a Photoshop fájlból szeltem ki). Ez a háttérkép 61 px magas. Mivel a height érték az elem magasságát adja meg, ezt 41 px-re állítjuk, hogy a megadott 10 px-es alsó és felső paddinggal együtt kiadja a 61 pixelt.

Balsáv

A balsávban a következő elemek vannak, ezeken fogunk szépen sorban végigmenni.

  • menü
  • hírlevél
  • vaisnava naptár
  • friss blogok
  • alsó grafika

A menü

A menünkhöz egy egyszerű unordered list-et (ul) használunk, a menüpontokhoz pedig hozzárendeljük a megfelelő linkeket. Az IE egyik bugja miatt be kell vezetnünk egy spant, mert máskülönben hiába állítottuk be li elemünk magasságát az IE-t nem nagyon érdekelte.
/*közép-balsav*/
  #balsav{padding-top:15px;}
  #balsav ul{margin:0 0 0 0;
    padding:0 0 0 0;}
  #balsav li{list-style-type:none;}
A balsáv felső paddingját 15 px-re állítottuk, hogy a menü ne rögtön a tetején kezdődjön, hanem kicsit lentebb, valamint az ul elemnek 0-ra vettük a marginját és a paddingját, tiltva ezzel minden behúzást a listában. Aztán a balsáv teljes terjedelmében minden listaelemnél tiltottuk az elem előtt megjelenő kis gombócot, mivel erre nekünk egyiknél sem lesz szükségünk.
  .menu li{background-image:url('./img/menugomb.jpg');
    background-repeat:no-repeat;
    background-position:top left;
    padding:5px 0 0 3px;
    text-align:center;
    height:20px;}/*height:25-5*/
  .menu li a{text-decoration:none;}
/*IE :(*/
  .menuheight{height: 20px;
    margin: 0;
    padding: 0;}
Ezután következhet a menünk összerakása. Ehhez a menü gombjaként szolgáló képecskét szintén ki kellett szelni az eredeti Photoshop fájlból, ez lett a menugomb.jpg. Azért nem csak a kerek szélű kis csíkoskát használtam itt a képként, mert a balsáv, tartalom és jobbsáv hátterét egy csapásra akartam megoldani, de erről majd később. Szóval a menugomb.jpg egy 161*25 px nagyságú kép, amit a listaelemek háttereként használunk. Mivel nem akarjuk, hogy a menü felirata a háttérként használt kép tetejére ragadjon adunk neki egy 5 px-es felső paddingot. Be kell állítanunk bal oldali paddingot is, mert a menüelemek feliratait középre igazítjuk, de a középre igazítás tengelye a balsáv 161 px széles sávjának a közepe lesz, és ehhez képest a mi menugomb.jpg képünk ténylegesen a gombot ábrázoló része 3 px-lel beljebb kezdődik. A jó kisdobosok ezeket a padding értékeket kimérik a Photoshop fájlban, a többiek meg a próbálgatásos módszerrel belövik, hogy kb. ott jó lesz :)
<ul class="menu">
  <li><span class="menuheight">
    <a href="#">Hírek (17)</a></span></li>
  <li><span class="menuheight">
    <a href="#">Napló (138)</a></span></li>
  <li><span class="menuheight">
    <a href="#">Galéria</a></span></li>
  <li><span class="menuheight">
    <a href="#">Letöltés</a></span></li>
  <li><span class="menuheight">
    <a href="#">Fórum</a></span></li>
  <li><span class="menuheight">
    <a href="#">Apróhirdetés</a></span></li>
  <li><span class="menuheight">
    <a href="#">krisna.hu</a></span></li>
</ul>
Ezt kapjuk menüként, és itt jár az oldalunk.

  • Hírek (17)
  • Napló (138)
  • Galéria

Hírlevél

Ez egy egyszerü picike form egyetlen felirattal és egyetlen input mezővel. Annyi a különleges benne, hogy az input mezőnek be kell tennünk egy háttérképet. Jó kisdobos módjára bevezettem egy új div-et, aminek a hirlevel nevet adtam.
<div id="hirlevel">
  Hírlevél feliratkozás
  <form action="hirlevel.php" method="get"
      name="levlista" id="levlista">
    <input name="email" size="11" value="E-mail címe"
      class="bginput" type="text" />
  </form>
</div>
Az ehhez tartozó CSS is pont ilyen egyszerű. Kiszeleteltem a Photoshop fájlban lévő input mezőt ábrázoló részből egy szeletkét (input-bg-nagy.jpg), és ezt használtam az input mező háttéképeként. Ez pont olyan magas mint az input boxom, és vízszintesen ismételhető, így kitölti a rendelkezésére álló helyet. Elég világos is, így látszani fog amit a user belegépel. Részemről úgy gondoltam, hogy nem ártana mellé valami gomb amire a user rá tud kattintani, ha fel akar íratkozni a hírlevélre, de a megrendelő azt mondta, hogy nem kell. Így úgy tud feliratkozni, hogy beírja a címét és üt egy entert. A lapunk itt tart. A balsáv háttere továbbra is csak a debughoz használt pink, de ezen jelen pillanatban még nem aggódunk.
#hirlevel{margin:10px 0 0 20px;}
.bginput{width:90px;
  border:none;
  background-image:url('./img/input-bg-nagy.jpg');}

Vaisnava naptár, Friss blogok

Ezzel a résszel foglalkozunk következő lépésként.

5. fázis

/*vaisnava naptár*/
#vaisnavanaptar, #blog{margin:30px 0 5px 0;
  padding:0 10px 0 20px;}
#vaisnavanaptar li{border-bottom:thin dashed white;
  font-size:12px;margin-bottom:8px;}
.vnaptarhonap{font-weight:bold;}

/*blog*/
.blogcim{font-size:10px;}

/*modul menük*/
#balsav .modulmenucim{background-repeat:no-repeat;
  background-image:url('./img/cimhatter.jpg');
  background-position:top left;
  height:25px;
  padding-top:5px;
  text-align:center;}
Beállítunk a két elemnek közös margin és padding értékeket. Azzal, hogy ezt együtt adjuk meg, azt érjük el, hogy nem fognak elcsúszni egymáshoz képest. A margin értékek teljesen önkényesek, mivel a designer azt mondta, hogy csak odacsapta ezeket az elemeket oldalra, nem fontos, hogy milyen távolság van közöttük. A padding értékekkel gondoskodunk arról, hogy ha majd a balsáv alá kerül a háttér, akkor a szövegek nehogy lelógjanak a nekik szánt helyről. Beállítjuk a vaisnava naptár eseményeit elválasztó vonalak típusait is (szagatott, vékony vonal). Ez a design tervben folytonos vonal volt, de a designer menet közben meggondolta magát, így szaggatott lett. Mindkét elemnél ugyanaz a háttér kép (cimhatter.jpg), amit szintén az eredeti Photoshop fájlból szeltem ki. Emlékezzünk arra, hogy megállapodtunk a designerrel, hogy a menük címsorának megjelenése annyiban fog változni, hogy a cím nem az eredetileg tervezett DauphinPlain betűtípussal lesz kiírva (mert ebben az esetben csak képként lehetne megoldani) hanem Ariallal. A cimhatter.jpg 130 px széles, vagyis jóval kisebb mint a rendelkezésre álló 161 px hely. A kettő közötti különbséget 1 px híjján lefedi a 10 px-es jobb és a 20px-es bal padding. Azt az 1 px-et meg meghagytam, hagy kezdjen vele mindegyik böngésző amit akar. A #balsav .modulmenucim többi beállítása azt a célt szolgálja, hogy a a háttérképre kerülő felirat szépen középre kerüljön mind vízszintesen mind függőlegesen.
<div id="vaisnavanaptar">
  <h4 class="modulmenucim">Vaisnava naptár</h4>
  <ul>
    <li><span class="vnaptarhonap">máj.04.:</span>
      Saptami, Jahnu Saptami</li>
    <li><span class="vnaptarhonap">máj.06.:</span>
      Navami, Srimati Sita Devi -- megjelenése</li>
    <li><span class="vnaptarhonap">máj.09.:</span>
      Vyanjuli Mahadvadasi</li>
  </ul>
</div>
<div id="blog">
  <h4 class="modulmenucim">Friss blogok</h4>
  <ul>
    <li><a href="#">Van egy buldózerem...</a>
      <span class="blogcim">(Krisna mosolya)</span></li>
    <li><a href="#">Tüntetés - videó</a>
      <span class="blogcim">(Egy krisnás szerzetes
        naplója)</span></li>
    <li><a href="#">Video - 3rd May 2006 - Kazakhstan
        Embassy Protest</a>
      <span class="blogcim">(Simple Life)</span></li>
  </ul>
</div>
A balsávban egyetlen dolog maradt még hátra (a hátter beillesztésén kívül), az pedig az alsó emberke beillesztése. Ezt az emberkét úgy szeretnénk elhelyezni, hogy mindig a bal sáv legaljára kerüljön. Ez nem is olyan egyszerű feladat, mint első olvasásra gondolnánk, emiatt most lépjünk át a tartalmi részre, és majd alkalomadtán visszatérünk ide.

A balsáv alsó emberkéje

Ennek beillesztését későbbre halasztottam lásd lentebb, hogy miért.

Tartalom

Pakoljuk be a szükséges tartalmat a tartalmi részbe, majd adjunk meg hozzá minden CSS információt. Fogtam egy cikket és egymás után 8-szor bemásoltam a tartalmi részre, aztán minden másodiknál megváltoztattam, hogy merre igazítsa a vezérképet, mivel az éles oldalon is "egyet jobbra egyet balra" lesz az elv.
<div class="cikk">
  <h1 class="cimlap">
    <a href="http://108.hu/index.php?lap=244">
      Muzulmán testvérem
    </a>
  </h1>
  <img src="./img/ids1.jpg" class="vezerkepj" alt="vezérkép">
  <p class="bevezeto">
    Minden nap, mielõtt letöltöm az e-mail-jeimet, elmében
    felkészülök arra, hogy jó, rossz és esetenként kellemetlen
    dolgokkal kell majd szembenéznem. Többszáz tanítványom és sok
    más bhakta is rendszeresen ír nekem, s mindezek miatt a
    természet törvényei arra kényszerítenek, hogy a világ
    különbözõ élethelyzeteinek széles skáláját láthassam.
    <a href="http://108.hu/index.php?lap=244" class="tovabb">
      Tovább »
    </a>
  </p>
</div>
/*tartalom*/
.cikk{padding: 5px 10px 5px 10px;}
h1.cimlap{margin:5px 0 0 0;}
h1.cimlap a{font-size:12px;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:normal;}
#tartalom{padding-top:15px;
  font-family:Tahoma,sans-serif;}
.vezerkep, .vezerkepb, .vezerkepj{border:medium solid white;
  margin:8px 8px 8px 8px;}
.vezerkepb{float:left;}
.vezerkepj{float:right;}
.bevezeto{margin-top:7px;}
.tovabb{font-size:10px;}

Probléma az emberkével



Azt hiszem itt semmi sem szorul magyarázatra, hiszen csak betűtípusokat állítgatunk meg padding és margin értékeket. Talán csak annyi, hogy minden elemet elneveztünk a HTML-ben amihez várhatóan fog valami formázási utasítás (CSS definíció) tartozni. Ha megnézzük az oldalunkat most látni is fogjuk mi a problémás a balsávban az emberke elhelyezésével. A balsáv nem lóg le a lent-ig, hanem csak addig ér ameddig tartalom van benne. Ha a jelenlegi tartalom végére betennénk az emberke képét, akkor ha a tartalmi részen több szöveg van, akkor az emberünk lebegne a levegőben. Ezt most még nem oldjuk meg, de legalább megállapítjuk, hogy ezzel még lesz dolgunk.

A közös háttér

Akkor most elérkeztünk arra a pontra, hogy bepakoljuk a hátteret oda, ahova illik. Bevallom őszintén előszőr azzal próbálkoztam, hogy mind a balsávnak, mind a jobbsávnak, mind pedig a tartalomnak külön külön háttérképet illesztek be. Ezzel az elgondolással az volt a baj, hogy a tartalmi rész tetjén van egy kis boltív. Ez kissé megbonyolította ezt a módszert. Végül úgy döntöttem, hogy egy hátteret adok meg, ami lefedi mindhárom oszlop igényét. Első nekirugaszkodásra kiollóztam az eredeti Photoshop fájlból egy csíkot ami a bal legszélső kékségtől a jobb legszélső kékségig tartott, és így persze 770 px széles lett (khatter.jpg). Előszőr beállítottam a közép div háttereként, de nem működött, mivel ebben a div-ben nincs semmi tartalom mint más div-ek. Így nem maradt más választásom, mint a lap div háttereként beállítani.
#lap{background-image:url('./img/khatter.jpg');}
Nem kell a hátteret pozícionálni, sem a repeat tulajdonságot állítgatni, mivel 770 px széles, tehát kitölti széltében az oldalt, függőlegesen lefelé meg ismételni fogja magától.
#tartalom{background-color:red;}
#balsav{background-color:pink;}
#jobbsav{background-color:gray;}
Persze ahhoz, hogy lássuk a változást a fenti három CSS definíciót ki kell törölnünk. Egy kattintás éééés láss csodát mindenhova odakerült a háttér ahova kell. Ha megnézzük az előző fázis és a jelenlegi közötti különbséget akkor már azt hiszem mindenkinek világossá válik, hogy a lenti részt miért pont ott vágtuk el ahol. Ha majd feltesszük az infópanlet akkor az is egyértelmű lesz. Lényeg, hogy ott vágtam el ahonnan kezdve a tartalom rész háttere (beleértve az oldalsávokat is) egymás alá illeszthető folytonos grafika. Ezzel az ügyes kis CSS trükkel most elértük, hogy az oldalunk egyre jobban kezd hasonlítani ahhoz amit akarunk.

A tartalom rész tető grafikája

Ha jól megnézzük a tartalom részt az eredti design-tervben észre fogjuk venni, hogy a tartalom rész teteje nem a jelenlegi állapot szerint néz ki, ugyanis egy kis boltív zárja felülről. Kiszeltem a design tervből ezt a kis részt, és a tartalom-teto.jpg fájlként elmentettem. Ezt a képet kell beillesztenünk, mint a tartalom div háttérképe, letiltanunk, hogy a háttérkép ismétlődjön, és top-ra pozícionálnunk. Mivel ennek a képnek a jobb és bal felső sarka olyan színű mint a jobbsáv, illetve a balsáv szélén található vékony csík vizuálisan össze fog ezekkel olvadni. Az eredmény lelkesítő.
#tartalom{background-image:url('./img/tartalom-teto.jpg');
  background-repeat:no-repeat;
  background-position:top left;}

Jobbsáv

  • keresés
  • darshan
  • hirdetés
  • apró
  • receptek

Keresés

Ez a hírlevélhez hasonlóan egy egyszerű kis formocska, egyetlen input mezővel, ami a keresett szó beírására szolgál, és egy kis gombocskával, ami elküldi a formot.
<div id="kereses">
  <form method="get" action="keres.php" name="k" id="k">
    Keresés
    <input name="szo" value="" class="bginput" type="text">
    <input name="imageField" src="./img/nyil.gif"
      alt="Keresés" type="image">
  </form>
</div>
A nyil.gif képecskét kellett elkészíteni. Ez egy átlátszó hátterű gif kép, amit az eredeti design tervből vágtam ki és azt a célt szolgálja, hogy elküldje vele a user a formot. A CSS-ünket egy kicsit azonban módosítanunk kell, mivel a jobbsávnak egyelőre nem adtunk meg padding értéket, és így minden benne lévő elem a széléhez ragadna. Nem akarunk mindennek külön-külön padding értékeket rendelni, ezért a jobbsávra meghatározunk egy 4 px-es bal oldali és egy 10 px-es jobb oldali paddingot. A jobb oldalon azért kell nagyobbat beállítani, mert a jobb szélen lévő sötétkék csíkra már nem akarjuk engedni az elemeinket rálógni. Azonban nem szabad elfeledkeznünk arról, hogy az oldalunk fix pixelszélességgel dolgozik, és a jobbsáv szélességét már beállítottuk 141 px-re, mivel ekkora hely van a jobb oldalon. Ha most adunk neki jobb és bal oldali paddingot, akkor a width értéket ezek összegével csökkentenünk kell, hogy továbbra is ugyanakkora helyet foglaljon.
#jobbsav{width:127px;}/*127=141-10-4*/
#jobbsav{padding:3px 10px 0 4px;}

Darshan

<div id="darshan">
  <h4 class="modulmenucim">Darshan</h4>
  <a href="#">
    <img src="./img/thumb_R060423.JPG" alt="darsan">
  </a>
  <a href="#">
    <img src="./img/thumb_14.JPG" alt="darsan">
  </a>
</div>
/*darshan*/
#darshan{text-align:center;
  text-transform:uppercase;
  margin-bottom:20px;}
#darshan img{border:medium solid white;
  margin-bottom:20px;}
Szokásunkhoz híven ennek az elemnek is létrehozunk egy új divet, nagybetűsre állítjuk a szöveget, és a kép és szöveg közé, valamint a képek közé 20 px-es távolságot (alsó margint) állítunk be. A képekre pedig rátesszük ugyanazt a fehér keretet amit a tartalmi részen is használtunk. A design tervben nem volt semmi szó arról, hogy hogyan jelöljük a kattintható képeket. A designer azt mondta, hogy elegendő lesz, ha az egérmutató megváltozik, tehát ezzel nem kell semmit csinálnunk. Ezzel is megvolnánk.

Hirdetés

Ez volt a lehető legegyszerűbb elem, mivel itt csak egy képet kell beilleszteni, ami ugyan minden egyes oldalletöltésnél más lesz, de garantáltan mindegyik ugyanakkora méretű. Egyetlen dolgot kell a CSS-ben is csak tennünk letiltani, hogy a kép körül keret jelenjen meg. Emlékezzünk rá, hogy a jobbsávnak megadtunk némi jobb (10 px) és bal (4 px) oldali paddingot, és így a jobbsávban használható területünk szélessége (a jobbsáv width értéke) 127 px. Ha esetleg ide beteszünk egy ennél szélesebb képet, akkor az oldalunk szét fog esni, és a jobbsáv becsúszik a balsáv alá. Ugyanez fog történni akkor is, ha akár a balsávba, akár a tartalmi részre nagyobb képet illesztünk be mint amekkora hely van ott. Az ilyen megkötéseket nem árt felírnunk magunknak, nehogy érjen valami meglepetés bennünket az oldal működtetése közben.
#hirdetes img{border:none;}
<div id="hirdetes">
  <a href="http://goloka.hu/">
    <img src="./img/banner.jpg" alt="hirdetés">
  </a>
</div>

Apró

12. fázis


<div id="apro">
  <h4 class="modulmenucim">
    <a href="#">Apró</a>
  </h4>
  <ul>
    <li>Van egy pár darab eladó Mrdanga és Harmónium! Mrd... 
      <a href="#" class="modulmenuszoveg">»»</a>
    </li>
    <li>Van sok-sok receptünk amit szeretnénk megosztani a...
      <a href="#">»»</a>
    </li>
  </ul>
</div>
/*apro*/
#apro{color:#114867;
  margin-top:10px;}
#apro .modulmenucim{margin-left:10px;}
#apro li{border-bottom:thin dashed white;
  margin-bottom:8px;}
Beállítjuk az apróhirdetésekből megjelenő szövegek színét (Photoshop pipetta szerint ez volt), valamint egy 10 px-es felső margint. Az "Apró" feliratot 10 px-el balra betoljuk, valamint megadjuk, hogy az egyes elemeknek vékony, fehér, szaggatott vonal legyen az alsó határolója (border), és hagyunk nekik némi térközt, hogy kényelmesebben olvashatóak legyenek. Ezzel még nem vagyunk készen, le kell tiltanunk az ul + li elemek automatikusan definiált behúzását, és a li elemek előtt megjelenő kis bogyókat. Mivel ezeket általánosan a jobbsáv teljes terjedelmében alkalmazni akarjuk, ezért nem az apró elemnek, hanem a jobbsávnak a CSS-ét módosítjuk. Így ha valami új elemet szeretnénk majd a jobbsávhoz adni, ott nem kell ezekről külön gondoskodni, mivel örökölni fogják ezeket a tulajdonságokat a jobbsávtól.
#jobbsav li{list-style-type:none;}
#jobbsav ul{padding:0 0 0 0;
  margin:0 0 0 0;}

Receptek

13. fázis



A receptek elemünk egy lekerekített tetejű és aljú doboz. Ennek elkészítéséhez a designtervből ki kellett ollózni két kicsi részt, az egyiket a doboz tetejeként, a másikat a doboz aljaként fogjuk használni. Ezek a jobb-doboz-teto.jpg és a jobb-doboz-alj.jpg.

Létrehozunk egy divet a receptek kezelésére, ami a receptbox nevet kapja. Ezen belül 3 különálló div van, az elso a receptteto, a második a receptek, a harmadik pedig a receptalj. A receptteto es a receptalj box nem tartalmaz mást, mint az oda illő segédképecskét, maga a tartalom (a recept felirat, a kép és az étel neve) a receptek elemben vannak.
<div id="receptbox">
  <div id="receptteto">
    <img src="./img/jobb-doboz-teto.jpg" alt="boxtető">
  </div>
  <div id="receptek">
    <h4 class="modulmenucim">
      <a href="#">Receptek</a>
    </h4>
    <p class="modulmenuszoveg">
      <a href="#">
        <img src="./img/matarpaneer.jpg"
          alt="recept" height="70" width="100">
      </a>
      <a href="#">
        Matar paneer
        (Zöldborsó és házisajt paradicsom mártásban)
     </a>
    </p>
  </div>
  <div id="receptalj">
    <img src="./img/jobb-doboz-alj.jpg" alt="boxalj">
  </div>
</div>
A CSS-ben le kell tiltanunk minden esetlegesen előbb beállított, örökölt vagy alapértelmezett margint és paddingot ahhoz, hogy a dobozunk szét ne essen. A többi beállítás már csak a megfelelő színekről, betűméretekről és elhelyezkedésekről gondoskodik.
/*recept*/
#receptbox, #receptteto, #receptalj{margin:0 0 0 0;
  padding:0 0 0 0;
  width:124px;}
#receptek{background-color:#114867;
  padding:1px 2px 1px 2px;
  text-align:center;}
#receptek .modulmenucim{padding:13px 0 20px 0;
  font-size:16px;}
#receptek img{border:medium solid white;
  margin-bottom:15px;}
#receptek .modulmenuszoveg{margin-bottom:30px;}
#receptek a:link{text-decoration:none;}
#receptek a:hover{text-decoration:underline;}

Infópanel

Még valahol az elején elhagytuk az infópanel összerakását, de most már erre is sort kell kerítenünk. Ehhez mindenekelőtt szükségünk lesz az infópanel háttérképére, ez lesz az infopanel.jpg. Ezt is úgy vágtuk ki, mint a lenti rész képét, hogy ez alatt a tartalom rész háttérképe már akadálymentesen sokszorozható legyen. Erre fogjuk majd rápakolni azt a sok-sok információt ami ezen a felső részen kell, hogy megjelenjen.

Infopanel minta



Az infópanelen négy féle dolgot azonosíthatunk be, bal szélen az adott napi vaisnava naptár szerinti esemény, melette a nap és hold kelték, nyugták, melette a nyugati naptár információi, névnapok, és végül jobb szélen a userek bejelentkezésére szolgáló form. Nagyon ügyelnünk kell ezeknek az elemeknek a függőleges kiterjedésére, mivel az eredeti design elképzelés meghatározott keretek közé szorítja az infó panel magasságát.
<div id="infopanel">
  <div id="tithi">
    Gaurabda 520 Madhusudana Masa<br>
    Sula Pusyami G<br>
   <strong>Saptami</strong>
  </div>
  <div id="naphold">
    <div style="float: left;">
      a nap kel: 05:21<br>
      nyugszik:20:00
    </div>
    <div style="float: left; margin-left: 15px;">
      a hold kel: 10:31<br>
      nyugszik:02:11
    </div>
  </div>
  <div id="naptar">
    2006. május. 04.<br>
    18. hét (123/242)<br>
    <strong>Mónika, Flórián</strong>
  </div>
  <div id="belep">
    <form action="be.php" method="post" name="userbe">
      <div id="belepadat">
        név <input name="user" type="text" /><br>
        jelszó <input name="userpass" type="password" /><br>
      </div>
      <input name="imageField" src="./img/nyil.gif" 
        alt="Bejelentkezés" class="belepnyil" align="middle"
        type="image" />
      <div id="belepegyeb">
        elfelejtett jelszó | 
        <a href="#">regisztráció</a>
      </div>
    </form>
  </div>
</div>
Mind a négy fő elemet balra floatoljuk és %-osan megadjuk a szélességüket. (Ha esetleg valaki összedná a %-okat végeredményül nem 100%-ot fog kapni. Ez azért van így, mert az IE meglehetősen makacsan harcolt az ellen, hogy az infópanel működjön. Végül ezzel a kis trükkel sikerült becsapni.) A naphold div-en belüli két elemünket is balra floatoljuk. A betűméretek illetve a térközök értékeit próbálgatásos módszerrel állítottam be ezekre amik most itt láthatóak, és bevallom őszintén, hogy az egész oldal kiépítésében ez volt az egyik legidőigényesebb feladat. Meghatározott méretű helyen kellett elférni ezeknek az információknak (mivel az infopanelem a design terv szerint pontosan 770*65 px) és a különböző böngészőprogramok és különböző operációs rendszerek jelentősen eltérő eredményre vezettek.
#infopanel{height:45px;}/*65-10-10*/
/*fent*/
#infopanel{background-image:url('./img/infopanel.jpg');
  color:black;
  font-size:10px;
  padding:10px 0 10px 25px;}
#infopanel strong{color:#600;
  font-weight:normal;}
#tithi{float:left;width:30%;}
#naphold{float:left;width:25%;}
#naptar{float:left;width:20%;}
#naphold{padding-top:5px;}
#naptar{padding-right:25px;}
#belep{float:left;width:20%;
  font-size:10px;}
#belepadat input, #belep submit{height:12px;
  width:100px;
  border:none;
  background-image:url('./img/input-bg.jpg');
  font-size:10px;}
.belepnyil{margin-top:8px;}
#belepadat{float:left;}
#belepegyeb{font-size:9px;}

Az alsó emberke grafika beillesztése

Most már csak egyetlen egy dolgunk maradt hátra a design megvalósításához, az pedig annak az emberkének a bal oldali oszlop (de nem a balsáv) aljára való helyezés, akit még a cikk jóval fentebbi részén elhagytunk. Emlékeztetőül az a promlémánk vele, hogy a balsáv nem fog leérni a lenti részig abban az esetben ha a tartalom rész tartalma hosszabb a balsáv tartalmánál. Mivel közös hátteret adtunk a balsávnak és a tartalomnak vizuálisan ez nem látszik, de amint megpróbáljuk beilleszteni a balsáv aljára az emberkét szembesülni fogunk a problémával.

Probléma az emberkével



Mit tehetünk? Némi trükkhöz kell folyamodnunk. Be kell vezetnünk kettő új divet. az egyiket közvetlenül a lap div után (lapalj), a másikat pedig a balsav div zárása elé (balsav-lapalj-seged). A kezdeti csontvázunk a következők szerint módosul.
<div id="lap"><div id="lapalj">
  <div id="fent">
    <div id="fejlec">
      fejlec
    </div>
    <div id="infopanel">
      infopanel
    </div>
  </div>
  <div id="kozep">
    <div id="balsav">
      balsáv
    <div id="balsav-lapalj-seged"></div>
    </div>
    <div id="tartalom">
      tartalom
    </div>
    <div id="jobbsav">
      jobbsav
    </div>
  </div>
  <div id="lent">
    lent
  </div>
</div></div>
Először is szeleteljük ki a design tervből az emberkét.

Emberke



A kivágott kép az eredeti Photoshop fájlból származik (minek írom ezt le mindig, hát honnan a rákból szedném?), és úgy van kivágva, hogy a bal széle kimegy egészen a bal szélen lévő kékségig. Ezt azért így csináljuk, mert amikor beillesztjük a képet a bal szélhez fogjuk ragasztani. A kép 267 px magas, és amint látható, van egy nagyobb üres hely az alján. Pontosabban szólva 61 px van az emberke lába és a kép alja között. Ezt a képet adjuk meg a lapalj div háttérképeként és balra és alulra igazítjuk. Mivel ez az új div a minden eddigi diven kívül van (kivéve a lap-ot) a lent "alá" fog kerülni, vagyis a lent erre rá fog takarni. Mivel a lent 61 px magas, ezért a kép alján hagyunk egy ugyanekkora szabad helyet, amit a lent nyugodtan betakarhat. Ha ezt nem hagynánk meg, az emberke nem látszana csak térd fölött.
#lapalj{background-image:url('./img/bhakta.jpg');
  background-repeat:no-repeat;
  background-position:bottom left;}
Az emberkével még mindig akad egy kis dolgunk, ugyanis abban az esetben ha mégsem a tartalom rész a hosszabb, hanem a balsáv, akkor az emberkénk becsúszna a balsáv alsó része (esetünkben a friss blogok) alá. Ahhoz, hogy ez ne történhessen meg gondoskodnunk kell arról, hogy itt mindig legyen akkora hely ami a kép beillesztéséhez szükséges. Ezért vezettük be a balsav-lapalj-seged div-et. Ennek adunk egy 201 px-es magasságot (ekkora a kép lényegi része). Így ha a balsáv hosszabb mint a tartalom, akkor a balsáv lapalj segéd működésbe lép és kihagy ott egy akkora helyet ahova az emberkénk befér. Ha a tartalom elem a hosszabb, akkor is kihagyja ezt a helyet, de az emberkénk nem ebbe fog belekerülni, hanem szépen lecsúszik a tartalom rész aljának a vonalába.
#balsav-lapalj-seged{height:201px;}
Ezzel a design megvalósításának a végére is értünk.

Utómunkálatok

Amit ezek után még érdemes megcsinálni, az az, hogy minden lehetséges módon leteszteljük az oldalt minél több operációs rendszerben és minél több böngészőben (szöveges böngészőkkel is), és nem lepődünk meg, ha az IE ad még egy pár meglepetést. Aztán el kell készíteni egy nyomtatásra optimalizált print.css fájlt. Integrálni kell a megvalósított designunkat abba a CMS-be, amit a weblap használ, az esetleg be nem célzott linkeket (<a href="#">) pedig be kell célozni.

Itt a vége fuss el véle. Aki kíváncsi a jelenleg működő kész weblapra az nézze meg a 108.hu-t.
 
rrd arcképe
rrd
rrd 1998 óta foglalkozik webes fejlesztéssel. A HTML-től indulva először a PHP majd a JavaScript felé fordult. A mobil tech előrelépésével belekóstolt az Android fejlesztés világába is.

Nagy rajongója a CakePHP, a jQuery, a Prototype, és a Scriptaculous keretrendszereknek, az open sourcenak, és a pizzának. Mindezek folyamatosan jelen vannak a webes munkáiban.
1

Nagyon jó

nevergone · 2006. Júl. 4. (K), 09.21
Ez egy nagyon jó és hasznos cikk, jól összefoglalja a munkát a kezdettől a végéig.
Köszönöm. :)
2

amazon turk irány

Anonymous · 2006. Júl. 4. (K), 11.25
kafa cikk
3

Köszönjük

Granc Róbert · 2006. Júl. 4. (K), 12.13
Jó leírás, köszi!

Szorosan hozzá kapcsolódva: http://doransky.hu/?p=245

/r.
22

poén

Walkman_ · 2006. Júl. 5. (Sze), 23.43
Ez nagyon durva :) Tetszik és tényleg van benne igazság sok :)
4

thx

PeterWeb · 2006. Júl. 4. (K), 12.47
Hasznos leírás, külön köszönet az IE bugok megoldásainak részletes leírásáért!
5

Ráfordított idő

zmb · 2006. Júl. 4. (K), 18.28
Nagyon tanulsagos az iras, de azt meg szabad tudni, hogy ez a tortenet tenylegesen hany orat vett igenybe?
12

időigény

rrd · 2006. Júl. 5. (Sze), 08.56
Mármint a cikk megírása mennyi idő volt? ;)

Ha arra vagy kíváncsi, hogy mennyi idő alatt lehet egy grafikai tervből egy (CMS-be még nem integrált) kész html oldalt összerakni, az sok mindentől függ. De valami ilyesmire elég egy délután.
6

Szép anyag

Bártházi András · 2006. Júl. 4. (K), 18.50
Csak gratulálni tudok a hiánypótló leírás elkészítéséhez, illetve köszönöm a többiek nevében is. Én pár dolgot másképp csináltam volna ugyan (főként az adott oldalrészek elnevezését, a CSS-ek tördelését, megoldásokat illetően), de ez nem von le semmit annak az értékéből, hogy magát a folyamatot sikerült igen jól megfognod és leírnod, kiválóan kiemelve a fontos döntési helyzeteket, néhány tipikus problémát.
13

máshogy?

rrd · 2006. Júl. 5. (Sze), 09.00
Többek között azt is nagyon szeretem a css-ben, hogy ugyanazt a problémát általában minimum 3 féleképpen meg lehet oldani. Az elnevezésekre meg biztosan van mindenkinek egy jól bevált módszere, amit rajta kívül senki sem ismer, de az a legjobb. :) Az enyém ilyen.
A magam részéről azért kíváncsi lennék a tiédre!
17

elnevezes

ashnur · 2006. Júl. 5. (Sze), 09.26
nekem is szemet szurtak. nem massal van bajom, mint a bal meg jobb elnevezesekkel.

ugyanis en peldaul ha egy harom hasabos oldalt keszitek akkor nem feltetlenul
bal,kozep,jobb sorrendben irom azt a tartalomban. altalaban a kozep(ami nalam a tartalom, vagy content nevet viseli) az elso.
ez akkor valtozik ha valami az oldal navigalasahoz elengedhetetlenul szukseges cucc van valamelyik masik hasabban. ilyenkor az eleje kerul. hacsak nem tul hosszu vagy nem tartalmaz sok folosleget.

szoval, nem epp kovetkezetes valamifel teljesen relativ, szubjektiv dolog szerint elnevezni a dobozokat, sokkal erthetobb es hasznosabb ha olyan elnevezesuk van ami tukrozi a tartalmukat.

pl: fejlec, infopan ok, de lent > lablec
28

Css elnevezések

Anonymous · 2006. Júl. 7. (P), 14.14
Abban én is egyetértek a, hogy hasznos a középrészt előre tenni, és a balt meg a jobbot fontossági sorrendben, ha más nem akkor kereső optimalizálás szempontjából, illetve pl a google, is az oldal "elejéről" vesz ki szövegrészt, ilyenkor szerintem jobb ha nem a menüt rakja be, hanem valami szöveget az oldalról.

Másfelől minden elismerésem az írónak, bizti nem 1 délután volt a cikk megírása:)
7

XML deklaráció

zmb · 2006. Júl. 4. (K), 19.07
Csak egy aprocska megjegyzes. Valamiert az Explorer az xml deklaraciot nem szereti, ha azt kigyomlalod, akkor szepen bekerul kozepre, es a bal also kis ficko se fog repkedni.
8

köszönjük

Anonymous · 2006. Júl. 4. (K), 19.22
és köszönjük és köszönjük. Az ilyen kész megoldásokból lehet tanulni! Nagyon jó cikk főleg hogy teljesen a legelejétől a legvégéig mindent, nagyon remek!!
9

hibák az átemelésnél

Marcell · 2006. Júl. 4. (K), 20.50
Többször is olvasni olyan szöveget a cikkben, ami megkívánná, hogy link legyen - úgymint pl a "A lapunk itt tart." mondat. Ezekről a linkek gondolom a cikk átemelésénél maradtak le.
14

itt járunk

rrd · 2006. Júl. 5. (Sze), 09.04
Igen én is láttam, de azt hiszem András direkt hagyta ki őket, mert ezek az oldal aktuális álapotát mutatják, és gondolom nem akarta a weblabor lapot kiszolgáló css filet és a kiszolgáló rendszert megerőszakolni, hogy egy totál más felépítésű oldalt is meg tudjanak jeleníteni.
20

egy sima link kéne csak

Marcell · 2006. Júl. 5. (Sze), 17.50
Akkor miért nincs csak egy sima link ott, ami a te oldalara mutat - magára a JPG-re?
24

nyugi

Bártházi András · 2006. Júl. 6. (Cs), 12.40
A hibák és hiányosságok azért vannak a cikkben, mert idő hiánya miatt már több hete húzódott a megjelenése. Végül úgy döntöttem, hogy megformázok belőle annyit, amennyit tudok, a többit pedig akkor, amikor tudom. Szerintem a jelenlegi állapot nem ront az érthetőségen, és egy jó kompromisszum volt ahhoz, hogy végre megjelenhessen ez a kiváló cikk. A nem szakmai hibajelzéseket kérlek ne itt, a cikkhez kapcsolódóan tegyétek meg, mert nem ide illenek. Előbb-utóbb ki lesznek javítva, a legtöbbről tudok.
10

fix hosszú bevezető? :)

Marcell · 2006. Júl. 4. (K), 21.45
A tartalmi részen a képek meletti szöveg a tervben mindig pontosan a kép alsó szélének a vonalában fejeződött be. Ez az éles oldalnál valószínűleg nem így fog történni, a tartalom felelős nagy nagy valószínűséggel néha rövidebb, néha hoszabb bevezető szövegeket fog írni. Ezek miatt az éles oldal tartalmi része nem lesz ilyen rendezett mint a tervben.

Miért ne lehetne? Csinálsz egy scriptet, ami ha hosszú a bevezető, levágja (persze nem figyelve a HTML tagokra), ha pedig rövid, akkor feltölti "lorem ipsum"-mal a megfelelő karakterszámig!!! :))

Így tuti megfelelő hosszú lesz!
15

megfelelő hossz

rrd · 2006. Júl. 5. (Sze), 09.07
Igen, ezt lehet, csak ez nem css. Css-sel is lehetne valamit alkotni (overflow), de a lap gazdája nem akart félbevágott mondatokat a címlapon.
11

Első futam

yaanno · 2006. Júl. 5. (Sze), 08.04
"A menü" c. résznél tartok éppen, de mivel a elég nagyon hosszú, gyorsan reagálnék az "A menü"-ben említett css megoldásra.

Egyrészt nem mondtad meg a cikkben (ill. nem utaltál rá) hogy mi is ez a bug, másrészt felesleges a menuheight class bevezetése, mert így nincs igazán funkciója a dolognak. Egy feltételes "utasítással" az IE számára betölthetnéd egy külön fájlban (pl. IEhacks.css) a külön az IE számára létrehozott kódot anélkül, hogy a hackelés "áldozatául esne" a template-ed.

Olvasom tovább :) ...
16

ie bug

rrd · 2006. Júl. 5. (Sze), 09.13
Nem tudom, hogy hogy hívják ezt a bugot. A tapasztalat annyi, hogy az IE nem jól állítja be a magasságot.
A feltételes belinkeléssel igazad van, de a magam részéről sosem használom a feltételes css deklarációkat, inkább addig gyűröm, amíg többé-kevésbé nem kapom ugyanazt az eredményt a nagyobb böngészőkben.
18

felteteles linkeles

ashnur · 2006. Júl. 5. (Sze), 09.31
en is sokaig hackelgettem de butasag.
eloszoris. nem foglalkozunk az IEvel mig kesz nincs az oldal. semmi ertelme orakat szarakodni olyasmikkel amik lehet kesobb maskent megoldodnak.
masodszor: egy kulon css file attekinthetove teszi az IE szamara keszult kodot, raadasul biztos lehetsz benne hogy ervenyes lesz, stb.
harmadszor. a felteteles kommentek biztosithatjak hogy tenyleg csak az ieben es annak is csak a megfelelo verzioiban mukodik az a specifikus kod.


szoval minden szempontbol jobb mint osszevissza * html stilusu hackeket beszurkalni
19

Hackelés

yaanno · 2006. Júl. 5. (Sze), 11.54
Valószínű, hogy nem úszható meg a hack, csupán arra utaltam, hogy ha van x (és mondjuk x > 2) listaelemmel megoldott linked, ahol várható valamilyen megjelenítésbeli hiba, akkor érdemes nem a template kód részét terhelni az ilyesmivel.

Szvsz erre sokszor azért nem figyelünk oda, mert Mo-n a sávszélességért nem fizetünk (csak a felhasználó esetleg), külföldön azonban éppen ez az, amit meg kell fizetni - ebből kifolyólag a fejlesztők ott igyekeznek a fájlok méretét minimalizálni a sok kicsi sokra megy elv alapján. Occam borotvája, tableless oldal és ilyenek :)
31

menü

ratson · 2006. Júl. 10. (H), 11.19
a menuheight-os span bevezetése szerintem is fölösleges, az egész kikerülhető ha a linknek (<a...) adunk magassságot+szélességet+hátteret, így még ráadásul az egész gomb linkként fog működni nem csak a szöveg (a gombban).
21

width = "720px" ???

Marcell · 2006. Júl. 5. (Sze), 18.25
Nem kötekedésképp, de olyan, hogy
<object type="application/x-shockwave-flash" data="./sites/108.hu/img/head.swf" width="770px" height="180px"><param name="movie" value="./sites/108.hu/img/head.swf" /></object>
nincsen, legalábbis nem éppen valid.
23

width

rrd · 2006. Júl. 6. (Cs), 10.00
igen igaz, bocsika.
30

valid

ratson · 2006. Júl. 10. (H), 11.15
szintén nem kötekedésként, de valid.
tud esetleg valaki jobb (és szintén valid xhtml) módszert flash beillesztésére??
36

Validra

Anonymous · 2006. Júl. 17. (H), 13.00
Egy megoldás valid flashre
http://www.alistapart.com/articles/byebyeembed

A cikk tényleg jó, de a thumbnailes rész árnyékát 3 divből össze is lehet hozni. Mondjuk egy jókora árnyékrész aminek egyedül az alja és jobb oldala "hiányzik". Ez backgroundban, ebben egy másik div amiben a jobb also sarok kerül szintén backgroundban csak jobb alura igazítva (margin-left és top pl 10px a lekerekítésekhez és eltartáshoz balról, hogy ne takarjon rá az alatta lévőre). Végül ebben az képnek a divje aminek meg margin-right meg bottom 10px a jobb és alsó eltartáshoz hogy ott ne takarjon rá az árnyékra.
Én általában az ilyenek nagyobbra csinálom, hogy akár máshoz is fel tudjam használni pl szövegdobozként vagy kiemelésként.
25

Cikk

András · 2006. Júl. 7. (P), 06.06
Jópofa cikk.
26

Szélesség

sajt · 2006. Júl. 7. (P), 08.03
Szerintem nyugodtan maradhatott volna az oldal 900px széles, maximum akkor a jobb oldali oszlop nem látszódik.

Egyébként tényleg jó a cikk és az is látszik, hogy fél év alatt mennyit lehet fejlődni ebben a témában. (http://weblabor.hu/cikkek/csstablazatnelkuli).
29

jobb oszlop???

Marcell · 2006. Júl. 8. (Szo), 22.18
maximum akkor a jobb oldali oszlop nem látszódik.
És az miért jó??? Ha már odaterveztem, lássák is rendesen. A legidegesítőbb dolgok egyike, mikor 10 pixel híján van gördítősáv vízszintesen.
27

Sokaknak hasznos

moncsibe · 2006. Júl. 7. (P), 11.10
Tényleg jó, hogy felkerült egy ilyen cikk is. Én is hasonló módon járok el, egy oldal elkészítésekor, s örülök, hogy jó úton haladok :)

Köszönet a szerzőnek, hogy vette a fáradtságot és megírta!
32

elismerés

aston · 2006. Júl. 10. (H), 19.04
Riszpekt és köszönet a cikkért.
33

Valid

djcomplex · 2006. Júl. 16. (V), 16.22
Vannak benne jó dolgok, de nem valid a kód.
Nagyon csúnya, hogy a tartalmi részben nincs margó, aztán vonaltól mindjárt szöveg van.
Az, hogy van egy ilyen cikk tényleg jó dolog lehet annak, aki még most ütközik ezekbe a problémákba és esetleg angolul sem tud.
A transitional helyett javaslom a strictet.
34

Strict vs Transitional

Jano · 2006. Júl. 16. (V), 18.19
A szerző pontosan megindokolja a cikkben, hogy miért döntött a Transitional mellett!
35

Érdemes lenne

nevergone · 2006. Júl. 17. (H), 03.25
Érdemes lenne egy cikkben felvázolni ezeket a módokat. Hogy miért, és hogyan alakultak ki, milyen módok vannak, és ezek közt mi a különbség. Úgy gondolom, hogy az igazi probléma, hogy a sok fejlesztő nincs ezzel teljes mélységben tisztában (bevallom, én sem), és így nem tudja a megfelelő módot kiválasztani.

És valóban nagyon jó a cikk, sokat tanultam belőle, köszönöm. :)
45

Érdemes lenne

Anonymous · 2006. Aug. 2. (Sze), 09.28
http://www.w3schools.com/xhtml/xhtml_dtd.asp

http://www.w3schools.com
37

Kérdés

Anonymous · 2006. Júl. 19. (Sze), 20.25
Kezdő weblap készítőként nagyon örültem ennek az írásnak, viszont leakadtam a következő mondatnál ..."Integrálni kell a megvalósított designunkat abba CMS-be, amit a weblap használ".... Ez pontosan mit takar, hogyan lehet megvalósítani? Erről lehetne bővebben is hallani?
38

attól függ

nevergone · 2006. Júl. 20. (Cs), 09.26
Ez szerintem már a használt CMS -től függ. Hiszen, amit készítettél, az lehet egy Drupal smink, más CMS -eknél téma, vagy bármilyen, az oldal kinézetét szabályozó megoldás.
Tehát úgy gondolom, erről nem lehet általánosságban írni.
39

CMS-be integrálás

rrd · 2006. Júl. 22. (Szo), 14.22
Igen, ez már CMS függő, mivel mindegyik másképpen fogja megoldani a megjelenítést. Gondoltam rá, hogy írok majd egy cikket ahol leírom egy konkrét CMS integrálási folyamatát, de bizonytalan vagyok, hogy mennyire lenne hasznos általánosságban...
47

Hasznos lenne

Anonymous · 2006. Aug. 22. (K), 15.59
Engem például nagyon érdekelne, hogy ez hogy megy.
Ennek az oldalnak az integrálási példája érdekes lenne. Ha már ennyit írtál a dizájn készítéséről, akármennyire is specifikus az a rendszer amit ehhez használtok, jó lenne látni hogyan jártatok el. :)

S.
40

CSS-ben megadott magasság

Anonymous · 2006. Júl. 26. (Sze), 16.57
Szevasztok!

Feldobom a kérdést, mivel úgy is témába vág!
Szeretnék az oldalmra egy 100% magasságú div-es réteget, CSS-ben megadtam a tag magasságát (width:100%), müködik is, de csak akkor ha nem deklarálom az oldal Doctype-ját.
Ha bármilyen html, vagy xhtml formutumra deklarálom, figyelmen kivül hagyja a a css-ben megadott magasság értéket.

Valakinek valami ötlete, hogy hogy lehetne megoldani, hogy deklarált Doctype mellet is müködjön a 100%-os magasság ?
Szeretnék mindenképp valid kodú oldalt...

Előre is köszönöm!
41

off, wtf

Őry Máté · 2006. Júl. 26. (Sze), 19.13
1: nem, nem vág témába.
2: height-ra gondolsz? amúgy a height: 100%-kal nem sokra mész. a w3c szerint egy (teljes) weblap függőleges irányban nem méretezendő.
42

Szülő

Jano · 2006. Júl. 26. (Sze), 19.58
Gondold végig, hogy a 100% az egy relatív szám, minek a 100%-a? A szülő elemnek. Ha szabványos doctype-ot adsz meg, akkor a HTML elem lesz a gyökér elem és ennek kell megadni magasságot.
43

100% magasság

Anonymous · 2006. Júl. 26. (Sze), 20.46
hát igen, az itt a kérdés, hogy mit jelent a 100% neked?
44

OFF!

Bártházi András · 2006. Júl. 27. (Cs), 07.02
Ez a kérdés nem kapcsolódik a cikkhez. Vonuljatok át a fórumba.
46

LJ

Anonymous · 2006. Aug. 22. (K), 00.35
10% miatt lejebb venni 770-re szvsz hülyeség. Én pont ezt nem szeretem mikor van tartolom nem is kevés 3 oszlop és össze van nyomva. Szerintem egy ilyen oldalnak tényleg vagy 900-nak kéne lennie vagy inkább 1000px-nek az pont belefér a függőleges gördítősávval együtt 1024-be.És akkor már inkább tervezem úgy hogy 800x600-ba beleférjen a menü +a közepe és pont nem a jobb része, mert azért általában a jobb oldalon a kevésbé hasznos cuccokat rakjuk. És ezt nem azért mondom mert 19-es monitorom van 1280x1024-ben.
De a cikk az hasznos és nagyon jó, thx.
48

design terv

Anonymous · 2006. Aug. 26. (Szo), 13.14
Sziasztok! Gratulálok rrd, nagyon jó a cikk. Az lenne a kérdésem hoy hol lehet olyan tutorialt találni ahol leírják. Egy oldal design tervéne elkészítését PS-ban?
49

photoshop tutorial

rrd · 2006. Aug. 28. (H), 11.08
Szerezz be egy könyvet ami megtanítja a fotósbolt alapjait, aztán annyi tudással már találsz a neten különböző tuorialokat, tippeket, trükköket amikkel együtt már össze fogsz tudni rakni egy tervet.

Ezek a leírások viszont sajnos nem helyettesítik a gyakorlatot és a fantáziát. Ez a keserű tapasztalatom ;)
50

"Nesze neked tipográfia."

Anonymous · 2006. Aug. 29. (K), 16.02
A tipográfiát a HTML öli meg, nem a designer.
51

betunoveles ff alatt

Anonymous · 2006. Aug. 29. (K), 23.47
sajna ha firefox alatt ctrl++ nyomok az oldal azonnal szethullik apro pici alkoto elemeire. mas oldalaknal (pl weblabor:) ) legalabb egy ctrl++ kibir a dizajn, vagy eppen van betunovelo funkcio. szoval nem tartom egy jol megtervezett oldalnak.

a cikk nagyon jo, sok ilyen kene. jo latni, h dolgoznak masok.

(flashben van egyaltalan vmi animacio?)
52

szétesik

rrd · 2006. Aug. 30. (Sze), 09.05
hm. Amikor utoljára néztem nem esett szét. Utánna kell nyomoznom, hogy mit változtattam azóta rajta. Általánosságban arra törekszem, hogy 2 betűméretnövelést elviseljen az oldal.

A flash meg folyamatban (elvileg...)
58

css tutorial

beh1 · 2007. Feb. 10. (Szo), 22.38
Háát, a Dreamweavernek van css tutorialja, meg a youtubeon is lehet találni, bár ezek elég alapok, nem ilyen összetettek, mint ez a cikk. Remélem azért segítettem.
53

Drakula

pgx · 2006. Szep. 23. (Szo), 02.39
Mega-drakulálok a cikkhez, olvasmányos, életszerű és érdekes! :-)
Üde színfoltjai a gyakorlati kiegészítések (megrendelő-designer VS. Te párviadalai), amelyek MINDEN megrendelt munkánál így (és jobban) jelentkeznek!
54

Jó kis cikk, de valami hiányzik?

cbastiano · 2006. Okt. 15. (V), 17.56
Nagyon jó cikk. Kösz szépen.
Viszont azt hiszem valamit kifelejtettél belőle amit bele terveztél. És pedig: még a cikk elején írtad "valamint az oldalsó margin-ok autora állításával gondoskodtunk az egész oldal középre igazításáról. (IE alatt ez nem fog működni, erre majd később vissza kell térnünk.)".

Ugyan evvel a problémával találkoztam én is hogy IE alatt nem tudom középre igazítani az egyik fő DIV-et. Ha a CENTER-t vagy egy DIV ALIGN="center"-t használom akkor ez megoldja a problémát, viszont később egy DIV-en (melyet balra float-olok) belüli TABLE-ket az Opera nem tud balra igazitani. (Automatikusan középre teszi és legfeljebb csak jobbra lehet igazitani.)
55

középre igazítás IE-ben

rrd · 2006. Okt. 19. (Cs), 14.13
Hát ha kimaradt, én úgy szoktam megoldani, hogy a body-nak adog egy text-align:center-t, és az ezt követő teljes oldalt magában foglaló "lap" divnek pedig egy text-align-left-et. azért nem írtam bele mert egyrészről elfelejtettem, másrészről meg egy ilyen oldalra szerintem nem illenek a "bugot buggal" tipusú megoldások.
56

Egy kis segítséget kérnék!

Anonymous · 2006. Nov. 27. (H), 19.20
Hello
Köszi szépen, nagyon hasznos ez a tutorial és az a jó benne hogy pl: én most kezdtem el foglalkozni a CSS-es és csak annyit csináltam hogy utánaolvastan 1-2 kifejezésnek de az egész érthető.

Viszont akadt benne 2 problémám amit nem tudok megoldani:
1) IE-ben nem megy a középreigazítás. Ha valaki tudna benne segíteni annak nagyon hálás lennék.

2) Egy olyan oldalt csináltam én is aminek a középső része 3 divből áll, viszont azt nem tudom hogy milyen parancsal lehet megadni hogy mind a 3 div egyforma hosszú legyen még akkor is hogy ha csak a tartalmi rész "huzza le".
Valaki segítsen ezeket a problémáakt megoldani légszi.

Előre is köszi a segítséget

Xrissz
57

segítség

rrd · 2006. Dec. 1. (P), 17.20
1) Az IE középre igazítás itt van leírva pár sorral fentebb, az előző hozzászolásomban.

2) a dived csak olyan hosszú lesz amennyi a tartalom benne. Nem lehet lehúzni. A vizuális összeolvasztás elve segítségével tudod megoldani, hogy úgy nézzen ki mintha lentebb menne.
59

nem mindig

deejayy · 2007. Már. 2. (P), 09.04
Ez a cikk akkor nagyszerű, ha viszonylag egyszerű oldalt kell megvalósítanunk, ami már szemmel is jól struktúrálható.

Nagyobb gondot okoznak viszont a bonyolultabb, nem könnyen struktúrálható oldalak.

Éppen most készítem a saját oldalam új kinézetét, szintén hasonló elven, mint amit rrd leírt, csakhogy nem annyira egyszerű.

A fő gondot nálam az okozza, hogy hogyan tudok két divet függőleges magasságban egymáshoz igazítani (azaz: ha az egyik div magasabb, akkor a másik nyúlik hozzá, ha a másik, akkor meg fordítva)
Létezik egyáltalán ilyen megoldás CSS-ben?
60

vizuális összemosás elve

rrd · 2007. Már. 7. (Sze), 11.25
61

első oldalam

zsool · 2007. Júl. 29. (V), 18.48
Szia rrd!
Ez lesz az első oldalam amit csinálni szeretnék css és php segítségével, viszont elkelne egy kis segítség, mert ott elakadtam hogy beszámozzam az oldalt....elkezdtem végigcsináln lépésről lépésre a leírs szerint de nem sikerül! A segítséged szeretném kérni esetleg priviben vagy akár itt is a forumon!
email: zsoolzso##kukac##gmail.com
Az oldal:
62

Olvass!

janoszen · 2007. Júl. 29. (V), 19.33
Üdv,

jó lenne ha más témába beleszemetelés előtt elolvasnád a fórumról szóló írást: http://weblabor.hu/weblabor/segitseg#forumok és utána nyitnál egy témát a konkrét problémáidnak. Azaz írd le pontosan mi a bajod, nem úgy hogy valaki rágja a számba a dolgot.

A másik, hogy amíg még a HTML-CSS-sel sem vagy tisztában nem igazán ajánlott PHP-re menni, mert szépen összekavarodnak majd a fogalmak.

J
63

OK.

zsool · 2007. Júl. 30. (H), 09.50
Igazada van...sajnálom...
64

Banner a két oldalra

maullaci · 2008. Júl. 12. (Szo), 14.33
Sziasztok.

Összeraktam egy oldalt a cikk alapján.

Abban szeretném a nálam tapasztaltabb szakik segítségét kérni, hogy miképp lehet a két oldalra 120*240-es bannereket tenni.

Én akárhogyan próbáltam nem ment, így a lehető legegyszerűbb példát írjátok.

Előre is köszi.
65

banner

rrd · 2008. Júl. 12. (Szo), 16.07
úgy mint bármi mást. Úgy kell méretezni, hogy beleférjen egy ilyen széles elem. Ha tudsz mutatni egy oldalt, akkor könnyebben megmondjuk mi a baja.
66

psd

tibee88 · 2008. Júl. 16. (Sze), 10.16
Nekem a PSD fájl kellene ami a cikk elején szerepel. Csak sajna letölteni nem tudom, fel lehetne rakni valahova máshova, ahonnan le tudnám szedni?
Köszönöm
67

Javítva

Török Gábor · 2008. Júl. 16. (Sze), 11.47
Javítottam a cikkben a helytelen hivatkozást, most már jó helyre mutat, le tudod tölteni.