1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: İçerik taşması
slug: Öğren/CSS/CSS_yapi_taslari/Overflowing_content
tags:
- Acemi
- Beginner
- Block Formatting Context
- CSS
- Data Loss
- Eğitim
- Learn
- Veri kaybı
- overflow
- taşma
translation_of: Learn/CSS/Building_blocks/Overflowing_content
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
<p>Bir kutuya sığmayacak kadar fazla içerik olduğunda taşma olur. Bu derste taşmanın ne olduğunu ve nasıl yönetilceğini öğreneceksin.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Ön koşullar:</th>
<td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td>
</tr>
<tr>
<th scope="row">Amaç:</th>
<td>Taşmayı ve onu nasıl yöneteceğini anlamak.</td>
</tr>
</tbody>
</table>
<h2 id="Taşma_nedir">Taşma nedir?</h2>
<p>CSS'deki her öğe bir kutudur. {{cssxref("width")}} ve {{cssxref("height")}} (veya {{cssxref("inline-size")}} ve {{cssxref("block-size")}}) değerleri atayarak bu kutuların boyutlarını ayarlayabiliriz. <strong>Eğer boyutlarını ayarladığımız kutunun içeriği, kutunun boyutları içerisine sığmaz ise içerik kutu dışına çıkar ve biz bunu taşma olarak adlanırırız.</strong> CSS, taşmayı yönetmek için çeşitli araçlar sağlar. CSS düzeninde ilerledikçe ve CSS yazdıkça, daha fazla taşma durumuyla karşılaşacaksın.</p>
<h2 id="CSS_veri_kaybını_önlemeye_çalışır">CSS, "veri kaybını" önlemeye çalışır</h2>
<p>Taşma olduğunda CSS'in varsayılan davranışını gösteren iki örneği ele alım.</p>
<p>İlk örnek, <code>height</code> niteliği kullanılarak kutunun uzunluğu kısaltılmıştır. Ardından ayrılan alanı aşan içerik ekliyoruz. İçerik kutunun dışına taşar ve aşağıdaki paragrafın üzerinde görüntülenir.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
<p>İkinci örnek, kutu içeriğinde bir kelime vardır ve kutu kelime için çok küçük olacak şekilde boyutlandırıldı. Bu yüzden metin kutunun dışına çıktı.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
<p>CSS'in neden bu kadar dağınık bir şekilde çalıştığını ve içeriği amaçlanan kapsayıcısının dışında görüntülediğini merak edebilirsin. neden taşan içeriği gizlemiyorsun? Neden kapsayıcının boyutunu tüm içeriğe uyacak şekilde ölçeklendirmiyorun?</p>
<p>Mümkün olan her yerde, CSS içeriği gizlemez. Bu, veri kaybına neden olur. Veri kaybıyla ilgili sorun, fark edemeyebilmendir. Web sitesi ziyaretçileri fark etmeyebilir. Bir formdaki gönder düğmesi kaybolursa ve kimse formu tamamlayamazsa, bu büyük bir sorun olabilir! Bunun yerine, CSS içeriğin sığmadığı durumlarda görünür bir şekilde taşar. Bir sorun olduğunu görme olasılığın daha yüksektir. En kötü ihtimalle, bir site ziyaretçisi içeriğin düzensizliğini size bildirecektir.</p>
<p>Bir kutuya <code>width</code> veya <code>height</code> ile sınırlarsan, CSS ne yaptığını bilmene güvenir. CSS, taşma potansiyelini yönettiğini varsayar. Genel olarak, kutu metin içerdiğinde blok boyutunu sınırlamak sorunludur. Siteyi tasarlarken beklediğinden daha fazla metin olabilir veya metin daha büyük olabilir. (Örn, kullanıcı yazı tipi boyutunu arttırabilir)</p>
<p>Sonraki iki konu, boyutlandırmayı taşmaya daha az eğilimli şekillerde kontrol etmeye yönelik farklı yaklaşımları açıklar. Bununla birlikte, sabit bir boyuta ihtiyacın varsa, taşmanın nasıl davranacağını da kontrol edebilirsin.</p>
<h2 id="Taşma_niteliği_overflow">Taşma niteliği: <code>overflow</code></h2>
<p>{{cssxref("overflow")}} niteliği bir öğenin taşma kontrolünün nasıl ele alınacağını belirler. Tarayıcıya nasıl davranması gerektiği konusunda talimat verme şeklimiz budur. Taşmanın varsayılan değeri <code>visible</code>'dir. Bu varsayılan ile içeriği taştığını da görebiliriz.</p>
<p>Taşan içeriği gizlemek için de ayarlayabilirsin; <code>overflow: hidden</code>. Bu tam olarak söylediği şeyi yapar: taşmayı gizler. Bunun bazı içerikleri görünmez hale getirebileceğine dikkat edin. Bunu yalnızca içeriği gizlemek soruna neden olmaz ise yapmalısın.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
<p>Bunun yerine, belki de içerik taştığında kaydırma çubukları eklemek istersen; <code>overflow: scroll</code>. Taşma için yeterli içerik olmasa bile, görünür kaydırma çubuklarına sahip tarayıcılar kullanıldığında, bunları her zaman görüntülenir. Bu, kutudaki içerik miktarına bağlı olarak kaydırma çubuklarının görünmesi/kaybolması yerine düzeni tatarlı tutma avantajını sunar.</p>
<p><strong>Aşağıdaki kutudan bazı içerikleri kaldırın. Kaydırmaya gerek olmasa bile kaydırma çubuklarının nasıl kaldığına dikkat edin.</strong></p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
<p>Yukarıdaki örnekte, sadece <code>y</code> ekseni için kaydırmamız gerekiyor, ancak her iki eksende de kaydırma çubukları görünüyor. Sadece <code>y</code> ekseninde kaydırma çubuğu olsun istiyorsak {{cssxref("overflow-y")}} niteliğini kullanmamız gerekiyor, tanımlama <code>overflow-y: scroll</code>.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
<p>{{cssxref("overflow-x")}} uzun kelimeleri barındırmak için önerilen bir yol olmasa da, bu nitelikle x ekseninde de kaydırabilirsin! Küçük bir kutuda uzun bir kelimen varsa, {{cssxref("word-break")}} veya {{cssxref("overflow-wrap")}} niteliklerini kullanmayı düşünebilirsin. Ek olarak, <a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğeleri boyutlandırma bölümünde</a> tartışılan yöntemlerden bazıları, değişken içerik miktarlarını daha iyi ölçeklendiren kutular oluşturmana yardımcı olabilir.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
<p><code>scroll</code>'da olduğu gibi, kaydırma çubuğuna neden olacak kadar içerik olup olmadığına bakılmaksızın kaydırma boyutunda bir kaydırma çubuğu elde edersin.</p>
<div class="blockIndicator note">
<p><strong>Not</strong>: <code>overflow</code> niteliği kullanılarak oluşturulan kuralda hem x, hemde y eksenleri için aynı özellikte kaydırma çubukları elde edersin. İki anahtar kelime kullanılırsa; örneğin, <code>overflow: scroll hidden</code>'nin açılımı: <code>overflow-x: scrool</code> ve <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">overflow-y: hidden</span></font> olacak şekilde yorumlanacaktır.</p>
</div>
<p>Kaydırma çubuklarının sadece kutuya sığamayacak kadar fazla içerik olduğunda görünmesini istiyorsan, <code>overflow:auto</code> kullanın. Bu, tarayıcının kaydırma çubuklarının görüntülenip görüntülenmemesinin gerekip gerekmediğini belirlemesini sağlar.</p>
<p><strong>Aşağıdaki örnekte, kutuya sığana kadar içeriği silin. Kaydırma çubuklarının kaybolduğunu görmelisin.</strong></p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
<div class="blockIndicator note">
<p><strong>Not:</strong> Kaydırma çubuklarının görünüp görüntülenmesi sadece CSS'in elinde değildir. Eğer işletim sisteminin sistem ayarlarında kaydırma(sarma) çubuklarının görüntülenme şekliyle ilgili bir ayar uygulamışsan; tarayıcın ilk önce bu sistem ayarını dikkate alacaktır.(örn. Mac OS X, "Sistem Tercihleri -> Genel -> Sarma çubuklarını göster" ayarı)</p>
</div>
<h2 id="Taşma_Blok_Biçimlendirme_Kapsamı_oluşturur">Taşma, Blok Biçimlendirme Kapsamı oluşturur</h2>
<p><code>scroll</code> veya <code>auto</code> gibi bir taşma değeri kullandığında, <strong>Blok Biçimlendirme Kapsamı(Block Formatting Context - BFC)</strong> oluşturursun. <code>overflow</code> olarak tanımladığın kutunun içeriği bağımsız bir düzen oluşturur. Kutunun dışındaki hiç bir içerik bu kutuyu çevreleyen düzenin içerisine giremez. Tutarlı bir kaydırma deneyimi oluşturmak için tüm kutu içeriğinin gösterilebilmesi ve başka öğelerle örtüşmemesi gerektiğinden bu kaydırma davranışını mümkün kılar.</p>
<h2 id="Web_tasarımında_istenmeyen_taşma">Web tasarımında istenmeyen taşma</h2>
<p>Modern yerleşim yöntemleri (<a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeninde</a> açıklanmıştır) taşmayı yönetir ve web sayfasında ne kadar içeriğin olacağı konusunda varsayımları veya bağımlılıkları olmadan çalışırlar.</p>
<p>Bu her zaman bir ölçüt olmamıştır. Geçmişte bazı siteler, kutuların tabanlarını hizalamak için sabit yükseklikte kutular inşa ediyordu. Bu kutuların birbirleriyle hiçbir ilişkisi olmayabiliyordu ve bu kırılgandı. Eski bir uygulamada, içeriğin sayfadaki diğer içeriği kapladığı bir durumla karşılaşabilirisin. Artık bunun taşma ile gerçekleştiğini anlayabilirsin. İdeal olarak, düzeni sabit yükseklikteki kutulara bağlı kalmayacak şekilde yeniden düzenlemen gerekir.</p>
<p>Bir site geliştirirken her zaman taşmayı aklında bulundurmalısın. Büyük ve az miktarda içeriğe sahip tasarımları test et. Metnin yazı tipi boyutlarını artır. Her zaman CSS'inin sağlam bir şekilde çalıştığından emin olmalısın. İçeriği gizlemek veya kaydırma çubukları eklemek için taşma değerinin değiştirilmesi, büyük olasılıkla birkaç belli kullanım durumu için illaki olacaktır.(Örn. Kaydırılmasına ihtiyaç duyduğun içeriğe sahip bir kutuda)</p>
<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2>
<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. bkz. <a href="/tr/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Becerilerini test edin: taşma</a>.</p>
<h2 id="Özet">Özet</h2>
<p>Bu derste taşma kavramını tanıttım. CSS'in Varsayılan davranışının, taşan içeriği görünmez hale getirmekten kaçındığını anlamalısın. Olası taşmayı yönetebileceğini ve ayrıca kazara sorunlu taşmaya neden olunmadığından emin olmak için tasarımını test etmen gerektiğini benimsemelisin.</p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
<h2 id="Bu_kısımda">Bu kısımda</h2>
<ol>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a>
<ul>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li>
</ul>
</li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li>
</ol>
|
