Vo svojej sránke by som chcel vytvoriť kalendár. Je tam už určitý kôd ktorý vyzerá asi takto:
Kód:
<h3>Calendar</h3>
<ul>
<li id="calendar">
<div id="calendar1">
<table id="calendar2" summary="Calendar">
<caption>
January 2008
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Pondelok">Po</th>
<th abbr="Tuesday" scope="col" title="Utorok">Ut</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="Des" colspan="3" id="prev"></td>
<td class="pad"></td>
<td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Feb »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" class="pad"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td id="now">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="2"> </td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
To sa nachádza v tele stránky, ale je k tomu aj css:
Kód:
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/
*
{
margin: 0px;
padding: 0px;
}
a:link {
color: #C04D1D;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:visited {
color: #C04D1D;
}
body {
background: #ffffff url(images/back_all.gif);
font: 13px Arial, Helvetica, sans-serif;
color: #383838;
}
#content
{
margin: 0 auto;
background: #ffffff;
width: 1008px;
text-align: left;
}
#main
{
width: 1008px;
padding-top: 10px;
}
#back
{
width: 1008px;
padding-left: 10px;
padding-right: 10px;
background: #ffffff;
}
#header {
height: 496px;
text-align: right;
background: url(images/header.jpg) no-repeat;
}
#logo {
width: 988px;
height: 372px;
text-align: left;
padding-left: 20px;
padding-top: 20px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #ffffff;
}
#logo H2 a
{
font-size: 12px;
}
#menu
{
width: 858px;
height: 89px;
padding-left: 150px;
background: url(images/menu.gif) repeat-x;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
width: 140px;
height: 54px;
display: block;
text-align: center;
text-decoration: none;
color: #C04D1D;
font-weight: bold;
padding-top: 35px;
font-size: 14px;
text-transform: uppercase;
}
#menu a:hover {
width: 140px;
height: 54px;
color: #FFF8B3;
text-decoration: underline;
background: url(images/menu_r.gif) repeat-x;
}
#left
{
width: 228px;
}
#left H3
{
width: 203px;
height: 31px;
font-size: 14px;
font-weight: bold;
padding-left: 25px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) repeat-x
}
#left ul {
list-style: none;
margin-bottom: 10px;
background: url(images/title_back.gif) repeat-x top;
}
#left ul {
border: 0px;
margin-bottom: 10px;
padding-top: 20px;
}
#left li {
padding: 4px;
}
#arc li
{
padding-left: 30px;
}
#left a {
color: #C04D1D;
}
#left a:visited {
color: #C04D1D;
}
#left p
{
padding: 10px;
}
#calendar1 {
padding: 20px 10px 20px 10px;
}
#calendar table {
width: 100%;
text-align: center;
}
#calendar thead {
}
#calendar tbody td {
border: 1px solid #F1F1F1;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #now {
background: #696969;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff
}
#right
{
float: right;
width: 740px;
padding-right: 10px;
}
#right H4
{
margin: 0;
padding: 0px;
font-size: 12px;
color: #C5C5C5;
}
#right a
{
color: #C04D1D;
text-decoration: none;
}
#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
#right h2 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #C04D1D;
}
#right ol, #right ul
{
margin-left: 30px;
}
.date {
text-align: right;
color: #C04D1D;
font-size: 11px;
}
.date a {
color: #C04D1D;
}
#footer {
height: 74px;
width: 1008px;
clear: both;
padding-top: 30px;
background: url(images/footer.gif) repeat-x bottom;
}
#footer p {
margin: 0;
font-size: 10px;
text-align: center;
color: #ffffff;
}
#footer a {
color: #ffffff;
}
Mohol by som Vás poprosiť ako by som mohol ten kalendár prebudiť k životu aby mi sám hádzal správne dni a aby som pri tom neporušil vzhľad stránky.
//zdrojaky patria do code! (stenley)