Float Özelliği Kullanımı - Asp.NET Dersleri

Trang chủ » Html Float Kullanımı » Float Özelliği Kullanımı - Asp.NET Dersleri

Có thể bạn quan tâm

BtDersleri.com Dersler
  • Dersler
  • Üye Girişi Yapmalısınız!Favorilerim Üye Girişi Yapmalısınız!Favorilerim
  • İletişim
  • EN
  • Giriş Giriş
Float Özelliği Kullanımı

CSS Dersine Ait Diğer Konular:

  • CSS (Stil Şablonları) Nedir?
  • Yerel Stil Şablonları
  • Genel Stil Şablonları
  • Stil Şablonları-Seçiciler
  • Harici CSS Dosyası Kullanma
  • CSS Özellikleri
  • Css uzunluk birimleri
  • Css ile Linkleri Biçimlendirme
  • Css Width ve Height Özellikleri
  • Css Box Model (Kutu Modeli) Özellikleri
  • Div Elemanı - Kutuları Ortalama
  • Display Özelliği
  • Tablosuz Tasarım ve Div Elemanı
  • Float Özelliği Kullanımı
  • İnline-Block Özelliği
  • CSS Konumlandırma (Position Özelliği)
  • Kutu-Nesneleri Üst Üste Yerleştirme
  • CSS'de Liste Özellikleri
  • Css ile Buton Görünümlü Linkler Hazırlama
  • CSS Dikey Menü Oluşturma
  • CSS Yatay Menü Oluşturma
  • CSS Dikey Açılır Menü Yapma
  • CSS Yatay Açılır Menü
  • CSS ile Alternate Row Oluşturma
  • CSS - first-child ve last-child Kullanımı
  • Html Elemanlarına Parametre Değerlerine Göre Farklı Stil Uygulama
  • CSS - ::after ve ::before Kullanımı
  • Yuvarlak köşeli tablo veya kutu oluşturma
  • Css ile İpucu Baloncuğu Yapımı (Tooltip)
  • CSS3 Metin Kaydırma
  • CSS3 ile Metni Sütunlara Bölme
  • CSS3 Metinlere Gölge Efekti Uygulama
  • CSS3 Box-Shadow Özelliği ile Kutulara Gölge Verme
  • CSS3 Outline Özelliği - Nesnelere İkinci Bir Kenarlık Uygulama
  • CSS3 Box-Sizing Özelliği ile Genişlik ve Yüksekliklerin Belirlenmesi
  • CSS3 Arkaplan Resmini Uzatma
  • CSS3 Çoklu Arkaplan Resmi Kullanma
  • CSS3 ile Arkaplan İçin Gradyan (Gradient) Oluşturma
  • CSS3 Transparent - Saydam Arkaplan Rengi Uygulama
  • Css ile Nesnelere Saydamlık Verme
  • CSS3 Resmi Kenarlık Olarak Kullanma - Border Image
  • CSS3 İki Boyutlu Dönüşümler - 2D Transform
  • CSS3 Geçiş Efekti Uygulama - Transition
  • CSS3 Animasyon Oluşturma
  • CSS ile Esnek (Responsive) Sayfa Tasarımı
  • Responsive Images - Ekrana Göre Genişleyen veya Daralan Resimler
  • Menü İkonu Yapımı
  • Responsive Menu - Esnek Üst Menü Yapımı
CSS Dersine Ait Diğer Konular Favorilere Eklemek İçin Üye Girişi Yapmalısınız! DMCA.com Protection Status

Div Kullanarak Sayfa Hazırlama

Önceki sayfamızda tablosuz tasarımın daha kullanışlı olduğundan ve div etiketinden bahsetmiştik.

Aşağıdaki gibi oluşturulan div etiketlerinin alt alta yerleşeceğini, bu elemanları yan yana getirebilmek için Css kullanmamız gerektiğinden bahsetmiştik.

<body>

<div id="anaKatman">

<div id="ustKatman">Başlık vb</div>

<div id="solKatman">Linklerimiz</div>

<div id="ortaKatman">İçerik 1</div>

