Soru & Cevap

menu deki overflow'un görevi?

04.09.2016 - 09:21
Page Title ul{list-style-type: none; background-color:yellow; } li{float:left; padding:14px 16px;}
  • AAAAA
  • BBBBB

Ben bu kodu çalıştırdığımda background-color görünmüyor ancak ul { overflow:hidden;} eklediğimde çalışıyor. Burada overflow:hidden taşmaları göstermeyecek anlımına geliyorken burada nasıl bir görevi var. Overflow'un tam olarak görevi burada nedir? Yardımlarınız için şimdiden teşekkür ederim.

65 Görüntülenme
Cevap Yaz

3 Cevap

Sitedeki sorulara cevap verebilmek için giriş yapın ya da üye olun.

picture-87289-1569234090.png
yakupgovler
29.09.2019 - 07:28

overflow css etiketi ile biçimlendirilen etikete eğer hidden değeri verilmişse bu şu işe yarıyor; etiket içerisinde etiketin sınırlarını aşan bir eleman varsa bunun taşan kısımlarını gizlemeye yarar. Örneğin bir divin genişliği 100px olsun, overflow:hidden olsun ve siz bu div'in içerisine 200px genişliğinde bir resim koyduğunuzda  normalde kaydırma çubuğu çıkar ama overflow ile resmin 100px'lik fazla olan kısmı gizlenir, böylece tasarımda sıkıntı olmasının önüne geçilmiş olur.

Yorum Yap
Profile picture for user doktorbune41
doktorbune41
05.09.2016 - 01:52

Hocam bunun sebebi padding değeri vermişssin ya 

li{ padding:14px 16px;}

Bu şu anlama geliyor.

  • 14px yukardan
  • 16px sağ ve soldan

Ama sen aynı zamanda float : left demişsin, hem list için padding hemde float çalışmıyor.Zaten float'ı sildiğin anda çalışıcaktır.

Yorum Yap
zvzvzvzvzvzvx
05.09.2016 - 02:09
float ile margin ve padding kullanılmıyor değil mi? Cevabın için teşekkür ederim.
Adım Soyadım
05.09.2016 - 06:39
Aynen kardeşim.Şimdi internettede baktım http://stackoverflow.com/questions/5013683/css-float-and-padding aynı şekilde çalışmıyor demişler.İyi çalışmalar.
picture-11052-1576825910.jpg
alikarakoc
05.09.2016 - 01:37

Merhaba Muhammet,

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        ul {
            list-style-type: none;
            background: yellow;
            display:flex;
        }

            ul li {
                padding: 14px 16px;
                float: left;
            }
    </style>
</head>

<body>
    <ul>
        <li>AAAAA</li>
        <li>BBBBB</li>
    </ul>
</body>
</html>

Kodlarını yukarıda ki şekilde yaparsan sorunun çözülür.

Eklenen kod : display:flex;

İyi çalışmalar.

Yorum Yap