LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> CSS (18.) - Rozměry

V tomto díle se seznámíme s vlastnostmi kaskádových stylů s jejichž pomocí můžeme nastavovat rozměry jednotlivých prvků.

6.1.2005 15:00 | Vasek | Články autora | přečteno 14226×

Výška prvku

Pokud chceme specifikovat výšku boxu, použijme vlastnost height. Jako její hodnota se používají čísla, procenta a klíčová slova.

height
Hodnoty: auto | <velikost> | <procenta> | inherit
Výchozí hodnota: auto
Ovlivňuje: všechny prvky, vyjma nenahrazených řádkových prvků, sloupců tabulek a skupin sloupců
Dědičná: ne
Procenta: z výšky boxu (podrobněji níže)
Média: vizuální
  auto výška vychází z ostatních vlastností
  <velikost> nastavuje výšku na danou hodnotu, velikost nesmí být záporná
  <procenta> výška se odvozuje z procentuální výšky boxu generovaného obsahu. Pokud není výška generovaného boxu stanovena, vychází se z výšky obsahu, záporné hodnoty není možné používat
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nastavit výšku blokových a nahrazovaných prvků. Pokud použijeme tuto vlastnost pro nenahrazovaný řádkový prvek, je výška zadaná touto vlastností ignorována a řídí se podle vlastnosti line-height (viz díl. č. 16). Nahrazované prvky mají svoji vnitřní výšku, ale pokud je výška nastavena vlastností height na jinou hodnotu než auto, může ji klient patřičně zvětšit/zmenšit. Při nastavení výšky pomocí procent je za základ brána výška omezujícího bloku. Pokud tato výška (omezujícího bloku) není definována klient se zachová, jako by byla nastavena hodnota auto. Klient může, ale nemusí interpretovat procenta relativně k výšce okna prohlížeče.

Příklad použití

div.nabidka{
height: 20px
}
p{
height: 50%
}

Podpora v prohlížečích

NN4 částečná podpora; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4; Opera plná podpora od verze 3,5; IE 5/MAC plná podpora; Konqueror plná podpora.

Maximální výška prvku

Pokud chceme omezit maximální výšku prvku, použijeme vlastnost max-height. Jako její hodnota se používají čísla, procenta a klíčová slova.

max-height
Hodnoty: none | <velikost> | <procenta> | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky, vyjma nenahrazených řádkových prvků, sloupců tabulek a skupin sloupců
Dědičná: ne
Procenta: z výšky obsahujícího boxu
Média: vizuální
  none výška prvku není nijak omezena
  <velikost> určuje maximální výšku prvku danou hodnotou
  <procenta> určuje maximální výšku,výška se odvozuje z procentuální výšky boxu generovaného obsahu. Pokud není výška generovaného boxu stanovena, vychází se z výšky obsahu.
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nadefinovat maximální výšku prvku. Jelikož tuto vlastnost v současnosti (prosinec 2004) podporují jen prohlížeče založené na jádře Gecko, a to jen ještě částečně, nelze ji používat.

Příklad použití

p.konec {
max-height: 15em
}

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) částečná podpora; IE nepodporuje; Opera nepodporuje; IE 5/MAC nepodporuje; Konqueror nepodporuje.

Minimální výška prvku

Pokud chceme také omezit minimální výšku prvku, použijeme vlastnost min-height. Jako její hodnota se používají čísla, procenta a klíčová slova.

min-height
Hodnoty: <velikost> | <procenta> | inherit
Výchozí hodnota: 0
Ovlivňuje: všechny prvky, vyjma nenahrazených řádkových prvků, sloupců tabulek a skupin sloupců
Dědičná: ne
Procenta: z výšky obsahujícího boxu
Média: vizuální
  <velikost> určuje minimální výšku prvku danou hodnotou
  <procenta> určuje minimální výšku,výška se odvozuje z procentuální výšky boxu generovaného obsahu. Pokud není výška generovaného boxu stanovena, vychází se z výšky obsahu.
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nadefinovat minimální výšku prvku. Obdobně jako vlastnost max-height je vlastnost min-height v současnosti (prosinec 2004) podporována jen prohlížeči založenými na jádře Gecko, a to jen ještě částečně, takže ji nelze používat.

Příklad použití

p.zacatek {
min-height: 5em
}

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) částečná podpora; IE podporuje jen u prvků uvnitř tabulek; Opera nepodporuje; IE 5/MAC nepodporuje; Konqueror nepodporuje.

Propojení předcházejících vlastností

Vlastnost max-height může ovlivnit vlastnost height těmito způsoby:

  • Výška prvku je nastavena bez ohledu na vlastnost max-height
  • Jeli hodnota vlastnosti min-height větší než hodnota vlastnosti max-height, je hodnota vlastnosti max-height nastvena na hodnotu vlastnosti min-height.
  • Jeli vypočítaná výška větší než max-height, je výpočet proveden znovu, ale s hodnotou vlastnosti height rovnající se hodnotě max-height.

