{HEADER END}
{FILE START}

MLAB

[/] [Web/] [CSS/] [MLAB.css] - Revize 335

Přejdi na současnou revizi

Porovnej s předchozí - Blame - Stáhnout jako soubor

/*============================================================================*/
/* Historie                                                                   */
/*============================================================================*/
/* Opraveno zarovnání a velikost textu hlavičky                               */
/* Změněno kódování na UTF-8 - nutné pro IE a s českými komentáři             */
/* Doplněny styly pro websvn                                                  */
/* Nutno doladit patičku (přesnost patička X text)                            */
/* Zlepšena podpora IE7 (oprava barev odkazů v menu)                          */
/* Doplněn styl pro zobrazení menu při vypnutém JavaScriptu                   */

/* PROBLEM - opravit hlavičku aby se zarovnávala správně, současné řešení není
   příliš robustní (nepracuje správně při změně velikosti písma).
*/

/* Chybí styl pro výpis programu (jako blok) */

/*
Pro tisk se nesmí použít pozicování fixed protože to by vedlo k překrývání
textu hlavičkou a patičkou na dalších stránkách.
(možná řešitelné pomocí z-order)
Pro tisk je vhodné vypnout menu.

připojení:
 nejdřív hlavní css
 pak za něj tiskový css
 
V tiskovém css by mělo být
 width: 100%    šířka přez celou stranu
 velikost písma v pt
 řádkování 1
 patkové písmo (lépe se čte)
   font: 12pt/1 "Times CE", Times, "Times New Roman", serif;
   pro obrazovku je lepší font bezpatkový, skus Verdana
 zhasnout nepotřebné dispaly: none
 

Dodělat:
  Alternativní fonty (font-family)
  Definice stylu pro tisk (pro stránkovaná média)
  Alternativní styly
     bez absolutního pozicování
     možná bez barev (černobíle)
  Styl nadpisu tabulky
  Opravit chybné odsazení spodního okraje (o velikost patičky), teď je větší

h1,h2,h3,h4,h5,h6 {
  page-break-inside:avoid;
  page-break-after:avoid;
  page-break-before:auto
}

h1>h2,h2>h3,h3>h4,h4>h5,h5>h6 {
  page-break-before:avoid
}

img {
  page-break-inside:avoid
}

*/


/*============================================================================*/
/* Globální nastavení                                                         */
/*============================================================================*/


/* Sjednocení nastavení celého dokumentu */
/* ------------------------------------- */
html, body {
  background: none #FFFFFF;           /* barva pozadí bez obrázku */
  color:           #000000;           /* barva písma */
  margin:              0px;           /* sjednotíme okraje pro všechny prohlížeče */
  padding:             0px;           /* sjednotíme výplň */
}

body {
/*  _padding: 0.5em;                    /* IE6 okraj okolo pozor velikost se nemění při změně zobrazení */
 }

/*============================================================================*/
/* Nastavení písma textu a nadpisů                                            */
/*============================================================================*/


/* Standardní písmo odstavců */
/* ------------------------- */
p {                                   /* standardní písmo odstavce */
  font-family: "Times New Roman";     /* řez písma */
  line-height:   1.3em;               /* mezera mezi řádky uvnitř odstavce */
  margin-left:     0px;               /* standarně text od okraje */
  margin-right:    0px;               /* k okraji, mezera zajištěna paddingem */
  margin-top:   0.75em;               /* mezera před odstavcem */
  margin-bottom: 0.9em;               /* mezera za odstavcem */
}


/* Titulek, podtitul a autor článku */
/* -------------------------------- */
p.Titul, li.Titul, div.Titul,
p.Title, li.Title, div.Title {        /* titulek článku, obdoba H1 */
  font-family:   Arial;               /* nadpisové písmo */
  font-weight:  bolder;               /* tlistší písmo */
  text-align:   center;               /* centrované */
  font-size:      200%;               /* velké písmo */
  color:       #CC0000;               /* hlavní nadpisová barva */
  margin-top:    0.5em;               /* mezera před odstavcem */
  margin-bottom: 0.5em;               /* mezera za odstavcem */
}

p.Autor, li.Autor, div.Autor {        /* standardní písmo */
  font-family:   Arial;               /* nadpisovým písmem */
  text-align:   center;               /* centrované */
  color:          blue;               /* vedlejší nadpisová barva */
  margin-top:   0.25em;               /* mezera před odstavcem */
}

p.MsoSubtitle, li.MsoSubtitle, div.MsoSubtitle,
p.Subtitle, li.Subtitle, div.Subtitle {
  font-family:   Arial;               /* nadpisové písmo */
  font-style:   italic;               /* skloněné */
  text-align:   center;               /* centrované */
  font-size:      120%;               /* trošku větší písmo */
  color:       #0000FF;               /* vedlejší nadpisová barva */
  margin-top:      1em;               /* mezera před */
  margin-bottom:   2em;               /* mezera za vypadá lépe když je větší */
  margin-left:     10%;               /* není od okraje do okraje */
  margin-right:    10%;               /* ani na jedné straně */
}


/* společné vlastnosti nadpisů a nadpisy */
/* ------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  page-break-inside: avoid;           /* nedělit stránky v nadpisech */
  page-break-after:  avoid;           /* zákaz zalomení pod nadpisem */
  font-family:       Arial;           /* nadpisový font */
  font-weight:      bolder;           /* tlistší písmo */
  margin-top:       0.75em;           /* mezera před trochu větší */
  margin-bottom:     0.5em;           /* mezera za */
}

h1 {                                  /* viz styl titulku */
  font-size:      200%;               /* veliké písmo */
  color:       #CC0000;               /* hlavní nadpisová barva */
}

h1.Small {                            /* zmenšený nadpis */
  font-size:      150%;               /* velikost jako h2 */
}

h2 {
  font-size:      150%;               /* velké písmo */
  color:          blue;               /* vedlejší barva nadpisu */
}

h2.Small {                            /* zmenšený nadpis */
  font-size:      120%;               /* velikost jako h3 */
}

h3 {
  font-size:      120%;               /* větší písmo */
  color:       #6666dd;               /* vedlejší barva nadpisu */
}

h3.Small {                            /* zmenšený nadpis */
  font-size:      100%;               /* velikost jako h4 */
}

h4, h5, h6 {                          /* písma jen mírně odlišná */
  font-style:   italic;               /* skloněné */
  color:       #6666dd;               /* vedlejší barva nadpisu */
}

h1 b, h2 b, h3 b, h4 b, h5 b, h6 b    /* Zvýraznění uvnitř nadpisu */
{
  font-weight:    bold;               /* Tlustě */
  font-size:      120%;               /* Větší (tlustě někdy není odlišné) */
}


samp {                                /* ukázky výpisů a podobně */
  font-family: "Courier New";         /* neproporcionální písmo */
  background:      lightgrey;         /* zvýraznění barvou pozadí */
}

samp.Block {                          /* pro ukázky souvislých bloků kódu */
  display:             table;         /* je to blok široký dle obsahu */
  _display:            block;         /* IE6 blok ale široký přes celou stránku */
  white-space:           pre;         /* dodrž formátování */
  margin-left:           2em;         /* odsazení bloku*/
  padding:             0.5ex;         /* vnitřní okraj */
}

.Samp {                               /* k odlišení příkladů HTML objektů */
  margin-left:           2em;         /* odsazení bloku jako u samp*/
}


/* První slovo má první písmeno zvýrazněné */
.FirstWord:first-letter {
  color:           red;               /* zvýraznné první písmeno */
}

/* Zvýrazněné řádky s odkazy */
.FirstWord a {
  text-decoration:    none;           /* odkaz není podtržený */
  color:           inherit;           /* odkaz nemá zvláštní barvu */
  _color:          #993300;           /* IE6 nám nějak nedědí barvu */
}


/*============================================================================*/
/* Nastavení pro hlavičku, patičku a menu                                     */
/*============================================================================*/


/* Společná nastavení pro Hlavičku Menu a Patičku */
/* ---------------------------------------------- */
div.InnerHeader, div.InnerMenu, div.InnerFooter {
  /*border: dotted #FF8080 1px;       /* pro ladění */
  width:     100%;                    /* přes celou stránku */
  margin:     0em;                    /* pro jistotu žádný vnější okraj */
  border:     0em;                    /* pro jistotu */
  background-color: #FFFFCC;          /* pozor na průhlednost při rolování */
  color:            #993300;          /* barva písma */
}


