Birkaç Enteresan CSS Sorunu

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    nickalti
    Lightsaber
    Lightsaber's avatar
    Kayıt Tarihi: 29/Ağustos/2012
    Erkek

    Merhaba hocalar, css ile menü yapıyorum 1.sorunum sayfadaki linklerin çalışmaması hiçbiri link gibi davranmıyor üstüne gelince mouse değişmiyor mesela, aynı zamanda li:hover olayı çalışmıyor.

    Diğer mesele ise nav elementinin genişliği %100 olmasına rağmen sağdan ve soldan marginliymiş gibi duruyor altına border verdiğimde sayfayı sağdan sola kaplamıyor da boşluklar kalıyor.

     

    İlginç bir nokta ise bu linkler ve li:hover ile alakalı sorunumda en başta nav'ın içine -ama

      etiketinin içersie değil- herhangibir link ekleyince diğerleri de düzeliyordu. Sonra sorunu düzeltmek namına ul.anamenu'ye overflow:hidden; dedim linkler de normalleşti, li:hover da çalıştı fakat kodu düzenlerken overflow:hidden ı silip tekrar yazdım ve aynı sorun yine oluştu. İlk defa böyle bir şeyle karşılaşıyorum.

    Kodlar:

    < ="text/" ="@.">
    < ="text/" ="@.">
    Index

     


    İnsan; insan olsaydı,insan olmazdı..
  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Retro
    by_Tet
    by_Tet's avatar
    Kayıt Tarihi: 22/Mayıs/2012
    Erkek

    Kodlar cortmuş kamki


    iyibu! yeniden..
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Zfr321
    Zfr321's avatar
    Kayıt Tarihi: 27/Şubat/2011
    Erkek

    Yardımcı olmak isterdim ama hiç bir şey anlamadım.

    Linklerin çalışmamasının sebebi üzerine bir div gelmiş olabilir kanımca bir hata yapmış ve dizileşte sorun yaşamış olabilirsin. Bu arada örnekte %100 yazmışsın kodlamada %'de işareti sayınını sonuna gelmelidir. float:left; width:100% yaparsan ekranı tam olarak kaplayacaktır.

  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    nickalti
    Lightsaber
    Lightsaber's avatar
    Kayıt Tarihi: 29/Ağustos/2012
    Erkek

    Kodlar niye öyle oldu ki ya :)

    <html>
        <head>
            <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
            <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=latin-ext' rel='stylesheet' type='text/css'>
            <script src="@Url.Content("~/Scripts/jquery-2.1.0.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
            <title>Index</title>
            <style>
                 header {
                     width: 100%;
                     height: auto;
                     padding: 0;
                     background-color: #26272b;
                 }
                nav {
                    float: left;
                    margin: 0 auto;
                    padding: 0;
                    border-bottom: 1px solid #555;
                    width: 100%;
                    height: auto;
                }
                ul.anamenu {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    position: relative;
                }
                ul.anamenu li {
                    display: inline;
                    padding: 1em;
                    text-align: center;
                }
                ul.anamenu li a {
                    font-size: 1.063em;
                    font-family: Ubuntu;
                    color: #FFF;
                }
                ul.anamenu li:hover {
                    background-color: rgba(0,0,0,0.1);
                }
            </style>
        </head>
    <body>
        <div id="container">
            <header class="col-md-12">
                <nav>
                    <ul class="anamenu">
                        <li class="col-md-1 col-md-offset-1"><a href="/Global.asax">Anasayfa</a></li>
                        <li class="col-md-1"><a href="#">Hakkımızda</a></li>
                        <li class="col-md-1"><a href="#">İletişim</a></li>
                    </ul>
                </nav>
    ...

    İnsan; insan olsaydı,insan olmazdı..
  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Subtitle
    Subtitle's avatar
    Kayıt Tarihi: 15/Mayıs/2012
    Erkek

    Hocam padding'i li'ye değil de a'ya uygula.

     

    Ayrıca bootstrap'ta container kullandığın için nav {width: 100%} olmasına rağmen browserın tüm genişliğini kaplamıyor.

    nav'ı <div class="container"> ... </div> 'in öncesine koyarak sorunu çözebilirsin.

    İşe yaradı mı onu da söylersen çok sevinirim.

    Subtitle tarafından 06/Ağu/14 21:50 tarihinde düzenlenmiştir
  6. KısayolKısayol reportŞikayet pmÖzel Mesaj
    nickalti
    Lightsaber
    Lightsaber's avatar
    Kayıt Tarihi: 29/Ağustos/2012
    Erkek
    Subtitle bunu yazdı

    Hocam padding'i li'ye değil de a'ya uygula.

     

    Ayrıca bootstrap'ta container kullandığın için nav {width: 100%} olmasına rağmen browserın tüm genişliğini kaplamıyor.

    nav'ı

    ...

    'in öncesine koyarak sorunu çözebilirsin.

    İşe yaradı mı onu da söylersen çok sevinirim.

    hocam paddingi özellikle li ye uyguladım ona göre gözükmesini istiyorum ki a ya uygulayınca da bir şey değişmedi.

    .container classına da şimdi width 100% margin padding 0 atadım ama yine de aynı


    İnsan; insan olsaydı,insan olmazdı..
  7. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Subtitle
    Subtitle's avatar
    Kayıt Tarihi: 15/Mayıs/2012
    Erkek
    Lightsaber bunu yazdı
    Subtitle bunu yazdı

    Hocam padding'i li'ye değil de a'ya uygula.

     

    Ayrıca bootstrap'ta container kullandığın için nav {width: 100%} olmasına rağmen browserın tüm genişliğini kaplamıyor.

    nav'ı

    ...

    'in öncesine koyarak sorunu çözebilirsin.

    İşe yaradı mı onu da söylersen çok sevinirim.

    hocam paddingi özellikle li ye uyguladım ona göre gözükmesini istiyorum ki a ya uygulayınca da bir şey değişmedi.

    .container classına da şimdi width 100% margin padding 0 atadım ama yine de aynı

    Padding dediğim kısmı yanlış anlamışım pardon.

    hocam nav'ı container'ın dışına al. hoverla ilgili sorunu anlayamadım. 

  8. KısayolKısayol reportŞikayet pmÖzel Mesaj
    nickalti
    Lightsaber
    Lightsaber's avatar
    Kayıt Tarihi: 29/Ağustos/2012
    Erkek
    Subtitle bunu yazdı
    Lightsaber bunu yazdı
    Subtitle bunu yazdı

    Hocam padding'i li'ye değil de a'ya uygula.

     

    Ayrıca bootstrap'ta container kullandığın için nav {width: 100%} olmasına rağmen browserın tüm genişliğini kaplamıyor.

    nav'ı

    ...

    'in öncesine koyarak sorunu çözebilirsin.

    İşe yaradı mı onu da söylersen çok sevinirim.

    hocam paddingi özellikle li ye uyguladım ona göre gözükmesini istiyorum ki a ya uygulayınca da bir şey değişmedi.

    .container classına da şimdi width 100% margin padding 0 atadım ama yine de aynı

    Padding dediğim kısmı yanlış anlamışım pardon.

    hocam nav'ı container'ın dışına al. hoverla ilgili sorunu anlayamadım. 

    hocam hem linkler hem de li:hover çalışmıyor.

    tüm headerı containerın dışına aldım yine de yaramadı


    İnsan; insan olsaydı,insan olmazdı..
  9. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Retro
    by_Tet
    by_Tet's avatar
    Kayıt Tarihi: 22/Mayıs/2012
    Erkek

    Jsfiddle kullanalım kullanmayanları uyaralım :)


    iyibu! yeniden..
  10. KısayolKısayol reportŞikayet pmÖzel Mesaj
    nickalti
    Lightsaber
    Lightsaber's avatar
    Kayıt Tarihi: 29/Ağustos/2012
    Erkek
    by_Tet bunu yazdı

    Jsfiddle kullanalım kullanmayanları uyaralım :)

    hocam şu jsfiddle da görünümü ben de olan gibi yapmayı bi türlü başaramadığımdan yanaşamıyorum pek :)


    İnsan; insan olsaydı,insan olmazdı..
  11. KısayolKısayol reportŞikayet pmÖzel Mesaj
    nickalti
    Lightsaber
    Lightsaber's avatar
    Kayıt Tarihi: 29/Ağustos/2012
    Erkek

    upp


    İnsan; insan olsaydı,insan olmazdı..
Toplam Hit: 2338 Toplam Mesaj: 24