Birkaç Enteresan CSS Sorunu
-
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
... -
Kodlar cortmuş kamki
-
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.
-
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>
... -
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 -
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ı
-
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.
-
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ı
-
Jsfiddle kullanalım kullanmayanları uyaralım :)
-
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 :)
-
upp
