1. Anasayfa
  2. Css

Css Dersleri – Css Div Kullanımı

Css Dersleri – Css Div Kullanımı
0

Css derslerimize Div kullanımı ile devam ediyoruz, ilk olarak div nedir açıklamaya çalışalım div sayfanın içinde içeriklerin gösterileceği alanlar oluşturur diyebiliriz, Div sayesinde sayfayı parçalara ayırabilir ve bu parçaları istediğiniz şekilde kullanabilirsiniz. Divleri istediğiniz gibi konumlandırma veya şekillendirebilmek için kullanılacak parametreleri sonraki yazılarda yeri geldikçe kullanacağız, şimdilik bu yazımızda div’in basit kullanımı ve divleri sıralama işlemini yapacağız. Divleri sıralamada bize Float etiketi yardımcı olacak Float kullanımını burada anlatmıştık, Daha Fazla uzatmadan uygulamalara geçelim

Sola Yaslı Div

soladiv

<html>
<head>
<title>www.bilisimogretmeni.com</title>
<style type="text/css">
body
{
color:white;
font-size:16px;
}
#kutu1
{
float: left;
background:red;
height: 300px;
width: 150px;
}
#kutu2
{float: left;
margin:auto;
background:blue;
height:200px;
width: 150px;
}
#kutu3
{float: left;
background:red;
height:100px;
width: 150px;
}
</style>
</head>
<body>
<div id="kutu1">WEB</div>
<div id="kutu2">TASARIM VE</div>
<div id="kutu3">PROGRAMLAMA</div>
</body>
</html>

Burada divleri sıralama işleminde float:left parametresi ile sola hizalama işlemini gerçekleştirdik.

Saga Yaslı Div

Yukarıdaki örneği tam tersi olacak şekilde sağa yaslı olarak yazmak için float:right parametresini kullanacağız ama divlerin yerini değiştirmeden kullanırsanız aşağıdaki gibi bir görüntü oluşur.
sagadiv
yani sadece float:right yazmak yeterli değil yapılması gereken divlerin sıralamasını da değiştirmek

<html>
<head>
<title>www.bilisimogretmeni.com</title>
<style type="text/css">
body
{
color:white;
font-size:16px;
}
#kutu1
{
float: right;
background:red;
height: 300px;
width: 150px;
}
#kutu2
{float: right;
margin:auto;
background:blue;
height:200px;
width: 150px;
}
#kutu3
{float: right;
background:red;
height:100px;
width: 150px;
}
</style>
</head>
<body>
<div id="kutu3">PROGRAMLAMA</div>
<div id="kutu2">TASARIM VE</div>
<div id="kutu1">WEB</div>
</body>
</html>

sagadivdogru

Div Ortalama

Oluşturduğunuz tasarımın sayfayı ortalaması veya hazırlanın div kutularının ortalı olması için yardımımıza koşan parametre margin:auto örnek olarak aşağıdaki kodları yazdınız

<html>
<head>
<title>www.bilisimogretmeni.com</title>
<style type="text/css">
#genel
{width:800px; 
}
#ust
{
height:75px;
background-color:#CCC;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
margin:0 0 5px 0;
line-height:75px;
}
#sol
{
height:350px;
width:100px;
background-color:yellow;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
float:left;
line-height:350px;
}
#orta
{
width:600px;
height:350px;
background-color:blue;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
float:left;
}
#sag
{
height:350px;
width:100px;
background-color:yellow;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
float:right;
}
#alt
{
clear:both;
height:75px;
background-color:#CCC;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
}
</style>
</head>
<body>
<div id="genel">
<div id="ust">Üst</div>
<div id="sol">Sol</div>
<div id="orta">Orta</div>
<div id="sag">Sağ</div>
<div id="alt">Alt</div>
</div>
</body>
</html>

ve ekran çıktımız aşağıdaki gibi
cssorta çözüm margin:auto kapsayıcı div’e yani bütün divleri kapsayan örneğimizde genel id’li div’e margin:auto ekliyoruz ve sonuç..
divorta
Evet şimdilik bu kadar bu sayfada divleri sola, sağa yaslama ve sayfayı ortalama işlemlerinden bahsettik şöyle bir kısa özet geçersek sola hizalama için float:left, sağa hizalama için float:right ve sayfayı ortalama için ise margin:auto parametrelerini kullanıyoruz. Bundan sonraki dersimizde biraz daha karışık div yapıları ile ilgili uygulamalar yapacağız.

Bu İçeriğe Tepkin Ne Oldu?
  • 3
    ba_ar_l_
    Başarılı
  • 0
    gayet_yi
    Gayet İyi
  • 0
    te_ekk_rler
    Teşekkürler
  • 1
    anlamad_m
    Anlamadım
  • 2
    yetersiz
    Yetersiz
İlginizi Çekebilir
Subscribe
Bildir
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Yorum
Inline Feedbacks
View all comments