/* Nastavení specifická pro Hlavičku */
/* --------------------------------- */
div.InnerHeader {                     /* kontejner na hlavičku */
  /*border: solid 1px red;            /* pro ladění */
  position:     fixed;                /* fixní umístění na stránce */
  z-index:        100;                /* hodně navrch */
  _position:   static;                /* IE6 neumí position fixed */
  border-bottom: solid 2px #993300;   /* linka pod hlavickou */
  top:           -2px;                /* umistění na stránce o tloušťku linky */
  white-space: nowrap;                /* je zakázáno zalomit hlavičku */
  overflow:    hidden;                /* co přečuhuje zahoď */
  font-size:      3em;                /* velikost písma vzhedem k rodiči */
  padding:        0em;                /* vnitřní výplň (vzhledem k mému písmu) */
  line-height:   100%;                /* vzdálenost řádek od sebe */
}

div.InnerHeader .HeaderLogo {         /* text loga "MLAB" v hlavičce*/
  /*background: #CCFFCC;              /* pro ladění */
  padding-left:   0.2em;              /* mezera vlevo */
}

div.InnerHeader img {                 /* textu "online" v hlavičce */
  /*border: solid 1px red;            /* pro ladění neprůhledného obrázku */
  /*background: #FFCCCC;              /* pro ladění průhledného obrázku */
  height: 0.7em;                      /* gumová výška podle velikosti textu */
  width:    2em;                      /* gumová šířka podle velikosti textu */
  border:   0px;                      /* obrázek je bez okraje */
/* ve skutečnosti vadí asi horní okraj obrázku (text se posune kousek dolu) */
/* nebo nějaký problém se svislým zarovnáním */
margin: 0px;
padding: 0px;
position: absolute;
top: 0.15em;
}

div.InnerHeader .HeaderText {         /* nadpis stránky (title) v hlavičce */
  /*border: solid 1px yellow;         /* pro ladění */
  background:    #FFFFCC;             /* IE6 aby text zvítězil při konfliktu s logem */
  /*background: #CCFFCC;              /* pro ladění */
  position:    absolute;              /* absolutní umístění */
  text-align:     right;              /* zarovnání doprava (centrovaný obsah IE6 ignoruje) */
  padding-right:  0.2em;              /* mezera vpravo */
  font-size:        80%;              /* velikost písma o něo menší */
  left:         6.625em;              /* posunutí o logo 5.3em / 80% */
  _left:           auto;              /* IE6 natahuje se místo vlevo od textu */
  right:            0px;              /* pravý okraj až na konci */
  top:              2px;              /* posunutí o čáru jako u ostatních částí hlavičky */
  _top:             0px;              /* IE6 oprava posunutí (nevím proč) */
}

div.InnerHeader a {                   /* odkaz v hlavičce */
  text-decoration: none;              /* odkaz není podtržený */
  color:        #993300;              /* IE6 a IE7 nedědí barvu textu */
}

div.InnerHeader a:hover {             /* při najetí kurzoru na odkaz v hlavičce */
  color: #FF0000;                     /* změň barvu odkazu */
}


/* Nastavení specifická pro Menu */
/* ----------------------------- */
div.InnerMenu {                       /* kontejner pro menu */
  position:   fixed;                  /* fixní umístění na stránce */
  _position: static;                  /* IE6 neumí position fixed */
  width:       16ex;                  /* šířka bloku s menu */
  _width:      100%;                  /* IE6 šířka přes celou stránku */
  top:          3em;                  /* výška hlavičky = výška písma + 2*padding */
  _top:         0px;                  /* IE6 umístění hned pod hlavičku */
  left:        -2px;                  /* kompenzace šířky čáry */
  _left:        0px;                  /* IE6 tady čáru nemáme */
  bottom:       0px;                  /* umístění dole až dolu */
  border-right:   solid 2px #993300;  /* oddělující linka vpravo */
  _border-right:  none;               /* IE6 bez čáry vpravo */
  _border-bottom: solid 4px #993300;  /* oddělující linka dole (tlustá jako ty 2 nahoře) */
  _background: #993300;               /* IE6 pozadí stejné jako linky */
  _color:      #FFFFCC;               /* IE6 barva textu menu uvnitř pruhu */
  text-align:   center;               /* centrovaný obsah */
  _text-align:    left;               /* IE6 zarovnáváme vlevo */
  font-weight:    bold;               /* tlusté písmo odkazu */
}

