Önce PS'de yapıyorsun aynı tasarımı sonra üst kısmı başlık arkaplanı dahil kesiyorsun resmi ve mesela ornek .divUst gibi div acıp arkaplana kestiğin resmi atıyorsun.

Sonra tam ortadan 1px uzunluğunda soldan sağa arkaplan kesip onu da misal .divOrta gibi bir div acıp arkaplan yapıyorsun.

En alt kısım için de o yuvarlanmış köşeleri de bir kaç pixel uzunluğunda soldan sağa kesiyorsun .divAlt diye div açıp arkaplan yaparsın.

İçerik kısmına yani orta dive gelip içinde yeni divler oluşturacaksın (küçük kare işte). Gerisi süslemeye kalıyor font özellikleri, icon vs.

Bunları yaparken float, width, height, margin vs. kullanman gerekecek kullanacağını varsayıyorum

Hocam siz iyi niyetli olabilirsiniz saten mesajlarınızdan belli oluyor gibi ama öyle sömürücü haşereler varki adam 40 satırlık bir kod istiyor oturuyorum erinmeden yazıyorum sırf yardım olsun diye adam bir teşekkür bile etmiyor.

O yüzden arkadaşların sert çıkması bu konuda biraz normal.

Mantık ise şöyledir.

.aycan{width:400px; overflow:hidden; background: url(ooo turuncu resim) no-repeat; border:1px solid #renkkodun;}
.aycan ul {list-style:none;}
.... menu kodlarını buraada yazmıyorum http://www.aycan.net/blog/css/haydi-...ogrenelim.html buradan öğrenirsin ve içeride li'leri döndürdükten sonra istediğiniz görüntüye oluşursunuz
html kodları
<div class="aycan">
Başlık burası o resimin üzerine gelecek
<ul>
<li> resim kodu a tagı felan..</li>
<li> resim kodu a tagı felan..</li>
<li> resim kodu a tagı felan..</li>
<li> resim kodu a tagı felan..</li>
<li> resim kodu a tagı felan..</li>
<li> resim kodu a tagı felan..</li>
</ul>
</div>