Html Div Nedir Ve Nasıl Kullanılır ?

1152

Komple Uygulamalı Web Geliştirme Eğitimi

Css Div

Html div nedir ve nasıl kullanılır ? Div genişliği ve yüksekliği nasıl belirlenir? Css overflow özelliği nedir ?

Div, html sayfasında bir bölüm oluşturmak istediğimizde kullanılır.

** <div> etiketi block etikettir yani bir genişlik değeri (width) vermediğimiz sürece satırı olduğu gibi kaplar ve yükseklik olarakta içerisinde bulunan öğelerin sahip olduğu yükseklik kadar bir yüksekliğe sahip olurlar.

Örneğin; bir site tasarımını bölmelere ayıralım.

** En dışarıda bir container isminde div oluşturduk.

<div id="container"> <div id="header"> </div> <div id="content"> </div> </div>

** Bu container div' ini oluşturmaktaki maksat tüm içerikleri aynı anda ortak bir şekilde yönetmek.

#container { width: 600px; height: 300px; background-color: blue; } #header { width: 400px; height: 100px; background-color: red; } #content { width: 500px; height: 150px; background-color: green; }

** Div 'lere verdiğimiz genişlik değerleri px cinsinden olmak zorunda değildir. Yüzde olarak da değer verebiliriz. Örneğin tarayıcı genişliği o anda kaç ise <div>' in genişliğinin sayfanın %70'i kadar olmasını isteyebiliriz.

div { width:70%; }

** Eğer bir <div> için bir yükseklik değeri verirsek ve içinde bulunan elemanların yüksekliği div in yüksekliğini aşarsa bu durumda oluşacak overflow yani taşma için bazı seçeneklerimiz vardır.

overflow : auto | hidden | scroll | visible

** auto : eğer ki içeriklerin yüksekliği sabit değerli div in yüksekliğinden fazlaysa scrollbar çubukları yani dikey ve yatay kaydırma çubukları görünür hale gelecektir aksi halde görünmez.

** hidden : bu durumda taşma olan kısım görünmez hale getirilir.

** scrool : auto' nun aksine her zaman kaydırma çubukları görünür eğer taşma yoksa bile pasif bir şekilde kaydırma çubuklarını görebiliriz.

** visible : taşmalar görünür olur.

Kurs Sayfasına Git

Web Geliştirme

1. Bir Web Geliştiricinin Yol Haritası
2. Kursa Nasıl Çalışmalıyım
3. Temel Kavramlar
4. Frontend, Backend ve Full-Stack Web Geliştirici
5. Geliştirme Araçları

Html

1. İlk Html Sayfamız
2. Html Yapısı
3. Html Yapısına Uygun Web Sayfası
4. Uygulama Çalışması 1
5. Html Başlık Etiketleri
6. Html Paragraf Etiketi
7. Html Biçimlendirme Etiketleri
8. Uygulama Çalışması-2
9. Html Sırasız Listeler
10. Html Sıralı Listeler
11. Uygulama Çalışması-3
12. Html Resim Ekleme
13. Html Form Etiketleri
14. Uygulama Çalışması-4
15. Html Tablolar
16. Html Linkler
17. Html Div ve Span Etiketi
18. Html Semantik Etiketler
19. Html iFrame

Css

1. Css Nedir?
2. Css Söz Dizimi
3. Css Yazım Türleri
4. IDs & Classes
5. Css Selectors
6. Css Div
7. Css Renkler
8. Css Floating
9. Css Display
10. Css Positioning
11. Css Box Model
12. Css Margin
13. Css Padding
14. Css Borders
15. Css Box Sizing
16. Css Font Kullanımı
17. Css Icon Kullanımı
18. Css Text Biçimlendirme
19. Css Text Hizalama
20. Css Link Biçimlendirmesi
21. Css Liste Biçimlendirmesi

Bootstrap

1. Bootstrap Nedir?
2. Bootstrap Kurulumu
3. Bootstrap Grids
4. Bootstrap Typography
5. Bootstrap Text Align & Display
6. Bootstrap Floats & Positions
7. Bootstrap Colors
8. Bootstrap Tablolar
9. Bootstrap Resimler
10. Boostrap Jumbotron
11. Bootstrap Alerts
12. Bootstrap Buttons
13. Bootstrap Button Groups
14. Bootstrap Badges
15. Boostrap Progress Bars
16. Boostrap Pagination
17. Bootstrap List Group
18. Bootstrap Card
19. Bootstrap Dropdowns
20. Bootstrap Collapse
21. Bootstrap Navs
22. Bootstrap Navbar
23. Bootstrap Forms

Javascript

.Net Core

Paylaş