ercani bilisim » float http://ercani.com/bilisim Bir başka WordPress sitesi Fri, 26 Aug 2011 11:52:54 +0000 en hourly 1 http://wordpress.org/?v=3.3 css te elemanları konumlandırma( float,position,display) ve çerçeveler(devam) http://ercani.com/bilisim/css-te-elemanlari-konumlandirma-floatpositiondisplay-ve-cercevelerdevam.html http://ercani.com/bilisim/css-te-elemanlari-konumlandirma-floatpositiondisplay-ve-cercevelerdevam.html#comments Fri, 01 Aug 2008 22:06:01 +0000 ercani http://ercani.com/bilisim/?p=50 Evet yazımıza devam ediyoruz. Önceki yazıda bir elemanın nasıl kutu ürettiğini ve kutuların kendi arasında nasıl davrandığını gördük. Şimdiki konu css için oldukça önemli bir konudur.  çünkü kutuların kendi aralarında nasıl dizildiğini hangisinin öncelik kazanacağını bu konumuzda öğreneceğiz.
FLOAT: float özelliği kutuların kendi aralarındaki konumlamasını belirler.
genel değerleri;
left | right | none | inherit tir.
Örneğin bir paragrafımız olsun ve paragrafımızın içince bir resim olsun. Bu resim paragrafımızın içinde yüzer. O yüzden float a tanım olarak yüzen kutu konumlandırma özelliği denir.Resmimiz paragrafın içinde yüzerken onu nasıl konumlandıracağımıza bakalım.
örnek bir kod yazalım ve görelim;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″/>
<title>float tanımlama</title>
<style>
p img {
float: leftt;                         */ resmimizin paragrafa göre yeni konumu /*
margin: 15px;                  */ resmimizin paragrafa olan dış uzaklığı /*
}
</style>
</head>
<body>
<p><img src=”http://www.ercani.com/ercani_logo.gif” alt=”ercani logo” />burası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yok.</p>
</body>
</html>

bu kodun görünümü şu şekildedir.
float
gördüğünüz gibi resim paragrafın soluna dayandı.Paragraf ise akışına devam etti sanki resim yokmuş gibi.
anlıcağımız float tanımlanan bir eleman normal akıştan çıkar ve konumlandığımız yerde diğerlerine uymaksızın durur.
Peki 3 tane kutumuz olsun ve 3 kutumuzada float uygularsak ne olur? önce float uygulanmamış şekilde 3 kutu oluşturalım
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″/>
<title>float tanımlama</title>
<style>
#birinci {border:dashed thin #ff33ff;
margin: 5px;
width:150px  ;
}
#ikinci {border:dashed thin #ffd400;
margin: 5px;
width:150px ;
}
#ucuncu{border:dashed thin #000000;
margin: 5px;
width:150px; }
</style>
</head>
<body>
<div id=”birinci”>1. kutu</div>
<div id=”ikinci”>2. kutu</div>
<div id=”ucuncu”>3. kutu</div>

</body>
</html>
Bu kodun görünümü şu şekildedir.

kutu modeli
Ama burada aşağıdaki gibi 3 kutuyada  float eklersek birbirlerine göre konumlanacaklardır.
#birinci {border:dashed thin #ff33ff;
float: left;
margin: 5px;
width:150px  ;
}
#ikinci {border:dashed thin #ffd400;
margin: 5px;
width:150px ;
float:left}
#ucuncu{border:dashed thin #000000;
margin: 5px;
width:150px;
float: left; }

float tanımlama
Peki sadece 2. kutuya float:right versek ne olur. O zamanda ikinci sağa dayanır ve 1. kutu ile 3. kutu sıralamaya devam eder.
float tanımlama
sanırım float hakkında bir fikir oluştu kafamızda. Genel bir tekrar yapacak olursak Float kutuların sağa veya sola olan konumlarını belirler.

tablosuz web tasarımının önemli bir konusu daha CLEAR özelliği.
CLEAR: Clear özelligi ile float uygulanmıs elemandan sonraki elemanlara float etkisini durdurmamız mümkündür.Resim ve metin elemanları diger elemanlara göre floating eleman olarak tanımlanırlar.
aldığı değerler;none | left | right | both tur.
left degeri uygulandıgı elemanı floating elemanın bir alt soluna atar, right özelligi  saga atar, none özelligi elemanın baslangıç degerini geri döndürür ve both degeride iki floating elemanın asagısına atar.

örneğin yukarıdaki örnekte 3 kutuyada float uyguladığımızda ne oluyordu, 3 kutuda birbirinin yanına konumlanıyordu. işte ikinci kutuya biz clear:left uygularsak 2. kutu 1. kutunun altına konumlanacaktır.
#birinci {border:dashed thin #ff33ff;
float: left;
margin: 5px;
width:150px  ;
}
#ikinci {border:dashed thin #ffd400;
margin: 5px;
width:150px ;
float:left;
clear:left;}
#ucuncu{border:dashed thin #000000;
margin: 5px;
width:150px;
float: left; }
clear
burda 2. kutunun float etkisi alınmıştır. ve önceki float elemana göre yeri söylenmiştir.

evet css le kutu yönetimi genel olarak bu şekildedir.Son olarak kutuların birbirine göre 3 boyutlu olarak üstte alta kalmasını içeren Z-index özellği vardır. yani bir kutu diğerini kapatacak şekilde üstteyse, altta kalan elemanı üstteki kutunun üstüne çıkarabiliriz.bunuda başka bir yazımda vermek istiyorum

]]> http://ercani.com/bilisim/css-te-elemanlari-konumlandirma-floatpositiondisplay-ve-cercevelerdevam.html/feed 1 css te elemanları konumlandırma( float,position,display) ve çerçeveler http://ercani.com/bilisim/css-te-elemanlari-konumlandirma-floatpositiondisplay-ve-cerceveler.html http://ercani.com/bilisim/css-te-elemanlari-konumlandirma-floatpositiondisplay-ve-cerceveler.html#comments Sat, 26 Jul 2008 22:28:51 +0000 ercani http://ercani.com/bilisim/?p=33 CSS i anlamak ve ona hakim olmak için bilinmesi gereken bir konudur. Tablosuz bir web tasarımı, daha temiz kod, daha az sorun  ve daha kullanışlı bir web sitesi demektir. Bunu anlamak içinde çerçeve modelini bilmemiz gerekir. Her eleman aksi belirtilmediği sürece (display:none) bir çerçeve üretir.
Örneğin <p> elemanı aşağıdaki şekilde çerçeve üretir. Ve bu çerçeve modeline istersek müdahale edebiliriz.

Örnekte görüldüğü gibi bir eleman belirtilen değerlere göre bir çerçeve üretir. İşte bu çerçevenin bir içerikte yüzdürülmesi, konumlandırılması veya çerçeve türünü belirliyen nitelikler vardır.Onlara değinecez ama önce çerçevenin oyutları hakkında bilgi verelim.
Çerçevenin boyutlarını şunlar belirler;
width:Çerçevenin genişliği bu nitelik ile tanımlanır.. Eğer niteliğin değeri auto ise kullanıcı arayüzü bu genişliği kendisi belirler.
height:Çerçevenin yüksekliği bu nitelik ile tanımlanır. Eğer niteliğin değeri auto ise taşıyıcı bloğun yüksekliği belgenin içeriğine uygun olarak büyüyecektir.

Bir elemanın bu şekilde çerçeve (blok) üretmesinin nedeni display niteliğidir. Yani blok seviyesinde olmayan bir elemanı blok seviyesine getirmek için veya tam zıtdı olarak blok seviyesinden bir elemanın seviyesinin indirgemek için kullanılır.Örnek verecek olursak;

  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  2. <html>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″>
  5. <meta name=”Description” content=”deneme bir web sayfasıdır”>
  6. <title>——***deneme bir web sayfası***——–</title>
  7. <style type=”text/css”>
  8. <!–div{display:block;
    border:#00CC33 solid thin;
    width:75px;}
    p{display:block;
    border:#000000 double thin;
    width:75px;
    margin:1em;
    }
  9. –>
    </style>
    </head>
  10. <body>
  11. <div>
  12. <p>merhaba bu bir yazıdır. ve div elemanının içinde kalmıştır.</p></div>
  13. </body>
  14. </html>


bu kodlar aşağıdaki gibi yorumlanır.  Çünkü div elemanı p elemanını kapsıcak şekilde konumlandırılmıştır. Ve divdisplay:block denerek çerçeve eklenmiştir. elemanına

Şimdi display niteliğinin özelliklerini verelim.

block

Bu değer bir elemanın bir ilkesel blok çerçevesi üretmesine sebep olur.

inline

Bu değer bir elemanın , bir veya daha fazla sayıda satıriçi çerçeve üretmesine sebep olur.

list-item

Bu değer bir elemanın (HTML’deki <li> gibi) blog çerçevesi ve bir liste öğesi gibi satır içi blok çerçevesi üretmesine sebep olur.

none

Bu değer bir elemanın  hiçbir çerçeve üretmemesine sebep olur (yani, elemanın yerleşime hiçbir etkisi olmaz; başka bir deyişle, gösterilmez).

run-in

compact

Bu değerler bağlama göre bir blok veya satıriçi çerçeve üretirler. Nitelikler bu çerçevelere son durumlarına göre (satıriçi/blok seviyesinden) uygulanır

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell ve table-caption
Bu değerler bir elemanın tablo elemanı gibi davranmasına sebep olur.

Şimdi bir kaç özellik daha vererek devam etmek istiyorum.

satıriçi seviyeden elemanlar ve satır içi çerçeveler:
kaynak belgenin içeriğinde blok bulunmayan elemanlarıdır. örneğin bir parağrafımız olsun paragrafın belli cümleleri italik veya kalın yapılmak istenebilir. bunun için kullanılan kodlar çerçeve üretmez örmeğin;
<p>bir metin <strong>devam</strong></p> burada <strong> elemanı çerçeve üretmez. ama üretmesini istiyorsak diplay niteliğinin şu özelliklerini kullanabiliriz. inline, inline-table, compact ve run-in .
Anonim satıriçi çerçeveler
Kodumuz şöyle olsun 

<p>birşeyler <em>yazıyor</em> önemli değil.</p>
Burada em elemanı yukarıda bahsettiğim satıriçi elemanıdır. ve istenirse blok
seviyesine getirilebilir. Diğer cümleler "birşeyler" ve "önemli değil" anonim satıriçi
çerçevedir. Yani özelliklerini p elemanından alır. Çerçeve üretmezler.
Sanırım az çok bir elemanın nasıl çerçeve ürettiğini ve çerçevelerin nasıl
nitelendirildiğini anladık. Sıra geldi bu çerçevelerin birbiri içinde nasıl konumlan-
dırıldığına.
Css te üç çeşit konumlandırma vardır.
1.Normal akış (position:static , position:relative)
2.Float ve mutlak konumlar( position:absolute)
3.Bir nitelik tanımlanmadığı taktirde normal konum denen şekilde konumlanırlar.

Şimdi position niteliğine bir bakalım.
Position kutu modellerini konumlandırmaya yarar.
Position un öncelikle Aldıgı Degerler: static,relative,absolute,fixed,inherit dir.
Bu değer verildikten sonra kutunun yeri top,bottom,right ve left değerleriyle
belirlenir.
Göreceli Konumlandırma(position:relative):Bu nitelik atandağında kutu verilen top,left
right ve bottom niteliklerine göre konumlanır. örnek olarak;
p#deneme{position: relative; left: 10px; top: 10px; }  Burada p elemanı diğer kutulara göre soldan ve yukardan 10px kayar.
Mutlak(Absolute) Konumlandırma:
Bu konumlandırmada üstteki 1.kutu ve 3. kutu kaydırılan kutuyu yok sayıp konumlan-
malarına devam edeceklerdir. Yani relative değeri boşluk bırakır ve diğer kutular bu
boşluğa uyar ama absolute de bu söz konusu değildir. Kaydırılan kutu akıştan çıkar.
Sabit Konumlandırma (position:fixed):
Sabit konumlandırma aynen mutlak konumlandırmaya benzer. Farkı position:fixed diye
tanımlanan kutu akıştan çıkar ve orada sabitlenir. Yani kaydırma çubuğuyla biz aşağıya
insek bile kutu orada sabit kalır yukarı çıkmaz.(Bu özelliği IE6 desteklemiyor)
Float özellğinide diğer yazımda vermek istiyorum


]]> http://ercani.com/bilisim/css-te-elemanlari-konumlandirma-floatpositiondisplay-ve-cerceveler.html/feed 16