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