Anasayfa İletişim RSS
Fatih Nebioğlu Derslerini Okumak için Tiklayin Google'ın Link Parametresi
Sitenize kimler link verdiğini öğrenmek istiyorsanız. Bu dersi okumanızı tavsiye ederim.
 
Şimdi Üye Ol | Şifremi Unuttum
 
 
 
Anasayfa » CSS (35 ders)
 
CSS ile Takvim Tablosu

Yazar: Altuğ Orgun  
Eklenme: 20.09.2007   Okunma: 870    Puan: 4.4   Seviyesi:  Orta
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">&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:

 
  • Currently 4.44/5
Değelendirmek için üye girişi yapmanız gerekmektedir
EkleBunu Sosyal Paylam Butonu
CSS ile Takvim Tablosu Dersini Yazdırın

"CSS ile Takvim Tablosu" dersi için 3 yorum var

19.11.2007 izm35uygar diyor ki:
güzel olmus ellerinize saglık...

24.01.2008 baranmurat diyor ki:
süper

15.02.2008 fthgrbz diyor ki:
Emekleriniz için teşekkürler.
F T H

ye olmadan yorum ekleyemezsiniz !


UYARI: SANALKURS'ta yer alan materyaller ile ilgili her türlü sorumluluk hazırlayan veya gönderene aittir. SANALKURS'ta yer alan hiçbir makale, yazarından izinsiz başka bir yerde yayınlanamaz. SANALKURS kullanıcıları ve üyeleri, üçüncü kişilerin telif hakkı sahibi bulunduğu her türlü fikri eser, fotoğraf, resim vb. materyal ve ürünleri kullanamazlar. SANALKURS kullanıcı ve yazarlarının, üçüncü kişilerin telif hakkı sahibi olduğu yazı, resim vb. ürünleri kullanması durumunda, her türlü hukuki ve cezai sorumluluk kendilerine aittir. Söz konusu haksız kullanım nedeniyle SANALKURS .NET'in hiçbir hukuki sorumluluğu bulunmamakta olup, haksız kullanım nedeniyle SANALKURS.NET'in üçüncü kişilere ödemek zorunda kalabileceği her türlü tazminat ve/veya adli/idari para cezaları ilgili Sanalkurs kullanıcılarından rücu edilecektir.
 İSTATİSTİKLER
XML Kaynağımızdan yararlanarak sitemizdeki derslerimizi masaüstünüzden yada web sitenizden takip edebilirsiniz
ÇEVRİMİÇİ 67 Ziyaretçi, 1 Üye
Alaattin Örsvuran
BUGÜN DOĞUM GÜNÜ OLAN ÜYELERİMİZ:
_by_danger_ (15), ilicli (19),
Bugün: 549, Dün: 4845, Bu Ay: 15527, Toplam Ziyaret: 1043393, Toplam Üye: 92243, Son Üye: yemzet
Toplam Ders: 1644, Toplam Yazar: 40, Toplam Dosya: 43, Toplam Link: 109
   
RSS Kaynağımızdan yararlanarak sitemizdeki derslerimizi masaüstünüzden yada web sitenizden takip edebilirsiniz