<div id="sagKatman">İçerik 2</div>

<div id="altKatman">Alt Bilgi</div>

</div>

</body>

Yukarıdaki örnekte solKatman, ortaKatman ve sagKatman isimli kutuların yan yana yerleşmeleri istenmektedir. Bunun için bu üç kutuya

float: left;

özelliği uygulayabiliriz.

Float özelliği

Float özellği block türündeki html etiketlerinin yan yana yerleşmelerini sağlar.

Left ve right değerleri ile kutunun ekrandaki yeri belirlenebilir.

Left değeri verilerek kutunun bulunduğu yerde sola yaslanması, right değeri verilerek de sağ tarafa yaslanması sağlanabilir.

Yukarıdaki örnekte oluşturulan kutulara, aşağıdaki stilleri uygulayarak doğru biçimde yerleşmelerini sağlayabiliriz:

#anaKatman { margin:0 auto; } #solKatman { float:left } #ortaKatman { float:left } #sagKatman { float:right; }

.clear { clear:both; }

Dikkat Edilmesi Gerekenler:

Bu örnekte sagKatman için de float:Left kullanabiliriz. Üç katman da sırayla sola yaslanarak yerleşirler.

Float: right yapılarak sagKatman'ın o bölümde en sağa yaslanması sağlanmıştır.

Yan yana yerleştirilen div elemanlarının toplam kapladığı yer, ana katmanın width değerinden daha fazla olursa yan yana sığmayacaklardır. Bu durumda en sondaki div alta kayar ve yerleşim bozulur.

Divlerin toplam kapladığı yer hesaplanırken, margin, padding ve border değerleri de hesaplanmalıdır. (bkz Css Kutu Modeli)

Yan yana yerleşim sona erdiğinde boş bir div açılarak Clear:Both uygulanmalıdır.

Clear özelliği

Float özelliği kullanılarak kutuların yerleşimi ayarlanıp, belli bir yerden sonra yerleşimin normale dönmesini istediğimizde Clear özelliği kullanılır.

Bunun için yukarıdaki örnekte olduğu gibi, yan yana yerleşimin bittiği yere boş bir div etiketi açılır ve Clear:both özelliği uygulanır. Bu sayede float özelliğinin etkisi sona erer ve arkasından gelen kutular normal şekilde alt alta yerleşirler.

Clear: both özelliğinin tam olarak nerede uygulanacağı sıkça karıştırılmaktadır. Şöyle bir kural yazabiliriz:

Float uygulanan son div kapanır kapanmaz boş bir div açılmalı ve clear:both uygulanmalıdır.

Aşağıdaki örnekte float uygulanan son div sagKatman'dır. Bu nedenle sagKatman biter bitmez clear uygulanmıştır.

Aşağıdaki örnekte clear özelliği uygulanmış boş kutuyu kaldırırsak, altKatman'ın diğerlerinin üstüne kaydığını görürüz.

<body>

<div id="anaKatman">

<div id="ustKatman">Başlık vb</div>

<div id="solKatman">Linklerimiz</div>

<div id="ortaKatman">İçerik 1</div>

<div id="sagKatman">İçerik 2</div>

<div class="clear"></div>

<div id="altKatman">Alt Bilgi</div>

</div>

</body>

Tablosuz Tasarım ile İlgili Diğer Sayfalar:

1. Tablosuz Tasarım ve Div Elemanı

2. Float Özelliği ile Divleri Yan Yana Yerleştirme

3. Inline-Block Özelliği ile Divleri Yan Yana Yerleştirme

float özelliği kullanarak divleri yan yana yerleştirme getirme, li etiketlerini yan yana yerleştirme, clear both ne işe yarar, float özelliği nedir

KONU İLE İLGİLİ ÖRNEKLER

Div ile hazırlanmış web sayfası örneği Kendin Dene

Bu örnekte ard arda 9 div'e float: left uygulanarak yan yana yerleşmeleri sağlanmıştır.

Container isimli div toplam genişliği sınırlamakta ve yana sığmayan eleman alta geçerek devam etmektedir.

