• 02-10-2013, 23:26:56
    #1
    Merhaba

    Menü adlı class'ın özelliği olan arkaplan rengi, li'ye left verince divi kaplamıyor.

    Bu sorunu nasıl çözebilirim? Nerede hata yapıyorum acaba?



    Css
    .ust { height: auto; margin:0 auto 9px auto; }
    .menu { background-color:#08c1ff; }
    .menu ul { padding: 0 0 0 10px; }
    .menu ul li { list-style:none; float:left; margin-right: 5px;  }
    .menu ul li:last-child { clear: right; }
    .menu ul li a { display:block; height:37px; line-height:37px; padding:2px 15px 2px 15px; text-decoration:none!important; color:#fff; font-size:16px; background-color: #0bc7ff; }
    .menu ul li a:hover { color:#FFF; background:#00acdf; }
    .menu ul li a:visited { color: #fff; text-decoration: none; }
    html
    <div class="ust">
        <div class="menu">
            <ul> 
                <li><a href="/">Test</a></li>
                <li><a href="/">Anasayfa</a></li>
            </ul>   
        </div>
        <div class="clear"></div>
    </div>
  • 08-10-2013, 16:01:39
    #2
    .menu klasına float özelliği eklediğiniz taktirde sorununuz çözülecektir.
  • 08-10-2013, 21:09:52
    #3
    li normal şartlarda list-style: none; verildiğinde sola hizalı olarak sıralama yapar. float vermenize gerek yoktur.
  • 10-10-2013, 10:01:47
    #4
    Sorun sağa, sola yaslanmasıyla ilgili değil. Ayrıca belirttiğiniz kodda list-style-type li'ye değil ul'a verilir o da sadece unordered list'in ne şekilde sıralacanacağını söyler. (Geniş liste için) Yani yine yan yana listeleme yapmak için belirteceğiniz list itemlere (li) float özelliği eklemelisiniz.

    Arkadaşın bahsettiği problem, kapsama sorunu ve sanırım yaptığı sitede yükseklik problemi yaşıyor. Dediğim gibi menü klasına float özelliği vererek bu sorundan kurtulabilir.

    http://codepen.io/anon/pen/buznm

    Yukarıdaki örnekte belirttiğim /* float:left; */ özelliğini aktif ederseniz kırmızı border içine aldığım kısmı fark edeceksiniz.
  • 10-10-2013, 11:33:08
    #5
    .clear div'ini .menu içine alırsan sorun düzelir hocam