Tüm web tasarımcılar gibi yeni ve heyecan verici bir teknoloji olarak her yanda adından bahsedilen ve TABLE’ın tahtını şiddetle sallayan DIV benim de ilgimi çekti. Fakat dar zamanlarda giriştiğim bir kaç deneme başarısızlıkla sonuçlandı ve acil yetişmesi gereken işler yüzünden geriye dönüp TABLE’ın kapısını çalmak zorunda kaldım.

Fakat bu konuda azimliydim ve Ramazan Bayramı tatilinde kendimi DIV ve CSS’e adayıp önemli bir mesafe kaydetmeyi başardım. Aşmakta zorlandığım sorunlar karşıma çıkmış olsa da bu sefer daha geniş zamana sahip olmanın avantajıyla birçoğunun üstesinde gelebildim. İşte bu öğrenme sürecinde karşıma çıkanları DIV ve CSS kategorisindeki yazılarımda bulabilirsiniz.

DIV ve CSS konusunda elbette internette çok fazla kaynak bulmak mümkün ve ben de ilk başladığımda bunlardan faydalandım. Ancak yeni başlayanlar için en basit şekilde ve adım adım anlatan bir yere rastladığımı hatırlamıyorum. Bu yüzden ben en baştan ve adım adım anlatma yöntemini benimseyeceğim. DIV ve CSS kodlarını ve hangi kodun ne işe yaradığını açıklamalarıyla birlikte anlatmaya çalışacağım. Bu ilk yazı giriş niteliğinde olduğu için metin kısmı biraz uzun oldu. Ancak bundan sonraki yazılar daha bilgi yoğun olacaktır.

DOCTYPE SEÇİMİ

Öncelikle tarayıcımıza, HTML ve XHTML kodlarımızı hangi standartlara göre yorumlayacağının bilgisini vermemizde yarar var. Tarayıcıya bu bilgiyi DOCTYPE etiketi aracılığı ile veriyoruz. Kullanılmaması durumunda tarayıcı programları (Firefox, IE, Opera vs.) sayfamızı farklı şekillerde yorumlayabilir. Tarayıcıların farklı yorumlamasının sebebini biz kodlarımızda ararken aslında sorun hiç aklımıza gelmeyen DOCTYPE bilgisinin eksikliğinden kaynaklanıyor olabilir (Tecrübeyle sabittir).
DOCTYPE türleri arasından hangisini kullanacağınız size kalmış. Ancak tavsiye edilen -bence de son derece mantıklı olan- bizi daha hatasız kodlama yapmaya zorlayan Strict tipidir. Bu durumda sayfamızın ilk satırı şu şekilde olmalıdır.

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

CSS TİPLERİ

Bir sayfada CSS kullanmanın üç yöntemi vardır. Bazen tarayıcıların varsayılan CSS özellikleri de bu sınıfa dahi edilip bu sayı dörde çıkarılmaktadır. Bunların isimlendirilmesinde İngilizce kaynaklarda ve Türkçe çevirilerde tam bir standarda rastlamadığımı söylemeliyim. Ben bu isimleri aşağıdaki şekilde kullanmayı tercih ettim.

1. Varsayılan (Browser defaults): Hiçbir tanımlama yapmadığımızda tarayıcılar kendi öntanımlı stillerini sayfamıza uygulayacaktır.

2. Satıriçi (Inline): Her etiketin stil özellikleri doğrudan etiketin içinde tanımlanır.

1
<div style="float: left; margin: auto;">

3. İçsel (Internal): Her sayfada kullanılacak stiller head etiketi içinde listelenir.

1
2
3
4
5
<head>…
…
#ust    {background:#CCC;
height:100px;}
</head>

4. Dışsal (External): Tanımlamalar harici bir .css dosyası içinde yapılır ve kullanılacağı sayfa içerisinde bu dosya adreslenir. En çok tercih edilen yöntem budur.

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

Tercih edilmesi gereken yöntemin dördüncüsü olduğunu söylesek de kodları bir arada görebilmek için örneklerimizde üçüncü yöntemi kullanacağız.

İLK DIV ETİKETİMİZ

