Tag Archives: CSS

Modulární CSS – záznam [Vít Heřman, HAVIT Vzdělávací okénko 4.1.2018]

Zanechat odpověď

Záznam z interního vzdělávacího okénka HAVIT z 4.1.2018 je publikován na našem HAVIT YouTube Channel. Téma prezentoval Vít Heřman.

Dotčená témata:

  • CSS Zen Garden
  • Klasický přístup k CSS vs. Modulární přístup
  • OOCSS – Object Oriented CSS

Šířka tlačítek v IE (input type=“button“)

Zanechat odpověď

V Internet Exploreru je docela alchymie vyrobit tlačítko, které je široké stejně jako text na něm.

<input type="button" value="Text tlačítka" class="button"/>
<asp:Button ID="MyButton" Text="Text tlačítka" class="button"/>

Co jinde funguje, v IE selhává:

.button {
    margin:0;
    padding:0;
}

Co však kupodivu pomůže, je nastavení:

.button{
    padding:0;
    width:auto;
    overflow:visible;
}

…někdy je lepší nebádat, proč tomu tak je.

Tisk dlouhých tabulek – záhlaví a zápatí na každé stránce

Zanechat odpověď

Poměrně neznámým fíglem lze v některých browserech zajistit, aby se při tisku dlouhých tabulek, které se nevejdou na jednu stránku, vytiskly určité jejich řádky na každé stránce (záhlaví a zápatí).

Stačí využít sekce tabulky thead a tfoot a nastavit jim ty správné styly.

 ...
<style type="text/css">
   thead {display: table-header-group;}
   tfoot {display: table-footer-group;}
</style>
...
<table>
   <thead>
      <tr>
         <td>Hlavička 1</td>
         <td>Hlavička 2</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>123</td>
         <td>456</td>
      </tr>
      ...
   </tbody>
   <tfoot>
      <tr>
         <td>Patička 1</td>
         <td>Patička 2</td>
      </tr>
   </tfoot>
</table>

CSS: Vertikální centrování

Zanechat odpověď 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
   <title>Vertikální centrování</title>
   <style>
      .greenBorder {border: 1px solid green;} /* nepodstatný styl */
   </style>
</head>
<body>
   <div class="greenBorder" style="display: table; height: 400px; _position: relative; overflow: hidden;">
      <div style=" _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
         <div class="greenBorder" style=" _position: relative; _top: -50%">
            libovolný prvek<br>
            libovolné výšky<br>
            a libovolného obsahu<br>
            zůstává vertikálně vystředěný
         </div>
      </div>
   </div>
</body>
</html>

Zdroj: JakPsatWeb.cz
Funguje i s jinými DOCTYPE, vyzkoušeno např. s HTML 4.01 Transitional s loose.dtd.

Pozicování obrázkových bulletů – ul, li

Zanechat odpověď

S pozicování obrázkových bulettů použitých jako list-style-image je děsnej opruz, každý prohlížeč to interpretuje jinak a spolehlivě to snad ani nejde.

Je mnohem jednodušší dát list-style-type:none a obrázkové bulettky udělat jako správně pozicované pozadí li:

ul { list-style-type: none; }
li
{
   background-image: url(...);
   background-repeat: no-repeat;
   background-position: 0 5px;
   padding-left: 10px;
}