Dentasarım
Popüler tasarımlar

DENTASARIM | Tasarımın bizden!

Div kutularını yan yana koymak

Merhaba arkadaşlar, bugün ki dersimizde bazı arkadaşların soruları oluyor videolu gerek duymadım çok basit bir konu aslında. Bu divlerden oluşturduğumuz kutuları nasıl yan yana koyabiliriz vs. gibi sorularla karşılaşıyorum. O yüzden bunu derse eklemeye karar verdim ve başlayalım...

Mesela div kutularımızın html kodunu yazalım...

<div id="denkutu">Dentasarım "div kutularını yan yana koymak" dersi</div>
<div id="denkutu1">Dentasarım kutu 1</div>
<div id="denkutu2">Dentasarım kutu gelicek 2</div>
 
Şimdi özellik (Css) bölümüne geliyoruz, herşeyi buradan yapıcağız...

#denkutu {
width: 200px;     /* Genişlik verdik.*/ 
height: 150px;    /* Yükseklik verdik.*/ 
float: left;    /* Kutularımızı yan yana koymaya yarayan özellik.*/
border: 1px solid #333;  /* Kenarlık ekledik.*/
background: green;  /* Belli olsun diye arkaplan rengi verdik.*/
}

#denkutu1 {
width: 200px;     /* Genişlik verdik.*/ 
height: 150px;    /* Yükseklik verdik.*/ 
float: left;    /* Kutularımızı yan yana koymaya yarayan özellik.*/
border: 1px solid #333;  /* Kenarlık ekledik.*/
background: yellow;  /* Belli olsun diye arkaplan rengi verdik.*/
}

#denkutu2 {
width: 200px;     /* Genişlik verdik.*/ 
height: 150px;    /* Yükseklik verdik.*/ 
float: left;    /* Kutularımızı yan yana koymaya yarayan özellik.*/
border: 1px solid #333;  /* Kenarlık ekledik.*/
background: red;  /* Belli olsun diye arkaplan rengi verdik.*/
}

Özelllik /css/ yazılarımızıda yazdık ve böylelikle dersimizin sonuna geldik, bu çok basit bir olaydır, fakat sorular çok olunca bende paylaşma gereği duydum. Bir sonraki dersimizde görüşürüz...
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol