Tweet

CSS | Sütunlar Eklemek

Adım1:Html Dosyasını Hazırlayalım
Bu dersde html sayfamızı kolonlar ile üçe böleceğiz. Öncelikle oluşturacağımız css dosyazını sayfamıza bağlayalım.

CODE:
<html>
<head>
<link href="kolon.css" rel="stylesheet" type="text/css">
</head>
<body>

</body>
</html>



html sayfamızı yukarıdaki şekilde hazırlayalım yukarıdaki kodun yaptığı iş kolon.css dosyasını
bularak html sayfamıza css dosyasında etiketlenmiş olan sitilleri yüklemektir. Şimdide Bu etiketleri kullanarak 3 adet div tagnı etiketleyelim.

CODE:
<html>
<head>
<link href="kolon.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="ortakol">Ortadaki Bilgiler</div>
<div id="solkol">Soldaki Bilgiler</div>
<div id="sagcol">Sağdaki Bilgiler</div>
</body>
</html>



Yukarıdaki kodda 3 div bloğu açarak etiketledik. <b>Div</b> tagına verilecek sitil etiketleri Div in <b>"id"</b> olayına yazılır.

Şimdide kolon.css dosyasını oluşturalım.

Adim2: Kolon.css dosyası
Kullandığımız text editör programında yeni bir css uzantılı dosua oluşturalım ve içerisine aşağıdaki blokları yazalım.

CODE:
#ortakol {
width: 60%;
margin: 0 20%;
font: 11px/16px verdana, arial, sans-serif;
text-align: center;
}

#solkol {
position: absolute;
background: #cef;
top: 5px;
left: 5px;
width: 18%;
font: 11px/16px verdana, arial, sans-serif;
}

#sagkol {
background: #cef;
position: absolute;
top: 5px;
right: 5px;
width: 18%;
float: right;
font: 11px/16px verdana, arial, sans-serif;
}



<b>Sitil özellikleri</b>

background: div tagına ait arkaplanı belirler.
position: konum özelliği belirler.
top: Sayfanın en üstü ile div in arasındaki mesafe.
right: Sayfanın en sağı ile div in aasındaki mesafe.
left: Sayfanın en solu ile div in aasındaki mesafe.
font: Div tag ının içerisinde geçerli olacak yazı özellikleri.


Dia
okanatabag@gmail.com
14 Nisan 2005 13:25

İlgili Olabilecek Makaleler


Yorumlar (0)




Ziyaretçi olarak yorum yazamazsınız. Üye olmak için tıklayın Üye iseniz giriş yapın.



MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg