Türkiye'de ilk Mobil & PC Aynı Anda Metin2 Oyna. Triarchonline kalıcı ve uzun ömürlü yapısı ile 24 Temmuz'da açılıyor. | 1-99 Mobil Metin2 Triarch HEMEN TIKLA!
CSS taşması, bir öğenin kutusuna sığmayan içeriğin nasıl işleneceğini kontrol eder. Kaydırma ve fazla içeriğin görünürlüğünü yönetir.
Taşan içerik gizlenebilir, kaydırılabilir veya gösterilebilir. Yaygın değerler: visible, hidden, scroll, auto.
Düzeni düzenli tutmak ve içerik çakışmasını önlemek için kullanılır.
Şimdi bunu bir örnek yardımıyla anlayalım:
Taşma: auto özelliği, içerik kutudan büyük olduğunda kaydırma çubuğu ekler.
Kutu, siyah kenarlıklı sabit genişlik ve yüksekliğe sahiptir.
Kutu içinde fazla metin kaydırılarak görüntülenebilir.
Sözdizimi:
Özellik Değerleri
Taşma özelliği aşağıdaki değerleri içerir:
visible: İçerik kırpılmaz ve öğe kutusunun dışında görüntülenir.
hidden: Taşma kırpılır ve fazla içerik görünmez.
scroll: Taşma kırpılır, ancak içeriği görmek için kaydırma çubuğu eklenir. Kaydırma çubuğu yatay veya dikey olabilir.
auto: Gerektiğinde otomatik olarak kaydırma çubuğu ekler.
overflow-x ve overflow-y: Taşmanın yatay (x) veya dikey (y) olarak nasıl kontrol edileceğini belirtir.
CSS Taşma Örnekleri
Örnek 1: Bu örnekte overflow: visible; değeri kullanılır.
Örnek 2: Bu örnekte overflow: scroll; özelliğini kullanıyoruz.
Örnek 3: Bu örnekte overflow: auto; özelliğiyiz.
CSS overflow kullanırken dikkat edilmesi gereken başlıca noktalar şunlardır:
Taşan içerik gizlenebilir, kaydırılabilir veya gösterilebilir. Yaygın değerler: visible, hidden, scroll, auto.
Düzeni düzenli tutmak ve içerik çakışmasını önlemek için kullanılır.
Şimdi bunu bir örnek yardımıyla anlayalım:
CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 40px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<!--Turkmmo Web Geliştirme CSS Eğitimi-->
<div>
Bu, CSS taşmasına bir örnektir. Kutunun içindeki içerik sığmayacak kadar uzun olduğunda, geri kalanını görmenizi sağlayan bir kaydırma çubuğu görünür.
</div>
</body>
</html>Taşma: auto özelliği, içerik kutudan büyük olduğunda kaydırma çubuğu ekler.
Kutu, siyah kenarlıklı sabit genişlik ve yüksekliğe sahiptir.
Kutu içinde fazla metin kaydırılarak görüntülenebilir.
Sözdizimi:
overflow: visible | hidden | scroll | auto;Özellik Değerleri
Taşma özelliği aşağıdaki değerleri içerir:
visible: İçerik kırpılmaz ve öğe kutusunun dışında görüntülenir.
hidden: Taşma kırpılır ve fazla içerik görünmez.
scroll: Taşma kırpılır, ancak içeriği görmek için kaydırma çubuğu eklenir. Kaydırma çubuğu yatay veya dikey olabilir.
auto: Gerektiğinde otomatik olarak kaydırma çubuğu ekler.
overflow-x ve overflow-y: Taşmanın yatay (x) veya dikey (y) olarak nasıl kontrol edileceğini belirtir.
CSS Taşma Örnekleri
Örnek 1: Bu örnekte overflow: visible; değeri kullanılır.
CSS:
<!DOCTYPE>
<html>
<!--Turkmmo Web Geliştirme CSS Eğitimi-->
<head>
<style>
p {
width: 100px;
height: 80px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>
TURKMMO
</h2>
<p>
CSS taşması, büyük içerikleri kontrol eder.
İçeriğin kırpılıp kırpılmayacağını veya kaydırma çubuklarının eklenip eklenmeyeceğini belirler.
</p>
</body>
</html>Örnek 2: Bu örnekte overflow: scroll; özelliğini kullanıyoruz.
CSS:
<!DOCTYPE>
<html>
<html>
<!--Turkmmo Web Geliştirme CSS Eğitimi-->
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: scroll;
}
</style>
</head>
<body>
<h2>
TURKMMO Web Geliştirme Css Eğitimi
</h2>
<p>
CSS taşması, büyük içerikleri kontrol eder.
İçeriğin kırpılıp kırpılmayacağını veya
kaydırma çubuklarının eklenip eklenmeyeceğini belirler.
</p>
</body>
</html>Örnek 3: Bu örnekte overflow: auto; özelliğiyiz.
CSS:
<!DOCTYPE>
<html>
<!--Turkmmo Web Geliştirme CSS Eğitimi-->
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: auto;
}
</style>
</head>
<body>
<h2>
Turkmmo Web Geliştirme CSS Eğitimi
</h2>
<p>
CSS taşması, büyük içerikleri kontrol eder.
İçeriğin kırpılıp kırpılmayacağını veya
kaydırma çubuklarının eklenip eklenmeyeceğini belirler.
</p>
</body>
</html>CSS overflow kullanırken dikkat edilmesi gereken başlıca noktalar şunlardır:
- Sabit yükseklik veya genişlik olmadan overflow etkisizdir.
Bir öğe boyutlandırılmamışsa taşma oluşmaz ve overflow davranışı görünmez. - scroll her zaman kaydırma çubuğu oluşturur.
İçerik sığsa bile çubuklar görünür; bu nedenle gereksiz kaydırma çubuğu oluşabilir. - auto en pratik seçenektir fakat düzen değişikliklerine yol açabilir.
İçerik arttığında kaydırma çubuğu belirdiği için tasarım kayabilir. - hidden içerik kaybına neden olabilir.
Mobilde veya küçük ekranlarda metnin kesilmesine dikkat edilmelidir. - overflow-x ve overflow-y farklı kombinasyonlar oluşturur.
Tek yönde kaydırma isteniyorsa diğer yönün doğru ayarlandığından emin olunmalıdır. - Scrollbars farklı tarayıcılarda farklı görünür.
Tasarım uyumsuzluklarını önlemek için çapraz tarayıcı test yapılmalıdır. - Pozisyonlandırma ile birlikte kullanıldığında davranış değişebilir.
absolute, fixed veya flex/container yapılarında overflow sonuçları farklılık gösterebilir. - Mobilde yatay overflow tasarımın kaymasına sebep olabilir.
Küçük bir genişleme bile tüm sayfanın yana kaymasına yol açabilir.
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
