CSS ile Takvim Tablosu

CSS ile tablo sistemini takvimleştiriyoruz...

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

Öncelikle bu kodları

ve 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">&nbsp;</li>

        <li class="num">&nbsp;</li>

        <li class="num">&nbsp;</li>

        <li class="num">&nbsp;</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.

Gerekli düzenlemeleri yapmayı unutmayın kodlar üzerinde, kolay gelsin.

Örnek:

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

güzel olmus ellerinize saglık...
güzel

Yukarı Git