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
Takip Et
Paylaş