Ul Li ile listeyi iki sütunda sıralama

Aşağıdaki koları kullanarak uzayıp giden ul ol listinizi ikiye yada geliştirerek daha fazla sütuna bölebilirsiniz.

<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>

  • abc
  • abc
  • abc
  • abc
  • abc
  • abc
  • abc
  • abc

Alttaki css stil kodlarıyla yukarıdaki listeyi 2 sütun yapabilirsiniz.

ul {
width: 50%;
float: left; padding-left: 0;
margin-left: 0;
}

li {
float: left;
width: 50%;
}

li:nth-child(odd) {
clear: left;
}

li {
float: left;
width: 50%;
}
li.first_col {
clear: left;
}


CSS Horizontal Vertical Açılır Menü Oluşturucu – Ul Ol Li

CSS bilginiz iyiyse kendinizde kolayca kodlayabilirsiniz fakat bilenler bilir karmaşık ve zor bir iştir. Bu işlemi hızlıca istediğiniz gibi oluşturabilmeniz için online hizmet veren bir site var. Bu site sayesinde bir çok adı bulunan bu görsel menüyü “CSS Horizontal Vertical Açılır Menü Oluşturucu – Ul Ol Li” süper bir şekilde oluşturabilirsiniz.

Siteye gitmek için tıklayın.


CSS ile seçili Alanları Renklendirme

Sitemizdeki gibi seçili alanları varsayılan mavi rengin haricinde bir renk olarak kullanmak istiyorsanız css dosyanıza alttaki kodları ekleyin. Kodlar firefox 2+ ve operada çalışmaktadır ve hımbıl internet explorer desteklememektedir. :D

::-moz-selection {
background:#c00;
color:#fff;
}
::selection {
background:#c00;
color:#fff;
}


Max-Width Max-Height ie6 çözüm

max-width ve max-height css kodları bilindiği üzere ie 6′nın desteklediği bir özellik değil.Ama bu demek olmuyor ki ie6 da bu özelliği kullanamayacağız.Aşağıdaki css kodları sayesinde tüm tarayıcılarda bu özelliği çok rahat kullanabilirsiniz.

max-width için ie6 uyumlu css kodu;

değiskeniniz {
   width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* ie için gerekli css kodu */
   min-width: 333px; /* tüm diğer standart tarayıcılar için varsayılan kod */
}

değiskeniniz {
   height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* ie için gerekli css kodu */
   max-height: 333px;  /* tüm diğer standart tarayıcılar için varsayılan kod */
}

CSS ile Div Layerlar (tabaka – katman)

CSS diliyle aynen photoshoptaki gibi katmanlar oluşturup bunları istediğimiz  gibi kulalabiliriz.CSS sana aşığım demeden kendimi alamıyorum çünkü bu dil cidden bir harika :D hadi örneğimizi görelim :)

Üstteki Katman:

katman 1
katman 2

Kodumuzu görecek olursak ;
<div style="position: relative; font-size: 50px; z-index: 2;">katman 1</div>
<div style="position: relative; top: -50px; left: 5px; color: red; font-size: 80px; z-index: 1;">katman 2</div></td>
</tr>

Burada benim css kodlarıyla çakıştığı için bir türlü düzgün gösteremedim, ama size lazım olan kodlar yukarda istediğiniz gibi düzenleyebilirsiniz…..


firefox | Valid XHTML | Valid CSS | feedburner | Rüzgarın önündeki yaprak gibi davranma. Çünkü rüzgar sensin...

Bilgisayar