Ako na orámovanie a okraje

04.04.2011 19:35

Ohraničenie (orámovanie)

Ohraničenie elementov, prvkov je dôležitou súčasťou tvorby webových stránok.

Spôsob ohraničenia určujeme prostredníctvom vlastnosti border, pričom využijeme 3 hodnoty:

  • hrúbka rámu (ohraničenia) - napr. 2px
  • štýl ohraničenia
    • solid - bežná čiara
    • double - dvojitá čiara
    • dotted - bodkovaná čiara
    • dashed - čiarkovaná čiara
  • farba ohraničenia - zapisujeme klasicky napr. čierna - black, rgb(0,0,0) alebo #000000, viac o zápise farieb

Ak nepotrebujeme ohraničenie zo všetkých strán, tak použijeme vlastnosti: border-left pre ohraničenie zľava, border-right pre ohraničenie sprava, border-top pre ohraničenie zhora a border-bottom pre ohraničenie zdola.

Príklad:

  <div style="width:800px;height:600px;background-color:white;">
    <div style="width:100%;height:20%;background-color:#3399FF;">
      tu je nejaký obsah
    </div>
    <div style="float:left;width:30%;height:80%;background-color:#99CCFF;">
      tu je ďalší obsah
    </div>
    <div style="float:left;width:70%;height:80%;background-color:#CCFFFF;">
      a tu ďalší
    </div>
  </div>

Zdá sa, že sa nám začína črtať základné rozloženie blokov na webovej stránke. Tomu sa budeme venovať v článku Pozícia elementu alebo začíname vytvárať layout.

Pribudla nám vlastnosť float, o nej si povieme v ďalšom článku. Skúste ju vynechať a uvidíte, čo sa stane.

Okraj, výplň - margin, padding

Každý box (kontajner, objekt, blok) pozostáva z nasledovných oblastí:

  • okraj - margin - priehľadný, tzn. ak je pre daný objekt nastavené nejaké pozadie, tak v oblasti margin nebude viditeľné;
  • rámik - border - o ňom sme hovorili už vyššie;
  • výplň - padding - je priestor medzi obsahom bloku a jeho orámovaním, zzachováva sa pozadie nastavené pre blok;
  • obsah boxu - samotný obsah, text alebo ďalšie boxy a objekty;

Pre lepšie porozumenie si pozrite nasledovný obrázok:

V prípade týchto vlastností sa nesprávajú všetky prehliadače rovnako, preto s nimi treba narábať opatrne.

Okraj - margin

Okraje sú vždy priehľadné. Môžeme ich určiť pomocou samostatných vlastností margin-top (horný okraj), margin-right (pravý okraj), margin-bottom (dolný okraj), margin-left (ľavý okraj) alebo jedinou vlastnosťou margin (všetky okraje), ktorá združuje všetky 4 vlastnosti do jednej.

Možné hodnoty:

  • auto - často využívaná hodnota na centrovanie prvku vzhľadom na nadradený prvok;
  • dĺžka - číselná hodnota + jednotka, napr. 15px;
  • percento - percentuálne vzhľadom na obmedzujúci prvok, napr. 2%.

Ak zadáme iba jednu hodnotu vlastnosti margin, tak bude platiť pre všetky 4 okraje, ak zadáme dve hodnoty, tak prvá bude platiť pre horný a dolný okraj a druhá pre pravý a ľavý okraj. Ak zadáme 4 hodnoty, tak budú platiť v poradí horný, pravý, dolný, ľavý okraj.

Jednoduchý príklad:

  <div style="width:800px;height:600px;background-color:white;border:1px solid black;margin:auto;">
    <div style="width:96%;height:20%;background-color:#3399FF;margin: 1% 2%;">
      tu by mohla byť hlavička webovej stránky
    </div>
    <div style="float:left;width:20%;height:76%;background-color:#99CCFF;margin: 0 2% 1% 2%;">
      tu by mohlo byť menu
    </div>
    <div style="float:left;width:74%;height:76%;background-color:#CCFFFF;margin: 0 2% 1% 0;">
      a tu nejaký článok
    </div>
  </div>

Všimnite si, že napísaný text je "nalepený" na samom ohraničení jednotlivých boxov. Je evidentné, že chýba výplň - padding.

Výplň - padding:

Výplne majú zachovanú farbu, pozadie daného prvku. Môžeme ich určiť pomocou samostatných vlastností padding-top (horná výplň), padding-right (pravá výplň), padding-bottom (dolná výplň), padding-left (ľavá výplň) alebo jedinou vlastnosťou padding (výplne zo všetkých strán), ktorá združuje všetky 4 vlastnosti do jednej.

Možné hodnoty a pravidlá ich zapisovania sú obdobné ako pri vlastnosti margin.

Pozor na správne počítanie.

Jednoduchý príklad:

  <div style="width:800px;height:600px;background-color:white;border:1px solid black;margin:auto;">
    <div style="width:94%;height:18%;background-color:#3399FF;margin: 1% 2%;padding:1%;">
      tu by mohla byť hlavička webovej stránky
    </div>
    <div style="float:left;width:18%;height:72%;background-color:#99CCFF;margin: 0 2% 1% 2%;padding:1%;">
      tu by mohlo byť menu
    </div>
    <div style="float:left;width:72%;height:72%;background-color:#CCFFFF;margin: 0 2% 1% 2%;padding:1%;">
      a tu nejaký článok
    </div>
  </div>

O správnom počítaní okrajov a výplne sa viac dozviete na stránke https://test00.ic.cz/kniha/kap-05-okraje.html.

Úloha:

Navrhnite vlastné hodnoty judnotlivých vlastností, tak ako je to v predchádzajúcom príklade. Pozor na správne počítanie :)

Ďalší článok - Pozícia elementu.

—————

Späť

Novinky

Vytvorme jednoduchý web - HTML&CSS

05.04.2011 05:45
V rubrike HTML & CSS sa oboznámite so základmi tvorby webových stránok, pričom budeme využívať jazyk XHTML a...

—————

Spustili sme webovú prezentáciu o tvorbe webu

01.04.2011 10:25
Webová stránka o tvorbe webových stránok. Znie to krkolomne, pravda? Aj ja si to myslím, ale keď som začínal s tvorbou...

—————

Všetky články

—————