6.163 kez okundu

Dreamweaver da Div leri Yan Yana Sıralama

10 10 6.163 kez okundu incelendi

Öncelikle bu benim ilk dersim, yanlışlarım hatalarım varsa mazur görün. Yorumları okuyacağım.

Herkesin merak ettiği bir konu da Dreamweaver’da div’leri yan yana sıralamaktır. Bu derste bunun basit bir yöntemini ele alacağız.

Ben ilk başta yan yana sıralayacağım div’lerin dışına başka bir div eklemeyi tercih ettim ve içindeki bölmeleri yan yana sıraladım.

Evvela, 2 div açalım; birisi dıştaki div olan dis_bolme, diğeri de dış div’in içinde yer alan bölüm olan ic.bolme,

<style type="text/css">
#dis_bolme {
width: 500px;
height:250px;
background-color: #666
}
.ic_bolme{
float:left;
width:150px;
height:150px;
border:#CCC solid 1px;
background-color: #F00;
margin-right: 10px;
margin-left: 4px;
</style>

Bölmelerin arasında 2px lik boşluk olduğunun anlamına gelir.

margin-right: 2px;

Bu komutumuz ise bölmelerin soldan sağa doğru dizildiğini belirtir.

float:left;

Şimdi ise Div id lerimizi yazıyoruz.

<div id="dis_bolme">
<div class="ic_bolme">Bölme1</div>
<div class="ic_bolme">Bölme2</div>
<div class="ic_bolme">Bölme3</div>
</div>

Evet arkadaşlar görünüm böyle olacaktır;

http://resim.sanalkurs.net/uploads/divler.jpg

Div’lerinizi yukarıdan aşşağıya Dizmek istiyorsanız, Float seçeneği “none” yapmalısınız;

float:none;

Yaptığımız yan boşluk Margin “left” yerine “bottom” yaptık aşağılardan boşluk vermek için. İsterseniz Margin komutunu “Left” olarak da ayarlıyabilirsiniz.

margin-bottom: 4px;

Bu şekilde yaparsanız bölmelerin altından 4’er px lik boşluk olacaktır.
Görünüm şöyle olacaktır;

http://resim.sanalkurs.net/uploads/divler2.jpg

Gelen aramalar :

Paylaş !

Yoruma kapali.

Önceki yazıyı okuyun:
Dreamweaver da yazıların üzerine gelince değişen resim yapımı

Dreamweaver da yazıların üzerine gelince değişen resim yapımı

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter