Web Tervezés - 3. Gyakorlat

CSS alapok II.

Táblázat design

Alapértelmezetten a táblázatnak nincs se háttérszíne se keretje. Testre lehet szabni: A cellák a táblázat mérete alapján automatikusan méreteződnek, valamint egy-egy oszlopban minden cella azonos szélességet vesz fel.
A cellák méretét meghatározza továbbá a cellák tartalmának szélessége is. Ha egy cellába hosszabb szöveg van, akkor az egész oszlopa szélesebb lesz.
A táblázat thead és tbody része több oldalas táblázat nyomtatás esetén minden oldalon megjelenik.
CSS selector-ok segítségével elérhető, hogy pl a 3. oszlop más szabályokat kapjon mint a többi.
CSS szelektor-okról bővebben

Box-model

A szélesség/magasság (width, height) megadásának több értelmezése is lehet. A méret tartalmazhatja a keret vastagságát és a belső margót is (padding).
Ennek a megadására szolgál a box-sizing css szabály.
Ha a méreteket %-ban adjuk meg, akkor fontos szerepe van, hogy a padding és a border is beletartozzon ebbe a méretbe.
Pl: 100%-os width esetén ha margin-t adunk meg, akkor az minden esetben ki fog lógni. Border-box esetén a padding és a border is bele fog tartozni a 100%-ba, így nem csúszik szét.
Érdekesség a külső margóval kapcsolatban.

Pozícionálás

Gyakran előfordul, hogy a statikus elrendezés nem felel meg az igényeinknek. Lehet, hogy lebegő div-eket akarunk használni, akár design, akár funkcionalitás céljából.
Erre az esetre szolgálnak a pozícionálást meghatározó szabályok.
Abszolút pozícionálásnál a kiindulási pont az első nem static szülő elem.
Példa use case: Facebook chat

Úsztatás

Úsztatás segítségével folyó szövegben tudunk képeket/html elemeket elhelyezni.
Gyakran weboldal elrendezés megadására is használják.

Z-index

Pozícionálás manipulálásánál probléma léphet fel, ha fedik egymást az elemek. Ennek a kezelésére szolgál a z-index.

Űrlapok

Eddig főleg a megjelenítésről volt szó. Azonban egy weboldalnak tudnia kell felhasználió bemenetet is fogadnia.
Erre a célra szolgálnak az űrlap vezérlő elemek.
Ezeket css segítségével tetszés szerint testreszabhatjuk. (A böngészők sok tulajdonságnak adnak alapértelmezett értéket, ezért alaposnak kell lennünk, ha egy űrlapot szabunk testre.)
HTML5 számos új űrlap mező típust vezetett be, kliens oldali validálással.

Layout

Feladat 1

HTML5 tag-ek segítségével készítsd el a következő elrendezést:
          *****************************
          *           Fejléc          *
          *****************************
          *           Menü            *
          *****************************
          *        *                  *
          *        *                  *
          *Oldalsáv*                  *
          *        *                  *
          *        *                  *
          *        *                  *
          *        *                  *
          *        *                  *
          *        *                  *
          *****************************
          *           Lábléc          *
          *****************************
        
Az oldal 1024px széles legyen, legyen középre igazítva, és az oldalsáv méretét %-ban add meg.

Feladat 2

Az előző feladatban a fejléc legyen fixed. Amennyiben a viewport (böngésző) keskenyebb, mint 1024, akkor 100% legyen a szélesség, tehát ne lógjon ki.
Media query segítségével tedd reszponzívvá az oldalt.
Segítség