---
title: 'Becerilerinizi test edin: Taşma'
slug: Öğren/CSS/CSS_yapi_taslari/Overflow_Tasks
tags:
  - Acemi
  - Beginner
  - CSS
translation_of: Learn/CSS/Building_blocks/Overflow_Tasks
---
<div>{{LearnSidebar}}</div>

<div></div>

<p>Bu görevlerin amacı, CSS'deki taşma konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır.</p>

<div class="blockIndicator note">
<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p>

<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p>
</div>

<h2 id="Birinci_Görev">Birinci Görev</h2>

<p>Kutu sabit bir yüksekliğe sahip olduğu için içerik kutudan taşıyor. yüksekliği koruyun, ancak yalnızca taşmaya neden olacak kadar metin varsa kutunun kaydırma çubuklarına sahip olmasını sağlayın. Metnin bir kısmını HTML'den kaldırarak test edin, yalnızca kutunun sınırlarını aşmayacak uzunlukta içerik mevcut ise, kaydırma çubuklarının gizlenmesi gerekmektedir.</p>

<p><img alt="A small box with a border and a vertical scrollbar." src="https://mdn.mozillademos.org/files/17133/mdn-overflow1.png" style="height: 456px; width: 632px;"></p>

<p>Bitmiş örneği oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 800)}}</p>

<div class="blockIndicator note">
<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/overflow/overflow-scroll-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>

<h2 id="İkinci_Görev">İkinci Görev</h2>

<p>Bu görevde bir görüntü kutunun içindedir, kutunun boyutlarından daha büyük olduğunda gözle görülür bir şekilde taşar. Resmin, kutudan taşan kısımlarının görüntülenmecek şekilde gizlenmesini sağlayın.</p>

<p><img alt="A box with an image which fills the box but does not spill out the edges." src="https://mdn.mozillademos.org/files/17134/mdn-overflow2.png" style="height: 389px; width: 565px;"></p>

<p>Örneği resimde gösterildiği gibi yeniden oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1100)}}</p>

<div class="blockIndicator note">
<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/overflow/overflow-hidden-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>

<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2>

<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p>

<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p>

<ol>
 <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li>
 <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler:
  <ul>
   <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li>
   <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li>
   <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li>
   <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li>
  </ul>
 </li>
</ol>