CSS ile Takvim Tablosu

~~B737~~ · #1 26-01-2008, 04:54

CSS ile yapılabilecek onlarca şey var, ilk olarak tablo sistemini takvim şeklinde geliştirmek konusuna değinmek istedim.

Öncelikle bu kodları <head> ve </head> tagları arasına ekliyoruz:

<style>#takvim {
width:280px;
font-family:arial, helvetica, sans-serif;
font-size:9pt;
color:#000;
text-align:center;
line-height:30px;
}

#takvim h2 {
width:270px;
margin:0 5px 5px 5px;
font-size:12pt;
background:#004a80;
color:#fff;
}

#takvim ul {
width:280px;
margin:0;
padding:0;
}

#takvim ul li {
width:30px;
height:30px;
display:block;
float:left;
list-style:none;
border:5px solid transparent;
margin:0;
}

#takvim ul li.gun {
background:#666;
color:#fff;
font-weight:bold;
}

#takvim ul li.num { background:#ccc; }

#takvim a.olay {
display:block;
width:30px;
height:30px;
background:#6dcff6;
text-decoration:none;
color:#004a80;
font-weight:bold;
}
</style>

Böylelikle stil bilgilerini tanıtmış olduk, şimdi tek yapmamız gereken bu stil bilgilerini içeren bir tablo oluşturmak. Bu kodları kullanacağız:

<div id="takvim">
<h2>Eylül, 2007 - Sanalkurs.NET</h2>
<ul>
<li class="gun">Pzr.</li>
<li class="gun">Pzrts.</li>
<li class="gun">Salı</li>
<li class="gun">Çrş.</li>
<li class="gun">Perş.</li>
<li class="gun">Cuma</li>
<li class="gun">Cmts.</li>

<li class="num">01</li>
<li class="num"><a href="#" class="olay">02</a></li>
<li class="num">03</li>
<li class="num">04</li>
<li class="num">05</li>
<li class="num">06</li>
<li class="num">07</li>

<li class="num">08</li>
<li class="num">09</li>
<li class="num">10</li>
<li class="num">11</li>
<li class="num">12</li>
<li class="num">13</li>
<li class="num">14</li>

<li class="num">15</li>
<li class="num">16</li>
<li class="num">17</li>
<li class="num">18</li>
<li class="num">19</li>
<li class="num">20</li>
<li class="num">21</li>

<li class="num">22</li>
<li class="num">23</li>
<li class="num">24</li>
<li class="num">25</li>
<li class="num">26</li>
<li class="num">27</li>
<li class="num">28</li>

<li class="num">29</li>
<li class="num">30</li>
<li class="num">31</li>
<li class="num"> </li>
<li class="num"> </li>
<li class="num"> </li>
<li class="num"> </li>
</ul>
</div>

div ve class taglarıyla daha önce tanıtmış olduğum stil bilgilerini tabloya girdik. Fakat şimdiden söyleyim, gerçek takvim zamanlamasıyla yapılmamıştır, yani sadece taslaktır, geliştirmek size kalmış birşey.

Benzer Konular
Konu	Konu Açanlar	Forum	Cevaplar	Güncel Mesajlar
Takvim ve saat......	Miliotta	Html kodları	3	01-08-2008 12:01
İndesign'da takvim yapımı	Professionel	Photoshop	2	29-01-2008 05:46
güzel bir dinamik takvim örneği	banias	Javascript kodları	0	25-11-2007 11:53
Windows Takvim uygulaması	kadınca	Donanım Haberleri	0	06-11-2007 05:11
Takvim (Kategori)	CMDizayn	SMF	0	27-10-2007 12:51

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder