Kalendář v CSS
27. 04. 2006 | Redakce Interval.cz | Pro CSS | Komentáře: 1
Toto řešení ukazuje, jak lze pomocí kaskádových stylů vytvořit vizuálně působivý kalendář. V příkladu jsou uvedeny dva kalendáře - jeden kalendář je vytvořen pomocí tabulek a druhý bez jejich použití.
Zde si můžete prohlédnout výsledek - kalendář s tabulkou.
Zde si můžete prohlédnout výsledek - kalendář bez tabulek.
Toto řešení publikovala Veerle Pieters. Bližší popis najdete v článku A CSS styled calendar.
Toto řešení publikoval Eric A. Meyer. Bližší popis najdete v článku Tableless Calendar.
CSS, kalendář s tabulkou
#calendar
{
width: 160px;
padding: 0;
margin: 0;
border-left: 1px solid #8da1bc;
font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #545e69;
text-align: center;
background-color: #fff;
}
.nav, .nav a
{
font: bold 18px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
text-decoration: none;
}
caption
{
margin: 0;
padding: 0;
width: 160px;
background: #8da1bc;
color: #fff;
font: bold 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
th
{
font: bold 11px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #545e69;
background: #d7dddc;
border-right: 1px solid #8da1bc;
border-bottom: 1px solid #8da1bc;
border-top: 1px solid #8da1bc;
}
.today, td.today a, td.today a:link, td.today a:visited
{
color: #5f3e00;
font-weight: bold;
background: #fff7cf;
}
td
{
border-right: 1px solid #8da1bc;
border-bottom: 1px solid #8da1bc;
width: 20px;
height: 20px;
text-align: center;
background: #f0f0f0;
}
td a
{
text-decoration: none;
font-weight: bold;
display: block;
}
td a:link, td a:visited
{
color: #617e8e;
background: #e8f2ff;
}
td a:hover, td a:active
{
color: #6a939b;
background: #e7d271;
}
CSS, kalendář bez tabulek
h3
{
text-align: center;
}
#kalendar
{
padding-top: 0.5em;
width: 230px;
}
#kalendar span
{
float: left;
width: 27px;
padding: 0;
margin: 0.05em;
text-align: center;
border: 1px solid silver;
background: #e8f2ff;
}
.nav, #kalendar span a
{
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000;
}
#kalendar, .pon
{
clear: left;
}
#kalendar .vikend
{
background: #b5d1ff;
}
#kalendar .nadpisdnu
{
background: #d6d7d7;
font-weight: bold;
}
#kalendar .prazdny
{
background: #f0f0f0;
}
#kalendar span a, #kalendar span a:visited
{
display: block;
width: 27px;
}
#kalendar #dnes a, #kalendar #dnes a:visited
{
color: #5f3e00;
background: #fff7cf;
}
#kalendar span a:hover
{
color: #fff;
background: #e7d271;
}
XHTML, kalendář s tabulkou
<html>
<body>
<table id="calendar" cellspacing="0" cellpadding="0">
<caption><a href="#" title="předchozí měsíc" class="nav">«</a> Březen <a href="#" title="příští měsíc" class="nav">»</a></caption>
<tr>
<th scope="col" abbr="Pondělí" title="Pondělí">Po</th>
<th scope="col" abbr="Úterý" title="Úterý">Út</th>
<th scope="col" abbr="Středa" title="Středa">St</th>
<th scope="col" abbr="Čtvrtek" title="Čtvrtek">Čt</th>
<th scope="col" abbr="Pátek" title="Pátek">Pá</th>
<th scope="col" abbr="Sobota" title="Sobota">So</th>
<th scope="col" abbr="Neděle" title="Neděle">Ne</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
</tr>
<tr>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
<td><a href="#">8</a></td>
<td><a href="#">9</a></td>
<td><a href="#">10</a></td>
<td><a href="#">11</a></td>
<td><a href="#">12</a></td>
</tr>
<tr>
<td><a href="#">13</a></td>
<td class="today"><a href="#">14</a></td>
<td><a href="#">15</a></td>
<td><a href="#">16</a></td>
<td><a href="#">17</a></td>
<td><a href="#">18</a></td>
<td><a href="#">19</a></td>
</tr>
<tr>
<td><a href="#">20</a></td>
<td><a href="#">21</a></td>
<td><a href="#">22</a></td>
<td><a href="#">12</a></td>
<td><a href="#">24</a></td>
<td><a href="#">25</a></td>
<td><a href="#">26</a></td>
</tr>
<tr>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
<td><a href="#">29</a></td>
<td><a href="#">30</a></td>
<td><a href="#">31</a></td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
XHTML, kalendář bez tabulek
<html>
<body>
<div id="kalendar">
<h3><a href="#" title="předchozí měsíc" class="nav">«</a> Březen <a href="#" title="příští měsíc" class="nav">»</a></h3>
<span class='pon nadpisdnu'>Po</span>
<span class='ute nadpisdnu'>Út</span>
<span class='str nadpisdnu'>St</span>
<span class='ctv nadpisdnu'>Čt</span>
<span class='pat nadpisdnu'>Pá</span>
<span class='sob nadpisdnu'>So</span>
<span class='ned nadpisdnu'>Ne</span>
<span class='pon prazdny'> </span>
<span class='ute prazdny'> </span>
<span class="str"><a href="file:///C:/Documents%20and%20Settings/Kuba/Plocha/css/94/priklad-94-1.htm">1</a></span>
<span class="ctv"><a href="#">2</a></span>
<span class="pat"><a href="#">3</a></span>
<span class="sob vikend"><a href="#">4</a></span>
<span class="ned vikend"><a href="#">5</a></span>
<span class="pon"><a href="#">6</a></span>
<span class="ute"><a href="#">7</a></span>
<span class="str"><a href="#">8</a></span>
<span class="ctv"><a href="#">9</a></span>
<span class="pat"><a href="#">10</a></span>
<span class="sob vikend"><a href="#">11</a></span>
<span class="ned vikend"><a href="#">12</a></span>
<span class="pon"><a href="#">13</a></span>
<span class="ute" id="dnes"><a href="#">14</a></span>
<span class="str"><a href="#">15</a></span>
<span class="ctv"><a href="#">16</a></span>
<span class="pat"><a href="#">17</a></span>
<span class="sob vikend"><a href="#">18</a></span>
<span class="ned vikend"><a href="#">19</a></span>
<span class="pon"><a href="#">19</a></span>
<span class="ute"><a href="#">20</a></span>
<span class="str"><a href="#">21</a></span>
<span class="ctv"><a href="#">22</a></span>
<span class="pat"><a href="#">23</a></span>
<span class="sob vikend"><a href="#">24</a></span>
<span class="ned vikend"><a href="#">25</a></span>
<span class="pon"><a href="#">26</a></span>
<span class="ute"><a href="#">27</a></span>
<span class="str"><a href="#">28</a></span>
<span class="ctv"><a href="#">29</a></span>
<span class="pat"><a href="#">30</a></span>
<span class='sob prazdny'> </span>
<span class='ned prazdny'> </span>
</div>
</body>
</html>
Další aktuální články na interval.cz
- Rychost, rychlost, rychlost - zrychlete své stránky
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
Tematicky související články
- Diagramy v CSS bez použití obrázků
- Simulace animace v CSS
- CSS font
- Menu v obrazové mapě
- Fotogalerie se stejnou výškou řádku
Dejte vědět i ostatním o článku
Komentáře ke článku
Datum vložení: 17. Červenec 2011, 22:24:29
hezkeeeddddddddddddddddddddd
