Stíluslap létrehozása

Induljunk ki az imént létrehozott HTML5-állományból, és kezdjük el felépíteni a hozzá tartozó stíluslapot is.

Először is állítsunk be minden elemre, hogy a margója és a kitöltése 0 legyen. Ez azért lesz fontos, hogy minden böngészőben ugyanaz az alapérték legyen beállítva. Természetesen az egyes elemeknél majd meg fogjuk adni a helyes margó- és kitöltésértékeket.

* {
    margin:0;
    padding:0;
}

A HTML5 szabványt nem megfelelően támogató böngészők miatt meg kell mondanunk, hogy a strukturális HTML5-ös elemek blokkszintű elemekként jelenjenek meg.

section, article, aside, footer, header, nav, hgroup {
    display:block;
}

Most állítsuk be a lap tulajdonságait! Az arculatterv alapján fekete háttérszínt (#000) és fehér előtérszínt (#fff) kell beállítanunk. A betűcsalád a szokásos Arial, Helvetica, sans-serif hármassal definiált. A betűméretet relatív módon adjuk meg, egyelőre állítsunk be 100%-os méretet. A lap bal és jobb oldalára egy 10 képpontos kitöltést is beállíthatunk.

body {
  background-color: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  padding: 0px 10px;
}

Mivel sötét hátteret állítottunk be, a linkek színe sem maradhat az alapértelmezett kék színű, mert olvashatatlanná válna. Állítsuk be a fehér színt a még nem látogatott linkek színének, az arculattervben is látható szürke (#bbb) színt a látogatott linkek színének, a világoszöld (#9fc) színt pedig a hover (fölé vitt egér) állapotnak.

a:link {
   color:#fff;
}
a:visited {
   color:#bbb;
}
a:hover {
   color:#9fc;
}

Fejléc kialakítása

Próbáljuk a fejlécünket rendbe tenni az arculatterv alapján. Jelenleg az oldalunk így néz ki:

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplapblog_cssfejlec1_full.jpgAz Alaplap blog fejléce a stíluslap kialakítás első fázisában

A címsorok a vak felhasználók számára leírják az oldal tartalmát, a látó felhasználóknak ezeket viszont el kell rejtenünk, hiszen ők a pásztázás során ezen terülteket vizuálisan azonosítják. Szintén el kell tüntetnünk az oldalmenüt, ami a vak felhasználóknak nyújt segítséget az ismétlődő blokkok átugrásában.

Pozícionáljuk ki a képernyőről a fejléc <header> elemen belül az összes olyan címsort, amely nav, illetve section elemben található, illetve az oldalmenu azonosítójú <nav> elemmel is ugyanezt kell tennünk.

header nav h1, 
header section h1, 
header nav#oldalmenu  {position:absolute; left:-9999px;}

Ezzel a fejlécünk megjelenése így változik:

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplapblog_cssfejlec2_full.jpgAz Alaplap blog fejléce a felesleges címsorok kipozícionálása után

Az Alaplap blog szöveg szintén 1-es címsorral látható. Ezt szintén ki kell pozícionálnunk, viszont a helyén az alaplap blogunk logóját kell elhelyezni. Ezt megtehetjük úgy, hogy a képet háttérképként állítjuk be, és precízen beállítjuk a címsor méretét. A szöveget az első sor behúzására szolgáló text-indent paraméterrel pozícionáljuk ki a képernyőről. Az alaplaplogo.png kép 240px széles, és 120px magas, a méretet ennek megfelelően fogjuk beállítani. A címsorunk a <header> elem olyan <h1> eleme, amely első gyerek (first-child), ezért írhatjuk a következőt:

header h1: first-child {
   background-image: url(images/alaplaplogo.png);
   width: 240px;
   height: 120px;
   background-repeat: no-repeat;
   background-position: top left;
   text-indent: -9999px;
}

Ennek következtében már nem látszik az egyes címsor, helyette viszont látszik a logó.

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplapblog_cssfejlec3_full.jpgAz Alaplap blog fejléce a logó megjelenítése után

Az arculattervet megnézve lemérhetjük a fejléc méretét. Azt kapjuk, hogy a fejléc 161px magas, a tetején 10 képpontnyi üres sávval, melyen a háttérkép látható. A felső 10 képpontos üres sávot megadhatjuk a felső, belső kitöltés (padding) megadásával. Mivel azonban a magasság (height) a tartalom magasságára vonatkozik, amelyhez hozzáadódik a belső kitöltés, magasságként nem 161 képpontot, hanem 151 képpontot kell beállítanunk.

Az ikonokat tartalmazó szakasz a fejléc jobb szélétől számítva 20 képponttal beljebb kezdődik, fentről pedig 10 képpont van kihagyva. Ezt a szakaszt igazíthatjuk abszolút módon, de mivel azt szeretnénk, hogy az a koordináta, amelyhez képest a szakasz pozícióját beállítjuk, a fejlécre <header> vonatkozzon, ezért annak statikustól eltérő (pl. relatív) pozícionálást kell beállítanunk.

header {
   height: 151px;
   background-image: url('images/alaplap_hatter.png');
   margin: 0;
   padding: 10px 0 0 0;
   background-repeat: repeat-x;
   position: relative;
}
section#ikonsor {
   position: absolute;
   right: 20px;
   top: 10px;
}

Az alábbiakban láthatjuk, hogyan változott a fejléc megjelenése:

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplapblog_cssfejlec4_full.jpgAz Alaplap blog fejléce az ikonsor pozícionálása után

Most a keresés űrlapot tartalmazó szakaszt is igazítsuk a megfelelő helyre. Az arculattervből lemérhető, hogy ez a blokk a fejléc tetejétől 90 képponttal lejjebb helyezkedik el, a jobb oldalától pedig 20 képponttal beljebb.

section#kereses {
   position: absolute;
   right: 20px;
   top: 90px;
}

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplapblog_cssfejlec5_full.jpgAz Alaplap blog fejléce a keresés szakasz pozícionálása után

