Kare Menu

Kare menu, alt kare, reklam alanı vs… artık bunun ismine ne denir ne denmelidir bilmiyorum ama bu ismini tam koyamadığım pek çok arkadaşında defalarca sorduğu bu şeyi şimdi sizlere anlatmaya çalışacağım.

Her ne kadar adını tam koyamadığım desemde bu yazımda kare menu olarak adlandıracağım.

Bunu ilk olarak blogcudaki bloğumda kullanmıştım. O zamandan beri pek çok arkdaş nasıl yapabiliriz diye defalarca sormuştu. Bende yorum olarak nasıl yapılabileceğini anlattım. Bu kadar sorulan bir şeyi artık başlı başına bir yazı olarak yazmanın vakti çoktan geçtide biz şimdi yazıyoruz.

İşte kare menu için gereken css kodları

.kare {
float:left;
width:150px;
height:130px;
border:#eee 1px solid;
margin:2px 0 0 15px;
padding:1px 2px 1px;}

Şimdi gelelim bunları sayfaya yerleştirmeye.

<div class=”kare”>İçerik</div>

İçerik kısmına istediğinizi yazın ve bu kodu bloğunuzun genişliğine göre istediğiniz kadar tekrarlayabilirsiniz.

<div class=”kare”></div>

<div class=”kare”> </div>

<<div class=”kare”></div>

gibi. Ben 4 tane koymuşum. Genişlikler arttırılarak yada azaltılarak kare sayısı değiştirilebilir. İsterseniz bir kaç kat olarak uygulayın. Fakat dikkat uygulanması gereken bir nokta daha var. Herkesin teması farklı farklı olabilceğinden karelerin aşağı yukarı kayma duğumları olabilir bunu engellemek için css kodlarına

.clear {clear:both; margin:2px 0 2px;}

sayfdaki kodların başına ve sonuna

<div class=”clear”></div>

kodlarını eklemeliyiz. Son eklediklerimizle beraber kodlarımız şöyle oldu.

.kare {
float:left;
width:150px;
height:130px;
border:#eee 1px solid;
margin:2px 0 0 15px;
padding:1px 2px 1px;}

.clear {clear:both; margin:2px 0 2px;}

Sayfaya eklenen kodlar

<div class=”clear”></div>

<div class=”kare”>İçerik</div>

<div class=”clear”></div>

Bu kadar. Ama şimdi bu kare menu üzerinde biraz oynayıp daha janjanlı birşeyler yapalım.

Karelerin üzerinde gezinirken farenin üzerine geldiği kare diğerlerinden farklı olsun.

Bunun için css kodlarına

.kare:hover {border:#666666 1px solid;}

bunu ekliyoruz. Daha değişik biçimlere sokmak mümkün. Sizler için kendi yaptığım birkaç değişik sitili sunuyorum. Orada kullandığım kodları kağnağını görüntüleyerek ya da ikinci sayfadan ulaşabilirsiniz.