div.InnerMenu .Navigation {           /* vnitřní kontejner na navigační tlačítka */
  /*_background: #333333;             /* ladící pozadí */
  margin-left:     2px;               /* kompenzace kompenzace čáry */
  _margin-left:  0.5em;               /* IE6 tady potřebuji jen okraj */
  _border:         0px;               /* IE6 žádný okraj */
  _padding:        0px;               /* IE6 žádná výplň */
}

div.InnerMenu .MenuText {             /* popisky v navigaci */
  /*background: #DDDDDD;              /* ladící pozadí */
  border:    none;                    /* žádný okraj */
  margin:     3px;                    /* malé mezery okolo */
}


/* Zobrazení seznamu odkazů v menu */
/* ------------------------------- */
div.InnerMenu ul {                    /* navigace jako seznam odkazů */
  list-style:    none;                /* seznam je bez odrážek */
  margin:         0px;                /* bez odsazení IE */
  padding:        0em;                /* bez odsazení FF */
  white-space: nowrap;                /* zákaz lámání položek menu do řádek */
}

div.InnerMenu li {                    /* jednotlivé odkazy */
  /*background: #BBBBBB;              /* ladící pozadí */
  border: solid 1px #993300;          /* tenký rámeček */
  margin:          2px;               /* malé mezery okolo */
  background:  #993300;               /* tmavé pozadí "tlačítek" v liště */
  color:       #FFFFCC;               /* světlá písmena na "tlačítkách" */
  _background: #FFFFCC;               /* IE6 světlé pozadí "tlačítek" v liště */
  _color:      #993300;               /* IE6 tmavá písmena na "tlačítkách" */
}

div.InnerMenu a {                     /* odkazy v menu */
  text-decoration: none;              /* odstranění podtržení odkazů */
  color:        #FFFFCC;              /* IE6 a IE7 nedědí, barva textu jako by to nebyl odkaz */
  _color:       #000000;              /* IE6 černá jako kontrastní barva */
}

div.InnerMenu a:hover {               /* po najetí kurzoru na odkazy v menu */
  color: #FF0000;                     /* změn barvu písma */
}

/* Zobrazení v menu */
/* ---------------- */
div.InnerMenu * {                     /* Pro IE6 je celé menu plovoucí v řádce */
  _float:        left;                /* IE6 všechny prvky menu plavou vlevo */
  _padding-left:  2px;                /* IE6 mezera mezi prvky vlevo */
  _padding-right: 2px;                /* IE6 mezera mezi prvky vpravo */
}

/* Zobrazení pomocného menu když není JavaScript */
/* --------------------------------------------- */
div.MenuNoscript a {                  /* Odkazy v pomocné hlavičce */
  padding-left:    0.5ex;             /* mezera mezi odkazy */
  padding-right:   0.5ex;
}


/* Nastavení specifická pro Patičku */
/* -------------------------------- */
div.InnerFooter{                      /* patička */
  position:    fixed;                 /* fixní umístění na stránce */
  _position:  static;                 /* IE6 neumí position fixed */
  bottom:       -4px;                 /* umístění na stránce = šířka čáry nahoře a dole */
  border-top:     solid 2px #993300;  /* linka nad hlavičkou */
  border-bottom:  solid 6px #993300;  /* linka pod hlavičkou + záporné posunutí */
  _border-bottom: solid 2px #993300;  /* IE6 tenká linka */
  font-size:     80%;                 /* písmo v patičce trochu zmenšit */
height:   1.25em;
overflow:    hidden;                /* co přečuhuje zahoď */
  /*padding-left: 1em;                /* to nejde použít protože IE6 neumí počítat */
}                                     /* přidal jsem pevnou mezeru do textu */


/*============================================================================*/
/* Nastavení pro tělo dokumentu                                               */
/*============================================================================*/


