Aká je najvhodnejšia šírka pre dnešné internetové stránky? Niekto to nerieši, pre iného je to možno problém. Ja som nikdy nejak extra neskúmal aká šírka stránky je najvhodnejšia ale dávnejšie som narazil na stránku 960.gs ktorá ma presvedčila o tom, že najvhodnejšou šírkou pre dnešné weby je 960 pixelov.

Prečo je 960 pixelov najvhodnejšie?

Hlavne preto, že číslo 960 je deliteľné 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 a 480. Na stránke 960.gs je toho samozrejme viac ale 960 Grid System Vám umožní flexibilne si rozvrhnúť a rozkúskovať jednotlivé časti webu.

Základ systému

Základ systému tvoria stĺpce v celkovej šírke 960 pixelov rozdelené na 12 a 16 stĺpčekov. 12 stĺpcový systém obsahuje stĺpce šírky 60px a 16 stĺpcový šírku 40px. Každý stĺpec obsahuje 10 pixelový margin v ľavo a pravo.

K čomu je to dobré?

Vzhľadom na tento stĺpcový systém si pri tvorbe webu môžete presne rozvrhnúť jednotlivé časti webu tak, aby vždy vyplnili vhodnú šírku a zároveň pôsobili vyvážene a pekne. Stačí že jednotlivé bloky budú mať šírku vždy podľa mriežky.

Jeden z príkladov zo stránky 960.gs ktorý to pekne znázorňuje…

960 Grid systém je podľa mňa vhodné používať i keď ja to momentálne veľmi nerobievam ale snažím sa svoje zvyky odnaučiť a držať sa niečoho takéhoto. Minimálne si tým uľahčíte robotu pretože nemusíte rozmýšľať nad šírkou jednotlivých častí Vašeho webu. Viac informácií a súborov na stiahnutie na http://www.960.gs

Uvedieme si dva spôsoby ako centrovať obsah ktoré sa od seba dosť líšia. V praxi ale nieje úplne ideálne riešenie ktoré by všade fungovalo bez problémov. Hlavne kvôli IE6 (najlepšiemu prehliadaču na svete) je potreba byť opatrnejší pretože ohľadom centrovania je IE6 častokrát ťažko zlúčiteľné.

Spôsob horizontálneho centrovania pomocou position: absolute

Jeden zo spôsobov horizontálneho vycentrovania obsahu je , že celý obsah je obalený DIVom ktorý má určenú pevnú šírku v pixeloch. Obalovací DIV je pritom najvrchnejší obalovací element. Pre jeho vycentrovanie zadefinujeme takéto CSS:

#container {
  width: 500px;
  background: red;
  position: absolute;
  left: 50%;
  margin-left: -250px;
}

Centrovanie obsahu je možné iba ak má obsah pevne danú šírku obaľovacieho DIVu. Cez position: absolute určíme, že umiestnenie z ľava 50% čo spôsobí, že DIV s červeným pozadím a šírkou 500px bude umiestnený v strede obrazovky. Do stredu ho dostaneme tak, že nastavíme ľavé odsadenie o hodnotu -250px čo náš DIV umiestni presne do stredu. Toto riešenie je síce ľahké a rýchle ale ja osobne ho nepoužívam a snažím sa centrovať pomocou margin: auto.

Spôsob horizontálneho centrovania pomocou margin: auto

Centrovanie obsahu pomocou margin: auto je ten vhodnejší spôsob centrovania ktorého by som sa držal i keď si to vyžaduje možno viac písania a optimalizovania. Tu budeme ale okrem jedného obaľovacieho DIVu používať dva obaľovacie DIVy. Prečo? Preto, že niektoré prehliadače pri centrovaní obsahu pomocou margin: auto sa nerozoztiahnu po celej výške – neobtečú a neroztiahnu DIV a teda ak má tento DIV farebné pozadie prípadne ako pozadie obrázok tak ho nemáme po celej výške.

