HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
css taşma engelleme
css yazı taşması
css overflow nedir
css overflow style
css overflow div
css overflow examples
css overflow kullanımı
css overflow element
css element overflow visible
overflow visible in css
css div overflow visible
css overflow
css overflow hidden div
css overflow hidden example
css overflow hidden nedir
css overflow scroll style
css overflow scroll alternative
css overflow scroll div
css overflow scroll example
css overflow auto alternative
css overflow auto example
overflow auto in css
css overflow auto not working
css overflow x
css overflow x not working
css overflow-x
css overflow-x hidden and overflow-y visible
css overflow x scroll overflow y visible
css overflow x auto overflow y visible
css overflow-x affects overflow-y

CSS Overflow(Taşma)

CSS Overflow(Taşma)

Web sitenize yerleştirdiğiniz elemanların bulundukları alana sığamama durumları olabilir.Mesela yazdığınız bir paragraf çok uzun olmuştur ve ona ayırdığınız alana sığamaz ve dışarı taşar böylece kötü bir görüntü ile karşı karşıya kalırsınız. Bu özellik sayesinde taşan o paragrafı scrooll dediğimiz kaydırma çubuğu ile paragraf için ayırdığınız alan içerisinde kalarak sanki yazıların o taşan kısmı ilgili alana gömülmüşte siz de çıkarıyormuş gibi olursunuz. Bunu sadece paragraf için değil tüm belirlediğiniz alana sığamayan eleman ve eleman toplulukları için kullanabilirsiniz.

Kullanımı:

1-Overflow Visible(Taşma Görünür)

Web sitenizin elemanları varsayılan olarak taşma özelliği görünür olarak gelir. Bu özelliği ilgili elemanınızın boyutlarına göre bir webmaster olarak sizin değiştirmeniz gerekiyor. Değiştirmez iseniz ne olur onu bir inceleyelim.

Kullanımı:

Css
div.tasma {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
Html
<div class="tasma">Elemanlarınızı nereye hangi özellikler ile yerleştirdiğinize dikkat edin.Aksi halde düşünülerek yerleştirilmeyen bu elemanlar aynı bu örnekte olduğu gibi taşacaktır.</div>

2-Overflow Hidden(Taşma Gizleme)

Web sitenizin elemanları yerleştirdiğiniz yere taşabilir fakat sizde bu taşan kısmın üstünü örtebilirsiniz. Çok hoş olan bir yöntem değildir ama tabii ki böyle bir özellik koyulmuş ise mutlaka işe yaradığı durumlar vardır.

Kullanımı:

Css
div.tasma {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
Html
<div class="tasma">Elemanlarınızı nereye hangi özellikler ile yerleştirdiğinize dikkat edin.Aksi halde düşünülerek yerleştirilmeyen bu elemanları gizlemek zorunda kalabilirsiniz.</div>

3-Overflow Scroll(Taşma Kaydırma)

Web sitenizin taşan elemanları için bu özelliği kullanır iseniz taşan kısımlar kaydırma çubuğu sayesinde ilgili alanda gösterilecektir. Bu özellikle aynı zamanda işi garanti altına almış oluyorsunuz. Çünkü ilgili alana yerleştirdiğiniz eleman taşsın taşmasın o çubuk yada çubuklar aktif bir şekilde ilgili alanın kenarlarında görünecektir. Tabi bu durum çok profesyonelce değil çünkü ortaya çıkan görüntü hoş olmayacaktır. Biliyorum ne yapacağınızı şaşırdınız.

Kullanımı:

Css
div.tasma {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
Html
<div class="tasma">Elemanlarınızı nereye hangi özellikler ile yerleştirdiğinize dikkat edin.Eğer bu özelliği kullanırsanız sorun çıkmayacaktır ama oluşan görüntüyü beğenip beğenmemek siz ve ziyaretçilerinize kalmış.</div>

4-Overflow Auto(Taşma Otomatik)

Ne güzel otomatik dediğinizi duyar gibiyim :).Evet aslında düşündüğünüz gibi en kullanışlı olanı bu özellik diye düşünüyorum çünkü web site elemanınızın yerleştirdiğiniz yer ile elamanınızın boyutu uymadığı zaman otomatik olarak genişlemesine ve boylamasına nasıl gerekiyorsa otomatik olarak kaydırma çubuğunu ekleyecektir.Böylece kafanız rahat olacak fakat siz yinede önizlemelerinizi dikkatli yapın.

Kullanımı:

Css
div.tasma {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: auto;
}
Html
<div class="tasma">Elemanlarınızı nereye hangi özellikler ile yerleştirdiğinize dikkat edin.Eğer bu özelliği kullanırsanız sorun çıkmayacaktır ama siz yinede sürekli kontrolü elinizden bırakmayın.</div>

5-Overflow-x and Overflow-y(Yatayda ve Dikeyde Taşma)

Şimdi de yatayda ve dikeyde ayrı ayrı kontrol sağlıyacağız. En canlı örneği şuanki web sitemde gördüğünüz gibi sol tarafteki menüde dikeyde kaydırma çubuğu var iken yatayda kaydırma çubuğunun hoş durmadığı gerekçesi ile kaldırdım. Yani isterseniz bunu dikeyde kaydırma olmasın ama yatayda kaydırma olsun diye de ayarlayabilirsiniz elbette o sizin nerde kullanacağınıza bağlı. Hemen canlı örneğimizin yanında küçük de bir örnek verelim.

Kullanımı:

Css
div.tasma {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow-x: hidden;
overflow-y: scroll;
}
Html
<div class="tasma">Kullandığınız yere göre web sitesi elemanlarınızın bulunduğu konumlardaki alanı ister yatay ister dikey kaydırmaya açıp kapatabilirsiniz. Genel kullanımda yatayda kapalı dikeyde açık olur.</div>


Paylaş:

Enes KILIÇ
Webmaster