/* Nastavení těla dokumentu */
/* ------------------------ */
div.Text, div.Section1 {              /* tělo stránky */
/*border: solid #20FF20 1px;          /* pro ladění */
  padding:          2ex;              /* oddělení textu od okrajů */
  margin-top:       3em;              /* když funguje fixní pozicování vynech hlavičku */
  _margin-top:      0px;              /* IE6 umístění rovnou pod hlavičku */
  margin-left:     16ex;              /* odsazení o velikost menu a kousek */
  _margin-left:     0px;              /* IE6 levý okraj vznikne sám obtékáním menu */
  margin-bottom: 1.25em;              /* když funguje fixní pozicování vynech patičku */
                                      /* číslo 1/font-size v patičce */
  _margin-bottom:   0px;              /* IE6 umístění patičku hned za textem */
}

/* odstranění okraje */
.NoBorder {
  border: 0;
}

a img {                               /* obrázky uvnitř odkazů obvykle nemají okraj */
  border:           0px;              /* žádný okraj */
}

/* centrování vyznačených elementů */
.Center, tr.Center th {               /* centrovaní i celých řádek tabulky */
  text-align:    center;              /* centrovani */
}

.Left {
  text-align:      left;              /* zarovnání vlevo */
}

.Right {
  text-align:     right;              /* zarovnnání vpravo*/       
}


/* Odsazení od kraje */
.ShiftRight {
  padding-left:     5ex;              /* Odsazení od levého okraje */
}


/* obarvení textů psaných kurzivou */
p i, div i, span i {
  color:        #990000;
}


em {                                  /* zvýrazňovač */
  background:    yellow;              /* podkad žlutě */
  font-style:   inherit;              /* skloněné nechci */
}

/* poznámka */
.Remark {
  font-style:    italic;              /* skloněné */
  color:        #990000;              /* barveno */
}

/* Tabulky */
/* ------- */
table {
  border-collapse: separate;          /* příčky v tabulce */
  border: 3px solid #CCCCCC;          /* vnější okraj tabulky */
  margin-top:         0.5em;          /* odstup nahoře (oddělení od souseda) */
  margin-bottom:      0.5em;          /* odstup dole */
  background-color: #EEFFEE;          /* pozadí tabulky */
}

/* příčky mezi buňkami */
th, td {
  border: 1px solid #CCCCCC;          /* příčky mezi buňkami (v FF se barva chybně dědí) */
  text-align:          left;          /* přebití centrování th prvku */
  padding:            0.5em;          /* mezera mezi obsahem buňky a příčkami */
}

th {
  color:            #FF2020;          /* odlišení hlavičkových řádek */
}

table p, table div, table li, table ol, table ul, table td {
  margin-top:         0.3em;          /* omezeni nadbytečné mezery u FF */
  margin-bottom:      0.3em;          /* omezeni nadbytečné mezery u FF */
}

/* Tabulka Soupiska */
/* ---------------- */
/*  Tabulka s rozpiskou součástek                                   */
/* Formát tabulky vychází z obecné tabulky                          */
/* první <th> je legenda                                            */
/* další <th> jsou skupinou součástek                               */
/* značky <td> jsou vlastní seznam, první sloupec odskočený vpravo  */
/* nutno doladit tak, aby fungovaly i dvousloupcové tabulky seznamu součástí */
table.Soupiska td {
  padding:        0px 0.5em;          /* mezera mezi obsahem buňky a příčkami */
}

table.Soupiska tr td {
  padding-left:         2ex;          /* odsazení referenci (a hodnot) */
}

table.Soupiska tr > th {              /* funkci potomek IE6 nezná */
  font-style:        italic;          /* a tak se to v IE ignoruje */
  font-weight:       normal;          /* jinak vše th je hubené písmo kurzivou */
  padding:        0px 0.5em;          /* mezera mezi obsahem buňky a příčkami */
}

table.Soupiska tr:first-child > th {
  font-style:        normal;          /* vše kromě prvního th (opět v IE6 nefunguje) */
  font-weight:         bold;
  padding:            0.5em;          /* mezera jen u nadpisu */
}


/* Zobrazení rozcestníku na hlavní stránce */
p.Rozcestnik {                        /* odstavec s rozcestníkem */
  text-align:        center;          /* centrovani */
}

