Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

Yatay açılır menü yaparken bir sorunla karşılaşıyorum

 8 Mesajlar 1.309 Okunma
lstbozum
tr.link

#1
Leadman Leadman WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğrenci
  • Konum Aydın
  • Ad Soyad F** U**
  • Mesajlar 73
  • Beğeniler 1 / 14
  • Ticaret 0, (%0)
Merhaba arkadaşlar, CSS öğrenmeye başladım ve bir yerde takıldım. Cevaplarsanız sevinirim.




.menu {
margin-left: 160px;
}

.menu ul li a {
margin-left: 10px;
font-family: 'Arimo', sans-serif;
font-size: 16px;
letter-spacing: 1px;
display: block;
height: 45px;
position: relative;
width: 120px;
list-style-type: none;
padding-top: 20px;
float: left;
background-color: #f7090e;
color: #FFF;
font-weight: bold;
text-decoration: none;
text-align: center;
line-height: 30px;
margin-right: 2px;
}

.menu ul li a:hover {
display: block;
height: 45px;
width: 120px;
padding-top: 20px;
float: left;
background-color: #900;
color: #FFF;
font-weight: bold;
text-decoration: none;
text-align: center;
line-height: 30px;
margin-right: 2px;
}
.menu ul li ul {
display: none;
position: absolute;
left: 0px;
top: 30px;
}
.menu ul li:hover ul {
display: block;
}







Kodlar bu şekilde fakat menünü üstüne gelince alta değil sola açıyor.


http://i.hizliresim.com/kLMBo9.png

Nerede hata yapıyorum sizce?
 

 

wmaraci
reklam

#2
sosyalmedya sosyalmedya Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 18.07.2012
  • Yaş/Cinsiyet 37 / E
  • Meslek Front End Developer
  • Konum İstanbul Avrupa
  • Ad Soyad S** A**
  • Mesajlar 219
  • Beğeniler 28 / 66
  • Ticaret 0, (%0)
alt menuye absolute özelliği vermişsiniz.Üst menu ye relative vermeyince dolaylı olarak ekrana göre pozisyon oluşturur.Ekrana göre sola 0 yukarıya sıfır uzaklık gibi.Kodlarınız biraz karışık olduğundan bir iki yeri düzenledim bakabilirsiniz.










.menu {
margin-left: 160px;
}

.top-menu {
margin: 0;
padding: 0;
position: relative;
}
.top-menu:after {
content: "";
display: table;
clear: both;
}

.top-menu li {
float: left;
}



.menu ul li a {
margin-left: 10px;
font-family: 'Arimo', sans-serif;
font-size: 16px;
letter-spacing: 1px;
display: block;
height: 45px;
position: relative;
width: 120px;
list-style-type: none;
padding-top: 20px;
float: left;
background-color: #f7090e;
color: #FFF;
font-weight: bold;
text-decoration: none;
text-align: center;
line-height: 30px;
margin-right: 2px;
}

.menu ul li a:hover {
display: block;
height: 45px;
width: 120px;
padding-top: 20px;
float: left;
background-color: #900;
color: #FFF;
font-weight: bold;
text-decoration: none;
text-align: center;
line-height: 30px;
margin-right: 2px;
}

.top-menu ul {
display: none;
position: absolute;
top: 100%;
margin: 0;
padding: 0;
}
.top-menu ul li {
float: none;

}

.top-menu li:hover > ul {
display: block;
}
 

 

#3
Leadman Leadman WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğrenci
  • Konum Aydın
  • Ad Soyad F** U**
  • Mesajlar 73
  • Beğeniler 1 / 14
  • Ticaret 0, (%0)
Vallahi direkt copy paste yaptım. Yine bozuldu. Bu kez de alttaki slider'ın altına indi...

Hakikaten çözemedim artık. Tamam yeni öğreniyorum ama çok mantıksız ya. Ne denersem olmuyor.
 

 

#4
OmerGunay OmerGunay https://omergunay.net Kullanıcı
  • Üyelik 15.05.2015
  • Yaş/Cinsiyet 33 / E
  • Meslek PHP Developer
  • Konum İstanbul Avrupa
  • Ad Soyad Ö** G**
  • Mesajlar 1207
  • Beğeniler 382 / 381
  • Ticaret 16, (%100)
sosyalmedya nın verdiği çalışıyor. Bence biyerde yanlış bişey yapıyorsun. Aynen al. Ben denedim çalışıyor.Leadman
 

 

Herkes yediğinden ikram eder..(Yavuz Sultan Selim)
wmaraci
wmaraci

#5
Leadman Leadman WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğrenci
  • Konum Aydın
  • Ad Soyad F** U**
  • Mesajlar 73
  • Beğeniler 1 / 14
  • Ticaret 0, (%0)
Altta slider var. Slider div'inin altına iniyor bu sefer de. Üstünde durmuyor. Onun için de bir kod lazım sanırım.
 

 

#6
infstock infstock WM Aracı Kullanıcı
  • Üyelik 16.12.2014
  • Yaş/Cinsiyet 37 / E
  • Meslek Frontend Developer
  • Konum İstanbul Anadolu
  • Ad Soyad E** K**
  • Mesajlar 75
  • Beğeniler 1 / 23
  • Ticaret 0, (%0)
kodlar arasında float:left ler gordum.. sorunun büyük ihtimal alttaki div'e clear:both kodunun yazılmamasından kaynaklanıyordur. aşağıdaki linki açtıktan sonra browserdan kodları kontrol edersen floatleft classında float:left var onun altındaki p elementinde ise clear:both var. p ementinden clear:both kodunu kaldırdıgında iç içe gireceklerdir gözlemleyebilirsin. sorunun bunun gibi bir şey ise çözum de alt taraftaki div e clear:both yazmak olacaktır dostum..

http://css.maxdesign.com.au/floatutorial/introduction22.htm
 

 

templates.informationstock.com
www.informationstock.com

#7
sosyalmedya sosyalmedya Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 18.07.2012
  • Yaş/Cinsiyet 37 / E
  • Meslek Front End Developer
  • Konum İstanbul Avrupa
  • Ad Soyad S** A**
  • Mesajlar 219
  • Beğeniler 28 / 66
  • Ticaret 0, (%0)
Düzenlediğim kodları hem html hem de css i ekle sorunsuz çalışır.Aşağıdaki bölümlerle sorun oluşturuyorsa, sayfanın tüm kodlarını paylaşırsan, düzenlerim.
 

 

#8
Leadman Leadman WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 33 / E
  • Meslek Öğrenci
  • Konum Aydın
  • Ad Soyad F** U**
  • Mesajlar 73
  • Beğeniler 1 / 14
  • Ticaret 0, (%0)
Tamamdır arkadaşlar hallettim şimdi, ufak bir şeyi gözden kaçırmışım. Çok teşekkür ederim. Sağolun.
 

 

Css ile defter
Sadece Mobilde Gözüken Buton Ve Yazı ?
wmaraci
wmaraci
Konuyu toplam 4 kişi okuyor. (0 kullanıcı ve 4 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al