Bir önceki mesajımda oval köşeli kenar hatlarına sahip div kalıplarını nasıl kolayca yapabileceğimizi açıklamıştım. Çalıştığım bir projede bu oval köşeleri kullanarak span elementi yardımıyla madde elementlerini (ul) biçimlendirmek istedim. Görsel açıdan hoş olduğundan sizinle paylaşıyorum ve aşama aşama nasıl yapıldığını anlatacağım. Geçtiğimiz mesajımda bahsettiğim fix.htc eklentisini öncelikle çalışacağımız dizine koyarak işe başlayalım. İlk Önce listeleme yapacağımız kodumuzu yazalım daha sonrasında stil kodlarını yazacağız.

Madde Listeleme

<ul>
   <li>
      <span>1.</span>emrah karaalan
   </li>
   <li>
      <span>2.</span>madde imi denemesi
   </li>
   <li>
      <span>3.</span>trabzonspor
   </li>
</ul>

Listeleme yapacağımız kodumuzu yazdıktan sonra css kodumuzu yacacağız fakat kodu yazarken listelemede kullandığımız span tagına bazı müdahalelerde bulunacağımızdan satıriçi olan elemanımızı block konumuna almalıyız. Haliyle display:block tanımlaması yeterli olacaktır bizim için.

Stil kodumuz

ul { list-style:none; }
ul li { margin:15px; }
ul li span {
	float:left;
	display:block;
	margin-right:10px;
	width:28px;
	height:25px;
	background:#0d5c8e;
	color:#fff;
	font:bold 15px/25px arial;
	text-align:center;
	border-radius:28px; -moz-border-radius:28px; -webkit-border-radius:28px;
	behavior:url(fix.htc);
}

Eğer herşeyi anlattığım gibi yapmış iseniz aşağıdaki gibi bir görüntüye ulaşmış olmanız gerekmektedir.

Yazmış olduğum bu çalışma İnternet Explorer dahil tüm tarayıcılarda sorunsuz çalışmaktadır, Test Edilmiştir.