p.Rozcestnik img {                    /* obrázky v rozcestníku */
  padding:              5px;          /* okraj */
  margin:               5px;          /* mezera mezi nimi */
  border: solid 2px #993300;          /* rámeček */
  background-color: #FFFFCC;          /* pozadí */
}


/*============================================================================*/
/* Formáty pro Toc (obsah)                                                    */
/*============================================================================*/


ul.Toc {
  background:       #EEFFEE;          /* barva pozadí seznamu jako u tabulky */
  list-style:          none;          /* bez puntíků */
  margin:              1em;           /* vnější okraj */
  padding:             1em;           /* vnitřní okraj */
}

ul.Toc li.TocH1 {
  padding-left:         0ex;          /* odsazení první úrovně */
}

ul.Toc li.TocH2 {
  padding-left:         3ex;
}

ul.Toc li.TocH3 {
  padding-left:         6ex;
}

ul.Toc li.TocH4 {
  padding-left:         9ex;
}

ul.Toc li {
  padding-left:        12ex;          /* odsazení pro všechny další */
}


/*============================================================================*/
/* Formáty pro stránku o autorech                                             */
/*============================================================================*/


div.AboutAuthor {                     /* list pro jednoho autora */
  border: solid 1px red;              /* rámeček okolo člověka */
  padding: 1.5em;                     /* mezera uvnitř rámečku */
  margin-bottom: 1em;                 /* mezera mezi rámečky pod sebou */
}

/* -------------------- */
div.AboutAuthor .Name {               /* položka jména autora */
  font-style: italic;                 /* kurzíva */
  color: red;                         /* barva jména */
}

div.AboutAuthor img.Author {          /* vložený obrázek autora */
  float:right;                        /* plovoucí vpravo */
  margin-left: 20px;                  /* mezera mezi textem a obrázkem */
  border: none;
}

div.AboutAuthor ul {                  /* Seznam činností autora */
  font-style: italic;                 /* písmo seznamu činností */
  list-style: none;                   /* seznam je bez odrážek */
}

div.AboutAuthor p.Contact {
  font-style: italic;                 /* kurzíva */
  color: red;                         /* barva jména */
}


/*============================================================================*/
/* Formáty pro WEBSVN                                                         */
/*============================================================================*/


.highlight
{
  color:        #993300;
  font-style:    italic;
}

table.bordered, table.outlined, table.blame
{
  border-collapse:         collapse;
  border:         solid 2px #993300;
}

.bordered td, .bordered th
{
  border:         solid 2px #993300;
}

.outlined td
{
  padding:          0px 5px 0px 5px;
}

.outlined th, .blame th
{
  padding:          5px 5px 5px 5px;
  font-weight:                 bold;
  border:         solid 2px #993300;
}

.outlined td, .blame td
{
  padding:          1px 5px 1px 5px;
  border-right:   solid 2px #993300;
  border-bottom:  solid 1px #F0F0F0;
}

td.diffdeleted
{
  font-size:                   11px;
  background-color:         #FFCCCC;
}

td.diffchanged
{
  font-size:                   11px;
  background-color:          yellow;
}

td.diffadded
{
  font-size:                   11px;
  background-color:         #CCFFCC;
}

td.diff
{
  font-size:                   11px;
  background-color:         #D0D0D0;
}

table.diff
{
  border-collapse:         collapse;
}

div.newpath
{
  padding:          5px 5px 5px 5px;
  border:         solid 2px #993300;
}

.plusbox, .minus
{ 
  float:                       left;
  clear:                       both;
  position:                relative;
  top:                         -3px;
  font-size:                   13px;
  font-weight:                 bold;
  width:                       16px;
  text-indent:                    0;
  height:                      16px;
  color:                      black;
  text-align:                center;
  padding:          0px 2px 0px 3px;
  border:           black solid 1px;
  margin-right:                 5px;
}

.plusbox
{ 
  background-color:         #D0D0D0;
}

.minusbox
{
  background-color:         #993300;
}

.groupname
{
  padding-left:                 0px;
  text-indent:                -25px;
  margin:               3px 0 3px 0;
}

.switchcontent
{
  margin:              3px 0 0 20px;
}

code
{
  white-space:                  pre;
}
{FILE END}
{FOOTER START}

Poháněno WebSVN v2.1 alpha 1