İnline-Block Özelliği - Asp.NET Dersleri

Trang chủ » Html Display Block Nedir » İnline-Block Özelliği - 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ş
İnline-Block Özelliği

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

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

Önceki sayfamızda div ve li gibi etiketleri float kullanarak yerleştirmekten bahsetmiştik.

Bu konumuzda ise aynı işi float ve clear kullanmadan yapacağız.

Aşağıdaki gibi oluşturulan div etiketlerinin alt alta yerleşeceğ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

display: inline-block;

özelliği uygulayabiliriz.

Display özelliği inline-block yapılan elemanlar;

  • inline elemanlar gibi yan yana yerleşebilirler.
  • blok elemanlar gibi genişlik, yükseklik, margin vb değerler uygulanabilirler.

#solKatman, #ortaKatman, #sagKatman

{

display: inline-block; }

Görüldüğü gibi bu yöntemle divleri kolayca yan yana yerleştirmek mümkün. Ayrıca clear:both uygulanmış boş bir div kullanmamıza gerek kalmaz.

Ancak bu yöntemde de dikkat edilmesi gereken bazı noktalar var.

Dikkat Edilmesi Gerekenler:

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.

Yan yana gelen div elemanları arasına (artık satır içi eleman olduklarından) otomatikman bir boşluk bırakılacaktır. Bu da o divlerin hesapladığımızdan daha fazla yer kaplamasına ve kaymasına neden olacaktır. Bu durum farklı yöntemler ile aşılabilir. En kolayı kapanan div ile açılan div etiketi arasına hiç boşluk bırakmamaktır:

<div id="solKatman">

Linklerimiz

</div><div id="ortaKatman">

İçerik 1

</div><div id="sagKatman">

çerik 2</div>

Yukarıdaki gibi yazıldığında divler arasına boşluk konmayacak ve genişlik hesabımız doğru sonuç verecektir.

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

Bir başka sorun da yan yana yerleştirilen div elemanlarının içerikleri farklı olacak, bu durumda yükseklikleri de farklı olacaktır. İşte o zaman ortaya çıkan dikey hizalama problemini vertical-align kullanarak aşabiliriz.

#solKatman, #ortaKatman, #sagKatman

{ display: inline-block;

vertical-align: top; }

Vertical-align özelliğine top değeri verildiğinde kutular üst noktalarına göre hizalanır. Bottom değeri alt noktalarına, middle değeri ise orta noktalarına göre hizalanmalarını sağlar.

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

inline-block divler alta kayıyor, genişlik fazla geliyor ve sığmıyor, inline block boşluk problemi, inline block kullanarak divleri li etiketlerini yan yana yerleştirme

KONU İLE İLGİLİ ÖRNEKLER

Inline-block özelliği ile divleri yan yana yerleştirme 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

13000 kez okundu.

Online Kullanıcı Sayısı 482

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 İnline-Block-Özelliği ×

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 Display Block Nedir