Veľkosti elementov

Na určenie rozmerov jednotlivých elementov nám slúžia vlastnosti:

• pre šírku - width, max-width, min-width
• pre výšku - height, max-height, min-height

Šírka - width, výška - height,

Existujú 3 možné hodnoty týchto vlastnosti:

• dĺžka - číslo + názov jednotky, napr. 540px
• percentá - vzhľadom na šírku (výšku) nadradeného elementu, napr. 50%
• auto - automaticky, tzn. prirodzená šírka (výška) elementov alebo šírka (výška) ich obsahu

Nezabudnite, že všetko si máte automaticky vyskúšať, otestovať, robiť s danými vlastnosťami experimenty. Tak sa totiž naučíte najviac.

Jednoduchý príklad:

Do vytvoreného XHTML dokumentu vložíme nasledovný kód:

<div style="width:500px;height:300px;background-color:#CCCCFF;">
  <div style="width:20%;height:30%;background-color:red;">
    Tu je nejaký obsah. Šírka aj výška bloku je stanovená percentuálne.
  </div>
  <div style="width:auto;height:50px;background-color:blue;">
    Šírka je stanovená automaticky, výška bloku je 50px.
  </div>
</div>

Minimálna šírka (výška) - min-width, min-height

Táto vlastnosť zabezpečí, že zobrazovaná šírka (výška) neklesne pod určitú stanovenú hranicu.

Nasledujúci kód zaistí, že na monitoroch s rozlíšením vyšším ako 1024x768px sa bude obsah zobrazovať cez celú obrazovku a na monitoroch s nižším rozlíšením sa šírka stránky zafixuje na 900px. Podobne sa tak stane aj pri zmenšení okna prehliadača.

Jednoduchý príklad:

Myslím, že už dávno viete, kam daný kód treba napísať :)

body {min-width:900px;}

Obdobne funguje aj vlastnosť min-height.

V prípade týchto vlastností samozrejme nemôžeme použiť hodnotu auto.

Maximálna šírka (výška) - max-width, max-height

Princíp použitia tejto vlastnosti je obdobný ako pri predchádzajúcich vlastnostiach. Už nám zostáva iba otestovať ich funkčnosť.

<div style="min-width:500px;min-height:300px;background-color:#CCCCFF;">
  Minimálna šírka je 500px a min. výška bloku je 300px. Skúste zmenšovať okno prehliadača.
</div>

Treba poznamenať, že so všetkými vlastnosťami má problém prehliadač Internet Explorer. Ako tieto problémy vyriešiť (aj viac o kaskádových štýloch) sa dozviete na stránke https://test00.ic.cz/kniha/kap-03-rozmery-prvku-a-pretekani-obsahu.html.

Úloha:

Preverte funkčnosť zdrojových kódov z vyššie uvedenej stránky.

V dalšom článku sa dozviete ako na orámovanie a okraje.