Látható, hogy az arculattervtől több ponton is eltérés tapasztalható, folytassuk tovább az oldal felépítését. Az ikonsoron található ikonoknak szürke szegélyt kellene adnunk, alul és felül pedig chiplábaknak kellene megjelenniük. Előnyös lenne, ha a szegélyt és a lábakat is a CSS segítségével helyeznénk el, mert így egy esetleges ikoncsere, vagy az ikonsor bővülése esetén könnyebb lenne a módosítás.

A CSS3 lehetővé teszi, hogy az elemeknek több háttérképet is megadhassunk, különböző igazításokkal. Ezt fogjuk kihasználni a megoldás során. Az ikonsorban szereplő képeknek olyan háttérszínt adunk, mint amilyen a chip lábain is látható (#999). A chiplábakról pedig készítünk két olyan háttérképet, amelyet vízszintesen ismételni lehet. Ez lesz a szegely_also.png és szegely_felso.png kép. Ez a két kép 12px magas, ezért ekkora értéket kell beállítanunk felül és alul belső kitöltésnek (padding). Mivel a háttérszínt szürkére állítottuk, ezért ha bal és jobb oldalon is 1-1 képpontnyi kitöltést állítunk be, pont megkapjuk az arculatterven látható eredményt. Szintén az arculatterven lemérhetjük, hogy az ikonok között 15px üres hely volt, ezért a jobb oldali margónak beállíthatjuk ezt az értéket.

section#ikonsor img {
  padding: 12px 1px 12px 1px;
  margin: 0 15px 0 0;
  background-color: #999;
  background-image: url('images/szegely_felso.png'), url('images/szegely_also.png');
  background-repeat: repeat-x, repeat-x;
  background-position: left top, left bottom;
}

Most a következőképpen néz ki a fejlécünk:

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplapblog_cssfejlec6_full.jpgAz Alaplap blog fejléce az ikonok módosítása után

A kép alapján – főleg ha a méreteket képpontnyi pontossággal ellenőrizzük – több problémát is azonosíthatunk. Hiába állítottuk be a 15 képpontnyi margót, ennél nagyobb távolságra kerültek az ikonok egymástól. Ennek az az oka, hogy a HTML-sablonunkban az egyes képek új sorba voltak törve, így gyakorlatilag az ikonok között egy üres (white-space) karakter is megjelenik. Hogy ez ne okozzon gondot, megtehetjük például, hogy az ikonsor nevű szakaszunknak 0-s betűméretet állítunk be. Vagyis a kódunk így módosul.

section#ikonsor {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 0;
}

Az is látható a képen, hogy az utolsó ikon mögött is 15 képpontnyi margó van, ami viszont számunkra nem jó, mivel az utolsó ikon mögött nem szabadna margónak lennie. Ezt a problémát megoldhatnánk úgy, hogy az ikonsor nevű szakaszt nem 20 képponttal húzzuk beljebb a right paraméterrel, hanem csak 5 képponttal, hiszen az utolsó ikon mögött 15 képpontnyi margó is lesz. A másik megoldás pedig az lehet, hogy az ikonok közül az utolsónál 0-s jobb oldali margót állítunk be. Oldjuk meg most így a problémát. De hogy címezzük meg az utolsó ikont? Emlékeztetőül nézzük meg a kódunk HTML-változatát.

<section id="ikonsor">
    <h1>Közösségi média és gyengénlátóknak szóló változat</h1>
    <a href="#"><img src="images/ikon_rss.png" 
    alt="RSS-csatornánk" title="RSS-csatornánk"></a>
    <a href="#"><img src="images/ikon_twitter.png" 
    alt="Twitter azonosítónk" title="Twitter azonosítónk"></a>
    <a href="#"><img src="images/ikon_facebook.png" 
    alt="Facebook azonosítónk" title="Facebook azonosítónk"></a>
    <a href="#"><img src="images/ikon_gyengenlato.png" 
    alt="Gyengén látók számára optimalizált változat" 
    title="Gyengén látók számára optimalizált változat"></a> 
  </section>

