Bu dersimizde css taşma konusuna bakacaz.Mesela bir yazımız yada positionla yerleştirdiğimiz bir obje taşıyosa bunlara işlem yapabiliyoruz.Öncelikle taşma için kullanacağımız kod overflow.Şimdi elimizde böyle taşan bir alan var.
1- hidden = Hidden ile gizleyebiliriz.
2-auto =Auto ile taşan alana scroll çıkarta biliriz.
3-scroll = Scroll ile hem yukarı hem aşağı direk scroll koyabiliriz.
overflow:hidden;
Hidden taşan kısmı gizledi.
overflow:auto;
Auto taşan kısma scroll çıkartı.
overflow:scroll;
Scroll ile taşsada taşmasada scroll gösterttik.
Şimdi tek taraflı overflow kullanmak isteyebiliriz.Yani sadece x veya y eksenleri için.Bunun için kodlarımız var.
1-overflow-x
2-overflow-y
1-Overflow-x
Yatay olarak taşanlar için işlem yaparız.Bunun da alabileceği paremetreler yukardaki ile aynı.
2-Overflow-y
Dikey taşmalar için işlem yaparız.Bunun da alabileceği paremetreler yukardaki ile aynı.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.kutu{width:200px;height:100px;background:#ddd;overflow:auto;}
.kutu2{width:200px;height:150px;background:#ddd;margin-top:25px;overflow-y:auto;overflow-x:hidden;}
</style>
</head>
<body>
<div class="kutu">
asdasdasdasdasdasddsdadasdsadasdasdasdsdasdasddasdasdasdasdasda
</div>
<div class="kutu2">
asdasdasdasdasdasddsdadasdsadasdasdasdsdasdasddasdasdasdasdasdasdfsdf
sdf<br />
sd <br />
fsd
f<br />
sdf
sd<br />
f
sdf
sdf<br />
sd
fsd<br />
f
sdf<br />
sd
f
sdf<br />
sd
fsd
f
</div>
</body>
</html>
1. kutuda taşan olursa scroll olsun dedik.
2. kutuda dikey taşarsa scroll yatay taşarsa gizle dedik.
Taşma yani overflow bu kadar.