Vlastnost min-height může ovlivnit vlastnost height těmito způsoby:

  • Výška prvku je nastavena bez ohledu na vlastnost min-height
  • Jeli vypočítaná výška menší než min-height, je výpočet proveden znovu, ale s hodnotou vlastnosti height rovnající se hodnotě min-height.

Šířka prvku

Pro nastavení šířky prvku je možné použít vlastnost width. Jako její hodnota se používají klíčová slova, číslo, procento či délka.

width
Hodnoty: auto | <velikost> | <procenta> | inherit
Výchozí hodnota: auto
Ovlivňuje: všechny prvky, vyjma nenahrazených řádkových prvků, řádků tabulek a skupin řádků
Dědičná: ne
Procenta: z šířky boxu (podrobněji níže)
Média: vizuální
  auto šířka vychází z ostatních vlastností
  <velikost> nastavuje šířku na danou hodnotu, velikost nesmí být záporná
  <procenta> šířka se odvozuje z procentuální šířky boxu generovaného obsahu. Pokud není šířka generovaného boxu stanovena, vychází se z šířky obsahu, záporné hodnoty není možné používat
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nastavit šířku blokových a nahrazovaných prvků. Pokud použijeme tuto vlastnost pro nenahrazovaný řádkový prvek, je šířka zadaná touto vlastností ignorována a řídí se šířkou obsahu. Nahrazované prvky mají svoji vnitřní šířku, ale pokud je šířka nastavena vlastností width na jinou hodnotu než auto, může ji klient patřičně zvětšit/zmenšit. Při nastavení šířky pomocí procent, je za základ brána šířka omezujícího bloku. Pokud tato šířka (omezujícího bloku) není definována, klient se zachová, jako by byla nastavena hodnota auto. Klient může, ale nemusí, interpretovat procenta relativně k šířce okna prohlížeče.

Příklad použití

div {
width: 12em
}

Podpora v prohlížečích

NN4 podpora s chybami; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE podpora od verze 4 s chybami (plná podpora ve verzi 6 ve sriktním režimu); Opera plná podpora od verze 4; IE 5/MAC plná podpora; Konqueror plná podpora.

Maximální šířka prvku

Pokud chceme omezit maximální šířku prvku použijeme vlastnost max-width. Jako její hodnota se používají čísla, procenta a klíčová slova.

max-width
Hodnoty: none | <velikost> | <procenta> | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky, vyjma nenahrazených řádkových prvků, sloupců tabulek a skupin sloupců
Dědičná: ne
Procenta: z výšky obsahujícího boxu
Média: vizuální
  none šířka prvku není nijak omezena
  <velikost> určuje maximální šířku prvku danou hodnotou
  <procenta> určuje maximální šířku,šířka se odvozuje z procentuální šířky boxu generovaného obsahu. Pokud není šířka generovaného boxu stanovena, vychází se z šířky obsahu.
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nadefinovat maximální šířku prvku. Jelikož tuto vlastnost v současnosti (prosinec 2004) nepodporuje program Internet Explorer pro Windows, proto bych vám doporučil se na ni nespoléhat.

Příklad použití

#dokument {
width: 75%
max-width: 35em
}

Pokud bychom uzavřeli veškerý obsah stránky do tagu <div> s id dokument, pro který bychom použili výše nadefinovaný stylový předpis, choval by se náš dokument takto: šířka textu by byla 75% šířky okna, ale jen do té doby, dokud by se těchto 75% bylo menší než 35em. Pokud by šířka textu měla přesáhnout 35em, vlastnost max-width to neumožní, a nastaví tuto šířku na 35em. Toto řešení má tu výhodu, že šířka textu se mění v závislosti na šířce okna prohlížeče, ale jen do té doby, než by měla přesáhnout konkrétní hodnotu. Tento způsob nastavení šířky textu funguje relativně nejen k šířce prohlížeče, ale díky použití jednotky em u vlastnosti max-width i relativně k velikosti písma. Jedinou nevýhodou této metody je to, že nefunguje v IE.

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) částečná podpora; IE nepodporuje; Opera nepodporuje; IE 5/MAC nepodporuje; Konqueror nepodporuje.

Minimální šířka prvku

Pokud chceme také omezit minimální šířku prvku, použijeme vlastnost min-width. Jako její hodnota se používají čísla, procenta a klíčová slova.

min-width
Hodnoty: <velikost> | <procenta> | inherit
Výchozí hodnota: 0
Ovlivňuje: všechny prvky, vyjma nenahrazených řádkových prvků, sloupců tabulek a skupin sloupců
Dědičná: ne
Procenta: z šířky obsahujícího boxu
Média: vizuální
  <velikost> určuje minimální šířku prvku danou hodnotou
  <procenta> určuje minimální šířku,šířka se odvozuje z procentuální šířky boxu generovaného obsahu. Pokud není šířka generovaného boxu stanovena vychází se z šířky obsahu.
  inherit hodnota se dědí po rodičovském prvku