Tudjuk, hogy a stíluslap szabvány lehetővé teszi a last-child látszólagos osztály használatát az utolsó gyerek eléréséhez. Ha a fenti kódot megnézzük, akkor látjuk, hogy igazából nem a képre (img) kell alkalmaznunk a last-child látszólagos osztályt, hanem az <a> tagre, hiszen minden ikon egyben link szerepet is betölt. Vagyis a helyes kód az alábbi lesz:

section#ikonsor a:last-child img {margin:0;}

section#ikonsor img:last-child {margin:0;}

Ezek után az alábbi képnek megfelelő eredményt kapunk:

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplapblog_cssfejlec7_full.jpgAz Alaplap blog fejléce az ikonsor margójának beállítása után

Látható, hogy a keresés szakaszunkon is dolgozni kell még, hogy megkapjuk az arculatterven látható eredményt.

Az arculatterven lemérve a szövegdoboz méretét azt kapjuk, hogy 170 képpont széles és 25 képpont magas, szegély nélküli beviteli mezőt kell megjelenítenünk. A beviteli mezőnek nincs egyedi azonosítója, de nem is feltétlenül kell adni neki, hiszen anélkül is meg tudjuk címezni egy megfelelő attribútumszelektor használatával.

section#kereses input[type="text"] {
  width: 175px;
  height: 25px;
  border: 0;
}

Az elküldés gomb gombunk úgy néz ki, mintha egy áramköri lapka lenne, ezért helyezzük el rajta a megfelelő háttérképet, ami 70 képpont széles és 34 képpont magas. A beviteli mező és a keresés gomb között 10 képpontnyi távolságot kell hagynunk az arculatterv szerint. Mivel az űrlapon belül ismét white-space karakter van, az input mező és a submit gomb között ismét megtehetjük, hogy a betűméretet 0-ra állítjuk, majd a két mező esetén ezt a beállítást felülírjuk.

A CSS-kódunk tehát:

section#kereses form {font-size: 0;}
section#kereses input[type="text"] {
  width: 175px;
  height: 25px;
  border: 0;
  font-size: 14px;
  background-color: #fff;
  color: #000;
}
section#kereses input[type="submit"] {
  background-color: #000;
  color: #fff;
  border: 0;
  font-weight: bold;
  width: 70px;
  height: 34px;
  background-image: url('images/chip.png');
  background-repeat: no-repeat;
  background-position: top left;
  margin-left: 10px;
  font-size: 14px;
}

Ezen módosítás után a fejlécünk a következőképpen néz ki:

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplapblog_cssfejlec8_full.jpgAz Alaplap blog fejléce a keresés szakasz módosítása után

A nyomvonal navigációnk még közel sem úgy néz ki, mint ahogyan kellene, ezért folytassuk ezzel! Az arculattervben egy konkrét szélességű háttérre raktuk rá a szöveget, amely weblapként megvalósítva már nem lesz annyira előnyös. Próbáljuk meg úgy megoldani a megjelenést, hogy az ablak átméretezése esetén a blokkunk szélessége is dinamikusan tudjon változni. Ehhez viszont célszerű szétdarabolni a hátteret, és szükség lesz egy olyan háttérre, ami mindig bal oldalon, egy másikra ami mindig jobb oldalon, és egy harmadikra, ami a közbenső részen lesz látható. Igazából ezt az arculat szimmetrikus volta miatt két kép segítségével fogjuk megoldani:

elvalaszto_szel.png
elvalaszto_kozep.png

A logó alja és a nyomvonal morzsa navigáció között 10 képpontnyi helyet kell kihagynunk, vagyis a felső margó 10 képpontnyi legyen. Az arculatterven 380 képpont volt a nyomvonal morzsát tartalmazó blokk szélessége, 21 képpont a magassága. Viszont a szöveg a blokk bal szélétől kezdve 30 képpontnyival van behúzva. Ezt elérhetjük úgy, hogy a bal oldali kitöltést (padding-left) 30 képpontra állítjuk, viszont mivel a doboz szélessége 380 képpont kell legyen, a tartalom szélességének csak 380-30=350 képpontot kell beállítanunk. Ezen kívül be kell állítanunk a több oldalra is a megfelelő háttérképeket, és azok igazítását, ismétlési módját.

Ezen kívül a link kinézetét is módosítanunk kell, a korábban beállított fekete háttér helyett transzparens hátteret kell beállítanunk és a betűméretet is állítsuk be az arculatterven látható mérethez közelire. (Nem tudunk pontos értéket beállítani, mivel relatív méretezést használunk.)

nav#nyomvonal {
  margin-top: 10px;
  padding-left: 30px;
  width: 350px;
  height: 21px;
  background-image: url('images/elvalaszto_szel.png'),  
  url('images/elvalaszto_szel.png'),  
  url('images/elvalaszto_kozep.png');
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: center left, center right, left top;
  height: 21px;
}
nav#nyomvonal a {
  text-decoration: none;
  font-size: 90%;
}

Ezek után a fejléc a következőképpen fog kinézni:

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplapblog_cssfejlec9_full.jpgAz Alaplap blog fejléce a nyomvonal nacigáció beállítása után.

Ezt az állapotot le is tudjuk tölteni:

Vissza a tartalomjegyzékhez