9. div'den sonra clear: both uygulanmıştır. Bu sayede yerleşim normale dönerek devam edecektir.

Float Özelliği ile Divleri Yan Yana Getirme Kendin Dene

div ile sayfa oluşturma

Kendin Dene butonuna tıklayarak örneğin kodlarına ulaşabilir ve değişiklikler yaparak sonucu görebilirsin.

YORUMLAR

20378 kez okundu.

Online Kullanıcı Sayısı 467

Web Programcılığı
×

CSS Dersine Ait Diğer Konular

  • CSS (Stil Şablonları) Nedir?
  • Yerel Stil Şablonları
  • Genel Stil Şablonları
  • Stil Şablonları-Seçiciler
  • Harici CSS Dosyası Kullanma
  • CSS Özellikleri
  • Css uzunluk birimleri
  • Css ile Linkleri Biçimlendirme
  • Css Width ve Height Özellikleri
  • Css Box Model (Kutu Modeli) Özellikleri
  • Div Elemanı - Kutuları Ortalama
  • Display Özelliği
  • Tablosuz Tasarım ve Div Elemanı
  • Float Özelliği Kullanımı
  • İnline-Block Özelliği
  • CSS Konumlandırma (Position Özelliği)
  • Kutu-Nesneleri Üst Üste Yerleştirme
  • CSS'de Liste Özellikleri
  • Css ile Buton Görünümlü Linkler Hazırlama
  • CSS Dikey Menü Oluşturma
  • CSS Yatay Menü Oluşturma
  • CSS Dikey Açılır Menü Yapma
  • CSS Yatay Açılır Menü
  • CSS ile Alternate Row Oluşturma
  • CSS - first-child ve last-child Kullanımı
  • Html Elemanlarına Parametre Değerlerine Göre Farklı Stil Uygulama
  • CSS - ::after ve ::before Kullanımı
  • Yuvarlak köşeli tablo veya kutu oluşturma
  • Css ile İpucu Baloncuğu Yapımı (Tooltip)
  • CSS3 Metin Kaydırma
  • CSS3 ile Metni Sütunlara Bölme
  • CSS3 Metinlere Gölge Efekti Uygulama
  • CSS3 Box-Shadow Özelliği ile Kutulara Gölge Verme
  • CSS3 Outline Özelliği - Nesnelere İkinci Bir Kenarlık Uygulama
  • CSS3 Box-Sizing Özelliği ile Genişlik ve Yüksekliklerin Belirlenmesi
  • CSS3 Arkaplan Resmini Uzatma
  • CSS3 Çoklu Arkaplan Resmi Kullanma
  • CSS3 ile Arkaplan İçin Gradyan (Gradient) Oluşturma
  • CSS3 Transparent - Saydam Arkaplan Rengi Uygulama
  • Css ile Nesnelere Saydamlık Verme
  • CSS3 Resmi Kenarlık Olarak Kullanma - Border Image
  • CSS3 İki Boyutlu Dönüşümler - 2D Transform
  • CSS3 Geçiş Efekti Uygulama - Transition
  • CSS3 Animasyon Oluşturma
  • CSS ile Esnek (Responsive) Sayfa Tasarımı
  • Responsive Images - Ekrana Göre Genişleyen veya Daralan Resimler
  • Menü İkonu Yapımı
  • Responsive Menu - Esnek Üst Menü Yapımı
Kapat Float-Özelliği-Kullanımı ×

Ders Seçiniz:

  • Robotik ve Kodlama
  • Python
  • Programlama Temelleri
  • C# Console
  • Nesne Tabanlı Programlama
  • Asp.NET
  • HTML
  • CSS
  • BootStrap
  • SEO
  • JavaScript
  • JQuery
  • SQL
  • Grafik ve Animasyon
  • İç Donanım Birimleri
  • Dış Donanım Birimleri
Kapat ×

Üye Girişi

Kullanıcı Adı Parola Beni Hatırla Üye olmak istiyorum. Kapat ×

Favori Konularınız:

Kapat

Từ khóa » Html Float Kullanımı