Rev Author Line No. Line
45 kakl 1 /*============================================================================*/
2 /* Historie */
3 /*============================================================================*/
109 miho 4 /* Opraveno zarovnání a velikost textu hlavičky */
5 /* Změněno kódování na UTF-8 - nutné pro IE a s českými komentáři */
6 /* Nutno doladit patičku (přesnost patička X text) */
45 kakl 7  
8 /*
109 miho 9 Pro tisk se nesmí použít pozicování fixed protože to by vedlo k překrývání
10 textu hlavičkou a patičkou na dalších stránkách.
11 Pro tisk je vhodné vypnout menu.
45 kakl 12  
109 miho 13 připojení:
14 nejdřív hlavní css
15 pak za něj tiskový css
45 kakl 16  
109 miho 17 V tiskovém css by mělo být
18 width: 100% šířka přez celou stranu
19 velikost písma v pt
20 řádkování 1
21 patkové písmo (lépe se čte)
45 kakl 22 font: 12pt/1 "Times CE", Times, "Times New Roman", serif;
109 miho 23 pro obrazovku je lepší font bezpatkový, skus Verdana
24 zhasnout nepotřebné dispaly: none
45 kakl 25  
26  
109 miho 27 Dodělat:
28 Alternativní fonty (font-family)
29 Definice stylu pro tisk (pro stránkovaná média)
30 Alternativní styly
31 bez absolutního pozicování
32 možná bez barev (černobíle)
45 kakl 33 Styl nadpisu tabulky
109 miho 34 Opravit chybné osazení spodního okraje (o velikost patičky), teď je větší
45 kakl 35  
36 h1,h2,h3,h4,h5,h6 {
37 page-break-inside:avoid;
38 page-break-after:avoid;
39 page-break-before:auto
40 }
41  
42 h1>h2,h2>h3,h3>h4,h4>h5,h5>h6 {
43 page-break-before:avoid
44 }
45  
46 img {
47 page-break-inside:avoid
48 }
49  
50 */
51  
52  
53 /*============================================================================*/
109 miho 54 /* Globální nastavení */
45 kakl 55 /*============================================================================*/
56  
57  
109 miho 58 /* Sjednocení nastavení celého dokumentu */
45 kakl 59 /* ------------------------------------- */
60 html, body {
109 miho 61 background: none #FFFFFF; /* barva pozadí bez obrázku */
62 color: #000000; /* barva písma */
63 margin: 0px; /* sjednotíme okraje pro všechny prohlížeče */
45 kakl 64 padding: 0px;
65 }
66  
67 body {
109 miho 68 /* _padding: 0.5em; /* IE6 okraj okolo pozor velikost se nemění při změně obraení */
45 kakl 69 }
70  
71 /*============================================================================*/
109 miho 72 /* Nastavení písma textu a nadpisů */
45 kakl 73 /*============================================================================*/
74  
75  
109 miho 76 /* Standardní písmo odstavců */
45 kakl 77 /* ------------------------- */
109 miho 78 p { /* standardní písmo odstavce */
79 font-family: "Times New Roman"; /* řez písma */
80 line-height: 1.3em; /* mezera mezi řádky uvnitř odstavce */
81 margin-left: 0px; /* standarně text od okraje */
82 margin-right: 0px; /* k okraji, mezera zajištěna paddingem */
83 margin-top: 0.75em; /* mezera před odstavcem */
45 kakl 84 margin-bottom: 0.9em; /* mezera za odstavcem */
85 }
86  
87  
109 miho 88 /* Titulek, podtitul a autor článku */
45 kakl 89 /* -------------------------------- */
90 p.Titul, li.Titul, div.Titul,
109 miho 91 p.Title, li.Title, div.Title { /* titulek článku, obdoba H1 */
92 font-family: Arial; /* nadpisové písmo */
93 font-weight: bolder; /* tlistší písmo */
94 text-align: center; /* centrované */
95 font-size: 200%; /* velké písmo */
96 color: #CC0000; /* hlavní nadpisová barva */
97 margin-top: 0.5em; /* mezera před odstavcem */
45 kakl 98 margin-bottom: 0.5em; /* mezera za odstavcem */
99 }
100  
109 miho 101 p.Autor, li.Autor, div.Autor { /* standardní písmo */
102 font-family: Arial; /* nadpisovým písmem */
103 text-align: center; /* centrované */
104 color: blue; /* vedlejší nadpisová barva */
105 margin-top: 0.25em; /* mezera před odstavcem */
45 kakl 106 }
107  
108 p.MsoSubtitle, li.MsoSubtitle, div.MsoSubtitle,
109 p.Subtitle, li.Subtitle, div.Subtitle {
109 miho 110 font-family: Arial; /* nadpisové písmo */
111 font-style: italic; /* skloněné */
112 text-align: center; /* centrované */
113 font-size: 120%; /* trošku větší písmo */
114 color: #0000FF; /* vedlejší nadpisová barva */
115 margin-top: 1em; /* mezera před */
116 margin-bottom: 2em; /* mezera za vypadá lépe když je větší */
117 margin-left: 10%; /* není od okraje do okraje */
118 margin-right: 10%; /* ani na jedné straně */
45 kakl 119 }
120  
121  
109 miho 122 /* společné vlastnosti nadpisů a nadpisy */
45 kakl 123 /* ------------------------------------- */
124 h1, h2, h3, h4, h5, h6 {
109 miho 125 page-break-inside: avoid; /* nedělit stránky v nadpisech */
126 page-break-after: avoid; /* zákaz zalomení pod nadpisem */
127 font-family: Arial; /* nadpisový font */
128 font-weight: bolder; /* tlistší písmo */
129 margin-top: 0.75em; /* mezera před trochu větší */
71 miho 130 margin-bottom: 0.5em; /* mezera za */
45 kakl 131 }
132  
133 h1 { /* viz styl titulku */
109 miho 134 font-size: 200%; /* veliké písmo */
135 color: #CC0000; /* hlavní nadpisová barva */
45 kakl 136 }
137  
109 miho 138 h1.Small { /* zmenšený nadpis */
71 miho 139 font-size: 150%; /* velikost jako h2 */
140 }
141  
45 kakl 142 h2 {
109 miho 143 font-size: 150%; /* velké písmo */
144 color: blue; /* vedlejší barva nadpisu */
45 kakl 145 }
146  
109 miho 147 h2.Small { /* zmenšený nadpis */
71 miho 148 font-size: 120%; /* velikost jako h3 */
149 }
150  
45 kakl 151 h3 {
109 miho 152 font-size: 120%; /* větší písmo */
153 color: blue; /* vedlejší barva nadpisu */
45 kakl 154 }
155  
109 miho 156 h3.Small { /* zmenšený nadpis */
71 miho 157 font-size: 100%; /* velikost jako h4 */
158 }
159  
109 miho 160 h4, h5, h6 { /* písma jen mírně odlišná */
161 font-style: italic; /* skloněné */
162 color: blue; /* vedlejší barva nadpisu */
45 kakl 163 }
164  
71 miho 165  
166  
109 miho 167 samp { /* ukázky výpisů a podobně */
168 font-family: "Courier New"; /* neproporcionální písmo */
45 kakl 169 }
170  
109 miho 171 /* První slovo má první písmeno zvýrazněné */
45 kakl 172 .FirstWord:first-letter {
109 miho 173 color: red; /* zvýraznné první písmeno */
45 kakl 174 }
175  
109 miho 176 /* Zvýrazněné řádky s odkazy */
71 miho 177 .FirstWord a {
109 miho 178 text-decoration: none; /* odkaz není podtržený */
179 color: inherit; /* odkaz nemá zvláštní barvu */
180 _color: #993300; /* IE6 nám nějak nedědí barvu */
45 kakl 181 }
182  
183  
184 /*============================================================================*/
109 miho 185 /* Nastavení pro hlavičku, patičku a menu */
45 kakl 186 /*============================================================================*/
187  
188  
109 miho 189 /* Společná nastavení pro Hlavičku Menu a Patičku */
45 kakl 190 /* ---------------------------------------------- */
191 div.InnerHeader, div.InnerMenu, div.InnerFooter {
109 miho 192 /*border: dotted #FF8080 1px; /* pro ladění */
193 width: 100%; /* přes celou stránku */
194 margin: 0em; /* pro jistotu žádný vnější okraj */
45 kakl 195 border: 0em; /* pro jistotu */
109 miho 196 background-color: #FFFFCC; /* pozor na průhlednost při rolování */
197 color: #993300; /* barva písma */
45 kakl 198 }
199  
200  
109 miho 201 /* Nastavení specifická pro Hlavičku */
45 kakl 202 /* --------------------------------- */
109 miho 203 div.InnerHeader { /* kontejner na hlavičku */
204 /*border: solid 1px red; /* pro ladění */
205 position: fixed; /* fixní umístění na stránce */
206 _position: static; /* IE6 neumí position fixed */
45 kakl 207 border-bottom: solid 2px #993300; /* linka pod hlavickou */
109 miho 208 top: -2px; /* umistění na stránce o tloušťku linky */
209 white-space: nowrap; /* je zakázáno zalomit hlavičku */
210 overflow: hidden; /* co přečuhuje zahoď */
211 font-size: 3em; /* velikost písma vzhedem k rodiči */
212 padding: 0em; /* vnitřní výplň (vzhledem k mému písmu) */
213 line-height: 100%; /* vzdálenost řádek od sebe */
45 kakl 214 }
215  
109 miho 216 div.InnerHeader .HeaderLogo { /* text loga "MLAB" v hlavičce*/
217 /*background: #CCFFCC; /* pro ladění */
45 kakl 218 padding-left: 0.2em; /* mezera vlevo */
219 }
220  
109 miho 221 div.InnerHeader img { /* textu "online" v hlavičce */
222 /*border: solid 1px red; /* pro ladění neprůhledného obrázku */
223 /*background: #FFCCCC; /* pro ladění průhledného obrázku */
224 height: 0.7em; /* gumová výška podle velikosti textu */
225 width: 2em; /* gumová šířka podle velikosti textu */
45 kakl 226 }
227  
109 miho 228 div.InnerHeader .HeaderText { /* nadpis stránky (title) v hlavičce */
229 /*border: solid 1px yellow; /* pro ladění */
230 background: #FFFFCC; /* IE6 aby text zvítězil při konfliktu s logem */
231 /*background: #CCFFCC; /* pro ladění */
232 position: absolute; /* absolutní umístění */
233 text-align: right; /* zarovnání doprava (centrovaný obsah IE6 ignoruje) */
45 kakl 234 padding-right: 0.2em; /* mezera vpravo */
109 miho 235 font-size: 80%; /* velikost písma o něo menší */
236 left: 6.625em; /* posunutí o logo 5.3em / 80% */
237 _left: auto; /* IE6 natahuje se místo vlevo od textu */
238 right: 0px; /* pravý okraj až na konci */
239 top: 2px; /* posunutí o čáru jako u ostatních částí hlavičky */
45 kakl 240 }
241  
109 miho 242 div.InnerHeader a { /* odkaz v hlavičce */
243 text-decoration: none; /* odkaz není podtržený */
244 color: inherit; /* odkaz nemá zvláštní barvu */
245 _color: #993300; /* IE6 nám nějak nedědí barvu */
45 kakl 246 }
247  
109 miho 248 div.InnerHeader a:hover { /* při najetí kurzoru na odkaz v hlavičce */
249 color: #FF0000; /* změň barvu odkazu */
45 kakl 250 }
251  
252  
109 miho 253 /* Nastavení specifická pro Menu */
45 kakl 254 /* ----------------------------- */
255 div.InnerMenu { /* kontejner pro menu */
109 miho 256 position: fixed; /* fixní umístění na stránce */
257 _position: static; /* IE6 neumí position fixed */
258 width: 16ex; /* šířka bloku s menu */
259 _width: 100%; /* IE6 šířka přes celou stránku */
260 top: 3em; /* výška hlavičky = výška písma + 2*padding */
261 _top: 0px; /* IE6 umístění hned pod hlavičku */
262 left: -2px; /* kompenzace šířky čáry */
263 _left: 0px; /* IE6 tady čáru nemáme */
264 bottom: 0px; /* umístění dole až dolu */
265 border-right: solid 2px #993300; /* oddělující linka vpravo */
266 _border-right: none; /* IE6 bez čáry vpravo */
267 _border-bottom: solid 4px #993300; /* oddělující linka dole (tlustá jako ty 2 nahoře) */
268 _background: #993300; /* IE6 pozadí stejné jako linky */
269 _color: #FFFFCC; /* IE6 barva textu menu uvnitř pruhu */
270 text-align: center; /* centrovaný obsah */
271 _text-align: left; /* IE6 zarovnáváme vlevo */
272 font-weight: bold; /* tlusté písmo odkazu */
45 kakl 273 }
274  
109 miho 275 div.InnerMenu .Navigation { /* vnitřní kontejner na navigační tlačítka */
276 /*_background: #333333; /* ladící pozadí */
277 margin-left: 2px; /* kompenzace kompenzace čáry */
278 _margin-left: 0.5em; /* IE6 tady potřebuji jen okraj */
279 _border: 0px; /* IE6 žádný okraj */
280 _padding: 0px; /* IE6 žádná výplň */
45 kakl 281 }
282  
283 div.InnerMenu .MenuText { /* popisky v navigaci */
109 miho 284 /*background: #DDDDDD; /* ladící pozadí */
285 border: none; /* žádný okraj */
286 margin: 3px; /* malé mezery okolo */
45 kakl 287 }
288  
289  
109 miho 290 /* Zobrazení seznamu odkazů v menu */
45 kakl 291 /* ------------------------------- */
109 miho 292 div.InnerMenu ul { /* navigace jako seznam odkazů */
293 list-style: none; /* seznam je bez odrážek */
294 margin: 0px; /* bez odsazení IE */
295 padding: 0em; /* bez odsazení FF */
296 white-space: nowrap; /* zákaz lámání položek menu do řádek */
45 kakl 297 }
298  
109 miho 299 div.InnerMenu li { /* jednotlivé odkazy */
300 /*background: #BBBBBB; /* ladící pozadí */
301 border: solid 1px #993300; /* tenký rámeček */
302 margin: 2px; /* malé mezery okolo */
303 background: #993300; /* tmavé pozadí "tlačítek" v liště */
304 color: #FFFFCC; /* světlá písmena na "tlačítkách" */
305 _background: #FFFFCC; /* IE6 světlé pozadí "tlačítek" v liště */
306 _color: #993300; /* IE6 tmavá písmena na "tlačítkách" */
45 kakl 307 }
308  
309 div.InnerMenu a { /* odkazy v menu */
109 miho 310 text-decoration: none; /* odstranění podtržení odkazů */
311 color: inherit; /* barva písma odkazu jako by to nebyl odkaz */
312 _color: #000000; /* IE6 neumí dědit */
45 kakl 313 }
314  
109 miho 315 div.InnerMenu a:hover { /* po najetí kurzoru na odkazy v menu */
316 color: #FF0000; /* změn barvu písma */
45 kakl 317 }
318  
109 miho 319 /* Zobrazení v menu */
45 kakl 320 /* ---------------- */
109 miho 321 div.InnerMenu * { /* Pro IE6 je celé menu plovoucí v řádce */
322 _float: left; /* IE6 všechny prvky menu plavou vlevo */
45 kakl 323 _padding-left: 2px; /* IE6 mezera mezi prvky vlevo */
324 _padding-right: 2px; /* IE6 mezera mezi prvky vpravo */
325 }
326  
327  
109 miho 328 /* Nastavení specifická pro Patičku */
45 kakl 329 /* -------------------------------- */
109 miho 330 div.InnerFooter{ /* patička */
331 position: fixed; /* fixní umístění na stránce */
332 _position: static; /* IE6 neumí position fixed */
333 bottom: -4px; /* umístění na stránce = šířka čáry nahoře a dole */
334 border-top: solid 2px #993300; /* linka nad hlavičkou */
335 border-bottom: solid 6px #993300; /* linka pod hlavičkou + záporné posunutí */
336 _border-bottom: solid 2px #993300; /* IE6 tenká linka */
337 font-size: 80%; /* písmo v patičce trochu zmenšit */
45 kakl 338 height: 1.25em;
109 miho 339 overflow: hidden; /* co přečuhuje zahoď */
340 /*padding-left: 1em; /* to nejde použít protože IE6 neumí počítat */
341 } /* přidal jsem pevnou mezeru do textu */
45 kakl 342  
343  
344 /*============================================================================*/
109 miho 345 /* Nastavení pro tělo dokumentu */
45 kakl 346 /*============================================================================*/
347  
348  
109 miho 349 /* Nastavení těla dokumentu */
45 kakl 350 /* ------------------------ */
109 miho 351 div.Text, div.Section1 { /* tělo stránky */
352 border: solid #20FF20 1px; /* pro ladění */
353 padding: 2ex; /* oddělení textu od okrajů */
354 margin-top: 3em; /* když funguje fixní pozicování vynech hlavičku */
355 _margin-top: 0px; /* IE6 umístění rovnou pod hlavičku */
356 margin-left: 16ex; /* odsazení o velikost menu a kousek */
357 _margin-left: 0px; /* IE6 levý okraj vznikne sám obtékáním menu */
358 margin-bottom: 1.25em; /* když funguje fixní pozicování vynech patičku */
359 /* číslo 1/font-size v patičce */
360 _margin-bottom: 0px; /* IE6 umístění patičku hned za textem */
45 kakl 361 }
362  
363  
109 miho 364 /* centrování vyznačených elementů */
45 kakl 365 .center {
366 text-align: center;
367 }
368  
109 miho 369 /* obarvení textů psaných kurzivou */
45 kakl 370 p i, div i, span i {
371 color: #990000;
372 }
373  
374  
375 /* Tabulky */
376 /* ------- */
377 table {
109 miho 378 border-collapse: separate; /* příčky v tabulce */
379 border: 3px solid #CCCCCC; /* vnější okraj tabulky */
380 margin-top: 0.5em; /* odstup nahoře (oddělení od souseda) */
45 kakl 381 margin-bottom: 0.5em; /* odstup dole */
109 miho 382 background-color: #EEFFEE; /* pozadí tabulky */
45 kakl 383 }
384  
109 miho 385 /* příčky mezi buňkami */
45 kakl 386 th, td {
109 miho 387 border: 1px solid #CCCCCC; /* příčky mezi buňkami (v FF se barva chybně dědí) */
388 text-align: left; /* přebití centrování th prvku */
389 padding: 0.5em; /* mezera mezi obsahem buňky a příčkami */
45 kakl 390 }
391  
392 th {
109 miho 393 color: #FF2020; /* odlišení hlavičkových řádek */
45 kakl 394 }
395  
396 table p, table div, table li, table ol, table ul {
109 miho 397 margin-top: 0.3em; /* omezeni nadbytečné mezery u FF */
398 margin-bottom: 0.3em; /* omezeni nadbytečné mezery u FF */
45 kakl 399 }
400  
401 /* Tabulka Soupiska */
402 /* ---------------- */
109 miho 403 /* Tabulka s rozpiskou součástek */
404 /* Formát tabulky vychází z obecné tabulky */
405 /* první <th> je legenda */
406 /* další <th> jsou skupinou součástek */
407 /* značky <td> jsou vlastní seznam, první sloupec odskočený vpravo */
45 kakl 408 table.Soupiska td {
109 miho 409 padding: 0px 0.5em; /* mezera mezi obsahem buňky a příčkami */
45 kakl 410 }
411  
412 table.Soupiska tr td:first-child {
109 miho 413 padding-left: 2ex; /* odsazení referenci, nefunguje v IE6 */
45 kakl 414 }
415  
109 miho 416 table.Soupiska tr > th { /* funkci potomek IE6 nezná */
45 kakl 417 font-style: italic; /* a tak se to v IE ignoruje */
109 miho 418 font-weight: normal; /* jinak vše th je hubené písmo kurzivou */
45 kakl 419 }
420  
421 table.Soupiska tr:first-child > th {
109 miho 422 font-style: normal; /* vše kromě prvního th (opět v IE6 nefunguje) */
45 kakl 423 font-weight: bold;
424 }
425  
426  
427  
428  
429 /*============================================================================*/
109 miho 430 /* Formáty pro stránku o autorech */
45 kakl 431 /*============================================================================*/
432  
433  
434 /* List pro jednoho autora */
435 /* ----------------------- */
436 div.AboutAuthor {
109 miho 437 border: solid 1px red; /* rámeček okolo člověka */
438 padding: 2em; /* mezera uvnitř rámečku */
439 margin-bottom: 1em; /* mezera mezi rámečky pod sebou */
45 kakl 440 }
441  
109 miho 442 /* Položka jména autora */
45 kakl 443 /* -------------------- */
109 miho 444 div.AboutAuthor .Name { /* jméno autora */
445 font-style: italic; /* kurzíva */
446 color: red; /* barva jména */
45 kakl 447 }
448  
109 miho 449 /* Vložený obrázek autora */
45 kakl 450 /* ---------------------- */
109 miho 451 div.AboutAuthor img { /* obrázek autora (kdyby tak fungovalo abs. pozicování) */
452 float:right; /* plovoucí vpravo */
453 padding-left: 20px; /* mezera mezi textem a obrázkem */
45 kakl 454 }
455  
109 miho 456 /* Seznam činností autora */
45 kakl 457 /* ---------------------- */
458 div.AboutAuthor ul {
109 miho 459 font-style: italic; /* písmo seznamu činností */
460 list-style: none; /* seznam je bez odrážek */
45 kakl 461 }