Web Geliştirme Eğitimi Dersleri, 007

FLOATING

• Elementlerin havada uçması anlamındadır!
• Parametre olarak : left | right | none değerlerini alır.
• Floating başladığı zaman, element IN-LINE duruma geçer!
• IE 6 için float eden elemetin display: inline; şeklinde ekstradan tanımlanması gerekir, aksi takdirde DOUBLE-MARGIN BUG oluşur.
• DOUBLE-MARGIN BUG margin bilgilerini etkiler. Sağdan yada soldan verilen margin kaç ise, out-put’da tam 2 katı margin halini alır.

1. /* DOUBLE-MARGIN BUG örnek ( Sadece IE6 ) */
2. #box
3. {
4.  float: left;
5.  margin-right: 10px; /* Çıktıda bu değer 20px olarak render edilir. */
6. }

1. /* DOUBLE-MARGIN BUG FIX ( Sadece IE6 ) */
2. #box
3. {
4.  float: left;
5.  margin-right: 10px;
6.  display: inline; /* Fix için */
7. }

• Float eden elementin içinde olduğu element’in overflow’u hidden olmalıdır. Aksi takdirde float eden element, içindi bulunduğu element’in üzerinde görünür!
• IE6’da, float eden elementin içinde olduğu element mutlaka width: değerine sahip olmalıdır.

1. #middle_area
2. {
3.  overflow: hidden;
4.  background-color: #ccc;
5. }
6. #left
7. {
8.  float: left;
9.  background-color: #ff0;
10. }
11. HTML
12. <div id="middle_area">
13.  <div id="left">
14.   <p>Bu Sol kutu!</p>
15.  </div>
16. </div>

Ya #middle_area’dan sonra bir div daha olsaydı?

1. #middle_area
2. {
3.  overflow: hidden;
4.  background-color: #ccc;
5. }
6. #left
7. {
8.  float: left;
9.  background-color: #ff0;
10. }
11. HTML
12. <div id="middle_area">
13.  <div id="left">
14.   <p>Bu Sol kutu!</p>
15.  </div>
16. </div>
17. <div>Bu div, teorik olarak <strong>clear: left</strong> yapmış gibidir!</div>

• IE6’da, float eden div, width: tanımı olmayan bir div içinde olduğu için floating devam eder, sonra gelen div yanlış render edilir!

Bazen bu durum canımızı çok sıkabilir. width: vermeden bazı şeyleri kolayca halletmek isterken, IE6 yüzünden, mecburen bu durumu çözmek için, dıştaki div’e ( bu örnekte #middle_area ) overflow: dışında ilave olarak width: de vermek durumunda kalırız.

1. #middle_area
2. {
3.  overflow: hidden;
4.  background-color: #ccc;
5.  width: 100%;
6. }
7. #left
8. {
9.  float: left;
10.  background-color: #ff0;
11. }

clear: left | right | both

Floating’i bitirmek için kullanılır. both hem left hem de right floatları bitirir.

1. #middle_area
2. {
3.  overflow: hidden;
4.  width: 100%;
5.  background-color: #ccc;
6.  padding: 10px;
7. }
8. #left
9. {
10.  float: left;
11.  background-color: #cc0;
12.  margin-right: 20px;
13. }
14. #right
15. {
16.  background: #ff0;
17. }

HTML

1. <div id="middle_area">
2.  <div id="left">
3.   <p>Bu Sol kutu!</p>
4.  </div>
5.  <div id="right">
6.   <p>Bu Sağ kutu!</p>
7.  </div>
8. </div>

Çözüm :

1. #middle_area
2. {
3.  overflow: hidden;
4.  width: 100%;
5.  background-color: #ccc;
6.  padding: 10px;
7. }
8. #left
9. {
10.  float: left;
11.  background-color: #cc0;
12.  margin-right: 20px;
13. }
14. #right
15. {
16.  background: #ff0;
17.  float: left; /* Fix */
18. }

clear: ile, öncesinde bulunan floating durumunu temizleriz!

display:

Bu komut ile BLOCK-LEVEL elementi IN-LINE haline getirebiliriz.

Elementleri show / hide ( göster / gizle ) yapabiliriz.

div’leri table gibi kullanabiliriz.

Herhangi bir elementi li ( list-item ) gibi kullanabiliriz.

Parametreleri

• inline
• block
• list-item
• run-in
• inline-block
• table
• inline-table
• table-row-group
• table-header-group
• table-footer-group
• table-row
• table-column-group
• table-column
• table-cell
• table-caption
• none

display: ve position: detayları bölüm 008’de...