Öncelikle CSS olmadan DIV etiketinin tarayıcı tarafından nasıl yorumlandığına bir göz atalım. Bunun için en temel etiketleri içerin basit bir html sayfası oluşturalım. Web tasarımı ve kodlama konusunda Dreamweaver programını kullanmanızı tavsiye ederim.

1
2
3
4
5
6
7
8
<html>
<head>
<title>DIV ve CSS</title>
</head>
<body>
<div></div>
</body>
</html>

Bu kodları tarayıcımızda çalıştırdığımızda karşımıza hiçbir şey çıkmayacaktır. Ortaya birşeylerin çıkması için DIV etiketinin özellikleri STYLE aracılığı ile tanımlamalıyız.
Şimdilik sadece DIV’imizi görmemizi sağlayacak olan CSS özellikleriyle yetineceğiz. Zemin rengi ve yükseklik bunun için yeterli olacaktır. DIV’imize CSS içindeki hangi kısmı kullanacağını söylemeyi unutmamalıyız. Bunun için ID etiketini kullanıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>www.cinki.com</title>
<style type="text/css">
#ust  {    background:#CCC;
height:100px; }
</style>
</head>
<body>
<div id="ust"></div>
</body>
</html>

Bundan sonraki örnek kodlarda sadece style etiketinin içeriğini vereceğiz.
Şimdi ilk DIV’imizi, eklediğimiz her stil özelliği ile biraz daha şekillendireceğiz ve her yeni özelliğin bize neler sağladığını görmeye çalışacağız.

WIDTH (Genişlik)

Width özelliği DIV’imizin ve daha başka bir çok etiketin genişliğini belirleyen özelliktir. Genişlik değişik birimlerle ifade edilebilir. Biz px (pixel) kullanacağız.

1
2
3
#ust  {    background:#CCC;
height:100px;
width: 700px;}

FLOAT

Float özelliği DIV’imizin yerleşimi konusunda yetkilidir. Kullanmadığımızda DIV’imiz sola yaslı olarak görünecektir. Şimdi sağa yaslı ve ortalı olması durumlarını da görelim.

Sağa yaslı

1
2
3
4
#ust  {    float:right;
background:#CCC;
height:100px;
width: 700px;}

Ortalı

DIV’imizi ortalamak istediğimizde FLOAT tek başına yeterli olmayacak ve MARGIN özelliğine de ihtiyaç duyacağız.

MARGIN

MARGIN aslında, DIV’imizin etrafındaki diğer nesneleri kendisinden ne kadar uzağı iteceğini gösterir. Onlarla arasında kalacak mesafeyi belirler. Bu uzaklaştırma mesafelerini margin-top, margin-right, margin-bottom, margin-left şeklinde tek tek verebileceğimiz gibi tek bir magrin özelliği içinde aralarında boşluk bırakarak her kenar için tek seferde de verebiliriz. Bu durumda değerler üsten başlayarak saat yönünde ilerler ve sırayla tüm kenarların en yakın nesneyle arasındaki mesafeyi tanımlar (üst, sağ, alt, sol). Şimdilik bu özelliklerden bahsetmekle yetinip MARGIN özelliğini DIV’imizi ortalamak için nasıl kullandığımıza bakacağız.

1
2
3
4
5
#ust  {    float: none;
margin:auto;
background:#CCC;
height:100px;
width: 700px;}

Gördüğünüz gibi artık DIV’imizi ortalamayı başardık. Aslında CSS kodumuzdan FLOAT özelliğini tamamen kaldırsanız da MARGIN bu haliyle ortalama için yeterli olacaktır. Ancak şu anda tek DIV’le çalıştığımızı unutmayın. Bu yüzden FLOAT özelliği önemsiz gibi görünmesin.
Tam bu aşamada yazımızın başında bahsettiğimiz DOCTYPE’ın nasıl bir fonksiyonu olduğunu açıkça görebilmek için önce CSS’imizdeki FLOAT özelliğini silin sonra da dokümanımızdaki DOCTYPE satırını kaldırın. Şimdi IE’nin ve Firefox’un sayfamızı nasıl farklı şekilde yorumladığını görün.