Znie to divne? Možno ale my s tým nič nespravíme a ak budeme chcieť aby to bolo rovnaké vo všetkých browsroch tak sa s tým budeme musieť zmieriť. Urobíme tzv. matriošku čo sú naše dva obaľovacie DIVy.

Jeden bude centrovať pomocou margin: auto a text-align: center na stred a druhý ktorý je vnorený dovnútra bude obsahovať float a prípadné pozadie. CSSsko by mohlo vyzerat nejak takto:

body {
  text-align: center;
}

#obsah-vonku {
  display: block;
  width: 500px;
  margin: 0 auto;
}

#obsah-dnu {
  float: left;
  width: 100%;
  margin: 0;
  background: red;
  text-align: left;
}

Prečo používame na centrovanie dva DIVy?

Ako som písal vyššie robíme to kvôli riešeniu problému zobrazovania farebného pozadia. Problém je v tom, že ak centrujeme div pomocou margin: auto tak nemusí obsah obtekať. To sa dá ľahko vyriešiť pomocou float: left ale použiť naraz float a margin: auto nejde pretože float by náš obsah zarovnal k nejakému rohu a to predsa nechceme lebo centrujeme na stred.

Proste a jednoducho… dva DIVy. Jeden má definované margin: 0 auto; (ide hlavne o margin left a right aby bol auto) s danou šírkou. Toto nám to dá na stred. Druhý div má float: left aby prípadné pozadie sa roztiahlo podľa obsahu na celú výšku. Celá veda

• ak nastavíme nejakému obaľovaciemu elementu napríklad DIVu position: relative; zmeníme tým východzí bod pre ďalšie elementy umiestňované absolútne vo vnútri toho elementu
• ak nastavíme nejakému elementu (ktorý je vnorený napríklad do DIVu ktorý ale nemá nastavené position relative) tak vtedy môžete pohybovať relatívne s ľubovoľným elementom pomocou top, bottom, left, right

Zdá sa to zložité?

Asi sa to zdá zložité ale vôbec nieje, len sa to trochu blbo vysvetľuje ale skúsim to na obrázkoch.

Proste a jednoducho, keď dám niečomu position: absolute a napríklad top: 0; left: 0; tak sa to zobrazí v ľavom hornom rohu prehliadača. Ak ale element v ktorom mi používame toto position absolute má nastavený position: relative tak sa deje presne to isté ako o pár svoj vyššie ale element je umiestnený v ľavom hormon rohu toho elementu ktorý má definované práve to position relative. Tým position relative len zmeníme východzí bod pre umiestňovanie.

Čo sa stane keď dáte nejakému elementu position: absolute?

Odkazu nastavíte:

#mojdiv {
  background: red;
  /* tento kus kódu len vycentruje DIV a
  nastaví mu pevné rozmery */
  width: 300px;
  height: 100px;
  margin: 150px auto 0 auto;
}  

#mojodkaz {
  position: absolute;
  top: 0;
  left: 0;
  background: green;
}

Ak rozumiete rozdielu medzi absolute a relative tak toto kľudne preskočte, pre tých ostatných si ukážeme na príklade čo sa stane. Predstavte si že v kóde máte jeden DIV v ktorom je jeden odkaz.

Kde bude umiestnený odkaz?

Odkaz sa zobrazí v ľavom hornom rohu prehliadača a je jedno v akom DIVe je alebo ako hlboko je vnorený v kóde. Implicitne sa všetky elementy zobrazujú v ľavom hornom rohu prehliadača.

Čo robí position: relative?

Position: relative zmení východzí bod pre absolútne poziciovanie z ľavého horného rohu prehliadača na ľavý horný roh elementu ktorému definujete práve to position: relative. Elementy z predchádzajúceho príkladu by sa zobrazovali nejak takto ak by sme červenému DIVu definovali position: relative.

Okrem zmeny východzieho bodu môžete použiť position: relative aj na zmenu pozície elementu z jeho aktuálnej polohy. Pomocou top, left, right a bottom môžeme s elementom hýbať ľubovoľne z jeho aktuálnej pozície.