Tvorba webových stránok – Manuál k redakčnému systému Rheia 1.0, Roman Horváth, © 2015, powered by Rheia

Obsah stránky sa číta, prosím čakajte…

 TWS – Manuál k RS Rheia 1.0 – Obsah | Tvorba odkazov | Vkladanie obrázkov  « Vlastnosti obrázkov  |  Obrázok s odkazom » 

Každému obrázku môžete nastaviť samostatný zoznam tried štýlov a to pomocou klauzuly class:. Zoznam tried štýlov je možné definovať alebo upraviť podľa informácií, ktoré sú uvedené v kapitole Úprava štýlov.

(Zoznam tried je zoznamom identifikátorov tried štýlov oddeľovaných medzerami. Samozrejme, že takýto zoznam smie obsahovať aj jedinú položku a často zoznam aj pozostáva z jedinej položky.)

Príklad:

#style: .myImageClass { border: 3px dashed gold; padding: 2px; 
background-color: snow; }

{class:myImageClass|img:manual/obrazok.png}

Výsledok:

obrázok

 


 

RS Rheia umožňuje upraviť predvolené zoznamy tried štýlov plávajúcich obrázkov. Tak je možné úplne zmeniť správanie sa vlastnosti float, ktorá je opísaná v kapitole Vlastnosti obrázkov. K dispozícii sú dva predvolené zoznamy, ktoré je možné upraviť pomocou direktív: #floatLeft:«zoznam tried»#floatRight:«zoznam tried».

Príklad:

#floatLeft:myFloatClass

Tieto zoznamy sú predvolene jednoprvkové, pričom ich prvky (predvolené triedy plávajúcich obrázkov) majú rovnaký názov ako samotné zoznamy, čiže: floatLeft pre obrázky plávajúce vľavo a floatRight pre obrázky plávajúce vpravo. Za štandardných okolností by nemalo byť potrebné s direktívami zoznamov tried plávajúcich obrázkov manipulovať.

Upozornenie: Triedy štýlov floatLeftfloatRight sú definované v CSS otvárané v novom okne
(obvykle ide o externý odkaz) predvolenej konfigurácie RS Rheia a považujeme za nevyhnutné ich definovať v každej konfigurácii RS Rheia, inak bude funkčnosť systému v tomto smere obmedzená.

Nasledujúci príklad využíva informácie z kapitoly Úprava štýlov na definovanie vlastnej triedy štýlov v súčinnosti s nahradením predvoleného zoznamu štýlov floatRight vlastným zoznamom (s jediným prvkom myFloatRight; použité v prvom odseku) a priamu úpravu predvolenej triedy štýlu floatLeft (použité v druhom odseku):

#style: .myFloatRight { float: right; margin: 10px 20px; border: 3px dotted blue; }

#floatRight:myFloatRight

{float,right|img:manual/obrazok.png} Lorem Ipsum dolor sit
amet, consectetuer nulla, sed a purus vulputate, pellentesque tincidunt odio
lobortis conubia eu, iaculis eleifend vivamus ultrices pede praesent, nulla
convallis vel amet libero proin. Sit in eget mauris at wisi, purus nec, urna
vestibulum nulla vivamus justo, commodo lorem parturient tortor. Vivamus nec
cras quam pellentesque massa odio, wisi et vestibulum magna bibendum,
elementum sagittis venenatis turpis massa tincidunt, sed tellus tortor, at
vel. Lectus dis, phasellus lectus orci etiam, pulvinar augue tincidunt justo
id integer ipsum.

#style: .floatLeft { border: 3px dotted red; }

{float,left|img:manual/obrazok.png} Integer in elit a maecenas ante,
feugiat ut pellentesque elementum pede cursus tellus, ut magna cras
provident pede eu dolor. Quis odio accumsan vitae in aut cras. Nec
ultrices, suscipit nostra ac in, quisque nec rhoncus convallis,
vehicula odit purus ante, dolor pharetra. Sagittis nibh sit vel
fringilla fames quam. Libero turpis phasellus. Enim at id magna cursus,
placerat vivamus suscipit sapien ligula. Vel consectetuer tellus sit,
ac velit amet sed nulla in, arcu vel justo est nunc rutrum, id
consectetuer lectus suspendisse magna, eu maecenas orci pharetra
fermentum cras in. Integer nec praesent arcu, felis duis vestibulum quis.

Výsledok:

obrázok Lorem Ipsum, text pri obrázku, dolor sit amet, consectetuer nulla, sed a purus vulputate, pellentesque tincidunt odio lobortis conubia eu, iaculis eleifend vivamus ultrices pede praesent, nulla convallis vel amet libero proin. Sit in eget mauris at wisi, purus nec, urna vestibulum nulla vivamus justo, commodo lorem parturient tortor. Vivamus nec cras quam pellentesque massa odio, wisi et vestibulum magna bibendum, elementum sagittis venenatis turpis massa tincidunt, sed tellus tortor, at vel. Lectus dis, phasellus lectus orci etiam, pulvinar augue tincidunt justo id integer ipsum.

obrázok Integer in elit a maecenas ante, feugiat ut pellentesque elementum pede cursus tellus, ut magna cras provident pede eu dolor. Quis odio accumsan vitae in aut cras. Nec ultrices, suscipit nostra ac in, quisque nec rhoncus convallis, vehicula odit purus ante, dolor pharetra. Sagittis nibh sit vel fringilla fames quam. Libero turpis phasellus. Enim at id magna cursus, placerat vivamus suscipit sapien ligula. Vel consectetuer tellus sit, ac velit amet sed nulla in, arcu vel justo est nunc rutrum, id consectetuer lectus suspendisse magna, eu maecenas orci pharetra fermentum cras in. Integer nec praesent arcu, felis duis vestibulum quis.

Poznámka: Latinský text „Lorem Ipsum…“ je často používaný v úvodných fázach vývoja webovej stránky v prípade, že nemáme k dispozícii obsah, ale potrebujeme vidieť navrhnutý dizajn a aspoň navodiť dojem prítomnosti obsahu (textu) stránky. (Pozri aj: Lorem Ipsum Generator. otvárané v novom okne
(obvykle ide o externý odkaz))

 

Súvisiace kapitoly:

 


Otázky a úlohy:

  1. Na čo sa používa v RS Rheia klauzula class:?
  2. Čo je to zoznam tried (štýlov)?
  3. Koľko položiek smie obsahovať zoznam tried?
  4. Čo je možné upraviť pomocou direktív #floatLeft:«zoznam tried»#floatRight:«zoznam tried»?