On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains

Devamını Oku »

Dikey Menü Yapımı

Bildiğiniz üzere menü web sitelerde kullandığımız  en önemli işlevlerden bir tanesi.İstediğimiz sayfaya geçiş yapabiliyoruz. Aynı zamanda sitemize görsellik ve düzen katıyor.Bu yazıda dikey menü nasıl yapılır onu göreceğiz.  Menümüzü CSS ile oluşturucaz. Sözü fazla uzatmadan başlayalım.

» İlk önce link listesi oluşturalım. (HTML) Sırasız liste.

<ul class="dikeymenu">
             <li><a href="url.html">Link 1</a></li>
             <li><a href="url.html">Link 2</a></li>
             <li><a href="url.html">Link 3</a></li>
             <li><a href="url.html">Link 4</a></li>
             <li><a href="url.html">Link 5</a></li>
</ul>

» Bu kodları tarayıcıda çalıştıralım. Aşağıdaki gibi olması lazım.

» Şimdi menüyü şekillendirmek için  CSS'i kullanıcağız. Siya noktaları yani imgeleri kaldırıyoruz.

ul.dikeymenu {
          list-style-type: none;
}

» Şimdi tekrar tarayıcımızda menüyü görüntüleyelim.

» Gördüğünüz gibi siyah noktaları yok ettik. Şimdi ise margin-padding özelliklerini 0 olarak vereceğiz. Bunun nedeni boşluğu yok etmek.

ul.dikeymenu {
           list-style-type: none;
           padding: 0;
           margin: 0;
}

» Tekrar çalışmamızı tarayıca önizlemesinde bakalım.

» Artık linklere rollover özelliği ile beraber renkte verelim.

ul.dikeymenu a {
           display:  block;
           color:  #bad7f2;
}

» Önizleme yapalım.

» Ancak menüye belli bir genişlik vermeyi unutmayalım. Birde şu linkin altındaki çizgiyi kaldıralım.

ul.dikeymenu a {
           display: block;
           color: #bad7f2;
           width: 270px;
           text-decoration: none;
}

» Linkin altındaki yazı kalktı. Bu arada menüye belli bir genişlik vermeyi unutmayın yoksa link genişliği sayfa sonuna kadar uzar.

» Linklerin birbirine olan uzaklığını arttıralım.

ul.dikeymenu a {
           display: block;
           color: #bad7f2;
           width: 270px;
           text-decoration: none;
           padding: 2px 2px;
}

» Önizleme yapalım.

» Linkleri ayırma işlemi yapalım.

ul.dikeymenu li {
             margin: 0 0 1px 0;
}

» Şimdi menüyü biraz daha şekillendirelim. Linklere hemen arkaplan rengi ve farklı bir font değişikliği yapalım.

ul.dikeymenu a {
           display: block;
           color: #bad7f2;
           background-color: #336bf7;
           font-family: Tahoma;
           width: 270px;
           text-decoration: none;
           padding: 2px 2px;
}

» Tekrar menüye bakalım.

» Gördüğünüz gibi menümüz bayağı şekillendi. Şimdi hover özelliği verelim.

ul.dikeymenu a:hover {
           color: #222;
           background-color: #bad7f2;
}

           

» Hover özelliği nasıl olmuş bakalım.

Kodların Tamamı

<style type="text/css">

ul.dikeymenu {
           list-style-type:  none;
           padding: 0;
           margin: 0;
}

ul.dikeymenu a {
           display: block;
           color: #bad7f2;
           background-color: #336bf7;
           font-family: Tahoma;
           width: 270px;
           text-decoration: none;
           padding: 2px 2px;
}

ul.dikeymenu a:hover {
           color: #222;
           background-color: #bad7f2;
}
ul.dikeymenu li {
           margin: 0 0 1px 0;
}

</style>

<ul class="dikeymenu">
             <li><a href="url.html">Link 1</a></li>
             <li><a href="url.html">Link 2</a></li>
             <li><a href="url.html">Link 3</a></li>
             <li><a href="url.html">Link 4</a></li>
             <li><a href="url.html">Link 5</a></li>
</ul>

Canlı Demo

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

İleriki zamanlarda yatay menü nasıl yapılır onunla ilgili yazıyı yayınlayacağım. Herhangi bir sorun olursa yorumlara yazın.

Devamını Oku »

CSS Yorum Ekleme

CSS kodları arasına yorum eklemek önemlidir. Bu sayede sonradan tekrar baktığımızda aradığımızı daha kolay buluruz ve karışıklığı önlemiş oluruz.

Örnek :  

/*Site Yapısı*/

body{
width: 960px;           /*Site Genişliği*/
font-family: Arial;           /*font türü*/
}

/*
birden fazla satır eklediğimizde 
bir tane koymamız yeterlidir.

Örnekte de görüldüğü gibi yorum eklerken /* .... */ aralığını kullanırız.

Devamını Oku »

Blogger Türkiye Saati Ayarı

Çoğu blogger kullanıcısı bu konuda sıkıntı yaşamakta. Aslında çok basit bir işlem gerektiriyor. Bu işlemi de zaten blogger ayarlarından yapıyoruz. Hadi nasıl ayarlanır bir görelim.

   








Yukarıdaki işlemleri soldan sağa doğru uygulayın. Daha sonra ise "Ayarları Kaydet" yapın. Bu kadar.

Devamını Oku »