CSS | Sütunlar Eklemek

Anasayfa » CSS » CSS | Sütunlar Eklemek

CSS | Sütunlar Eklemek

7 Nisan 2010 | Yazar: coders | Yorum Yok | 7 kez okundu

1- 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.

<html>

<head>

<link href="kolon.css" rel="stylesheet" type="text/css">

</link></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.

<html>

<head>

<link href="kolon.css" rel="stylesheet" type="text/css">

</link></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. Div tagına verilecek sitil etiketleri Div in “id” olayına yazılır.

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

2 – 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.

#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;

}

Sitil özellikleri

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.

Okan ATABAĞ

Facebok'ta Paylaş

Benzer Yazılar

Sponsor Olmak İstiyorum!

Etiketler: cod, code, coder, coders, CSS, CSS 2010, CSS 2011, CSS acilimi, CSS arabirimleri, CSS bilgileri, CSS coder, CSS dersleri, CSS eklentileri, CSS full, CSS görsel anlatim, CSS hakkında, CSS ile, CSS ile site yapma, CSS kodlari, CSS komutlari, CSS makaleleri, CSS nasıl yazılır, CSS olusturucu, CSS resimli anlatim, CSS sutunlar eklemek, CSS sutunlari, CSS sutunlari olusturma, CSS yazılımı, kod, kodlama, programci, programlama dilleri, Yazılımcı

Ahmet Ates

http://www.coders.gen.tr/ 25 yasindayim. Z.K.U Biyomedikal Cihaz Teknolojisi bölümünü okudum, Programlama dilleri arasindan ilgilendiğim ve profesyonel olarak hizmet verdiğim dil Fortran'dir. Web olarak Php,Css ve hazır sistemler olarak Wordpress ve Vbulletine hayranlık besliyorum.