Tato vlastnost umožňuje nadefinovat minimální šířku prvku. Obdobně jako vlastnost max-height není vlastnost min-height v současnosti (prosinec 2004) podporována Internet Explorer pro Windows, proto bych vám doporučil se na ní nespoléhat.

Příklad použití

#kraj {
min-width: 5em
}

Podpora v prohlížečích

NN4 nepodporuje; Mozilla (Netscape 6+) plná podpora; IE nepodporuje; Opera nepodporuje; IE 5/MAC nepodporuje; Konqueror nepodporuje.

Propojení předcházejících vlastností

Vlastnost max-width může ovlivnit vlastnost width těmito způsoby:

  • Šířka prvku je nastavena bez ohledu na vlastnost max-width
  • Jeli hodnota vlastnosti min-width větší než hodnota vlastnosti max-width, je hodnota vlastnosti max-width nastavena na hodnotu vlastnosti min-width.
  • Jeli vypočítaná šířka větší než max-width je výpočet proveden znovu, ale s hodnotou vlastnosti width rovnající se hodnotě max-width.

Vlastnost min-width může ovlivnit vlastnost width těmito způsoby:

  • Šířka prvku je nastavena bez ohledu na vlastnost min-width
  • Jeli vypočítaná šířka menší než min-width je výpočet proveden znovu, ale s hodnotou vlastnosti width rovnající se hodnotě min-width.

Závěr

Dnes jsem se seznámili vlastnostmi kaskádových stylů pro nastavení šířky a výšky prvku. U všech těchto vlastností je potřeba počítat s nesprávnou interpretací těchto rozměrů prohlížečem Internet Explorer, který šířku/výšku, definovanou pomocí vlastností width/height, neinterpretuje jako šířku/výšku prvku (jak je definováno), ale započítává do ní i oblasti padding a border (jimiž se budeme zabývat v nějakém z dalších dílu našeho seriálu). Proto je potřeba počítat s rozdílným způsobem zobrazení dokumentu v různých prohlížečích.

Verze pro tisk

pridej.cz

 

DISKUZE

Opera a min/max-width/height 6.1.2005 20:42 Myreg K.
  L Re: Opera a min/max-width/height 7.1.2005 11:27 Vasek




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

16.7.2018 1:05 /František Kučera

Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.


Přidat komentář

18.6.2018 0:43 /František Kučera
Červnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 21. 6. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: F-Droid, aneb svobodný software do vašeho mobilu. Kromě toho budou k vidění i vývojové desky HiFive1 se svobodným/otevřeným čipem RISC-V.
Přidat komentář

23.5.2018 20:55 /Ondřej Čečák
Od pátku 25.5. proběhne na Fakultě informačních technologií ČVUT v Praze openSUSE Conference. Můžete se těšit na spostu zajímavých přednášek, workshopů a také na Release Party nového openSUSE leap 15.0. V na stejném místě proběhne v sobotu 26.5. i seminář o bezpečnosti CryptoFest.
Přidat komentář

20.5.2018 17:45 /Redakce Linuxsoft.cz
Ve čtvrtek 31. května 2018 připravuje webový magazín BusinessIT ve spolupráci s Best Online Média s.r.o. pátý ročník odborné konference Firemní informační systémy 2018. Akce proběhne v kongresovém centru Vavruška (palác Charitas), Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 15 hod. odpoledne. Konference je zaměřena na efektivní využití firemních informačních systémů a na to, jak plně využít jejich potenciál. Podrobnější informace na webových stránkách konfrence.
Přidat komentář

14.5.2018 7:28 /František Kučera
Květnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 17. 5. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: Audio – zvuk v GNU/Linuxu.
Přidat komentář

7.5.2018 16:20 /František Kučera
Na stránkách spolku OpenAlt vyšla fotoreportáž Pražské srazy 2017 dokumentující srazy za uplynulý rok. Květnový pražský sraz na téma audio se bude konat 17. 5. 2018 (místo a čas ještě upřesníme).
Přidat komentář

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

16.3.2018 22:01 /František Kučera
Kulatý OpenAlt sraz v Praze oslavíme klasicky: u limonády a piva! Přijďte si posedět, dát si dobré jídlo a vybrat z mnoha piv do restaurace Kulový blesk, který najdete v centru Prahy nedaleko metra I. P. Pavlova na adrese Sokolská 13, Praha 2. Sraz se koná ve čtvrtek 22. března a začínáme v 18:00. Heslo: OpenAlt. Vezměte s sebou svoje hračky! Uvítáme, když si s sebou na sraz vezmete svoje oblíbené hračky. Jestli máte nějaký drobný projekt postavený na Arduinu, nějakou zajímavou elektronickou součástku, či třeba i pěkný úlovek z crowdfundingové akce, neváhejte. Oslníte ostatní a o zábavu bude postaráno.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2018) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze