PC-politika.cz - Novinky: Udělátka: Posuvníky - rolovací lišty v HTML PC-politika

Udělátka: Posuvníky - rolovací lišty v HTML

Na webu působí na některých vybraných stránkách hezky, když jsou vybaveny tzv. posuvníky. Tedy rolovalcími lištami, které můžeme přidávat pomocí vlastnosti CSS overflow. A samozřejmě můžeme lišty také obarvovat. Zde je krátký návod.

Pro vytvoření rolovací lišty použijeme v tagu/elementu DIV zmíněnou vlastnost overflow a hodnotu scroll. Další možností je, že rolovací lišty se nám zobrazí pouze, když bude text přesahovat okno stránky. To zařidíme hodnotou auto. Podívejte se na následující dvě možnosti:

<div style="width: 150px; height: 100px; overflow: scroll"> dlouhý text bude mít rolovací lišty, i když bude krátký </div>

Tento text má rolovací lišty, díky hodnotě "scroll"

<div style="width: 150px; height: 100px; overflow: auto"> Tento text nemá rolovací lišty, díky hodnotě "auto" </div>

Tento text nemá rolovací lišty, díky hodnotě "auto"

Rolovací lišty můžeme upravovat také barevně. Některé prohlížeče však tuto vlastnost nepodporují. Např u IE je tato vlastnost podporována od vereze 5.5 a výše. A jak to provedeme? No samozřejmě pomocí CSS stylu. Prostě - zadáte zaklad barvy vaší lišty. Skutečně, velmi jednoduché a efektní výsledek! Zadáte do externího stylu nebo do hlavičky v HEADu tento zápis:

<style>
body {
scrollbar-shadow-color:#FFAB00;
</style>

Resumé

Jak můžete vidět na ukázkách použití rolovacích lišt v textu, tento fígl funguje jen v IE a Opera. V prohlížeči Firefox se mi obarvená lišta nezobrazuje. Barvu jsem nastavil na #FFAB00, což je odstín , který je standardní na tomto serveru (linky atd.). Barevné nastavení lišty se projevuje rovněž v textovém boxu pro psaní komentářů pod články.