Arkadaşlar merhaba HTML-CSS karışık bir arayüz yapıyorum. Sayfaları koyduğum bir menü olacak aralarına ayraç eklemek istiyorum. Forumda araştırdım hep listeleme metoduyla yapılmış. Ben listelemeyi css'de düzenlemeyi bilmiyorum ve hazır kod olarak koymak istemiyorum öğrenmek istiyorum bunu nerden öğrenebilirim ya da başka nasıl yapabilirim?
Ek Olarak: Günceldir yardım lütfen!
CSS Ayraç Sorunu |
8 Mesajlar | 1.985 Okunma | ||
- Üyelik 11.05.2012
- Yaş/Cinsiyet 32 / E
- Meslek Psikolog
- Konum Ankara
- Ad Soyad B** K**
- Mesajlar 1400
- Beğeniler 497 / 496
- Ticaret 0, (%0)
- Üyelik 07.08.2012
- Yaş/Cinsiyet 30 / E
- Meslek Öğrenci
- Konum İstanbul Avrupa
- Ad Soyad ** **
- Mesajlar 63
- Beğeniler 0 / 20
- Ticaret 0, (%0)
HTML5'in yeni
- Üyelik 11.05.2012
- Yaş/Cinsiyet 32 / E
- Meslek Psikolog
- Konum Ankara
- Ad Soyad B** K**
- Mesajlar 1400
- Beğeniler 497 / 496
- Ticaret 0, (%0)
Teşekkürler hocam ama bir başka yolu daha varsa öğrenmek isterim :)
- Üyelik 15.01.2012
- Yaş/Cinsiyet 29 / E
- Meslek Dil Öğrencisi
- Konum Muğla
- Ad Soyad Y** K**
- Mesajlar 1268
- Beğeniler 418 / 276
- Ticaret 15, (%100)
Demek istediğinizi anladım. Ben listeleme ile yapıyorum, bu mantığı senin yöntemin ilede yapabilirsin belki. Ama kesinlikle ve kesinlikle listelemeleri öğrenmen lazım eğer ciddi bir tasarım döküyorsan.
Yani:
CSS ise:
Bu css kodu ile her bir sayfnın (menü listesi yani li'ye) sağ tarafına ayraç eklemiş olursun. Bu ayraç o koddaki .png olur.
Yani:
CSS ise:
#menu ul li {background: url("resim/menu-ayrac.png") no-repeat right 0;}
Bu css kodu ile her bir sayfnın (menü listesi yani li'ye) sağ tarafına ayraç eklemiş olursun. Bu ayraç o koddaki .png olur.
Öyle böyle. Şöyle şöyle.
- Üyelik 11.05.2012
- Yaş/Cinsiyet 32 / E
- Meslek Psikolog
- Konum Ankara
- Ad Soyad B** K**
- Mesajlar 1400
- Beğeniler 497 / 496
- Ticaret 0, (%0)
Demek istediğinizi anladım. Ben listeleme ile yapıyorum, bu mantığı senin yöntemin ilede yapabilirsin belki. Ama kesinlikle ve kesinlikle listelemeleri öğrenmen lazım eğer ciddi bir tasarım döküyorsan.
Yani:
CSS ise:
Bu css kodu ile her bir sayfnın (menü listesi yani li'ye) sağ tarafına ayraç eklemiş olursun. Bu ayraç o koddaki .png olur.
Yani:
CSS ise:
#menu ul li {background: url("resim/menu-ayrac.png") no-repeat right 0;}
Bu css kodu ile her bir sayfnın (menü listesi yani li'ye) sağ tarafına ayraç eklemiş olursun. Bu ayraç o koddaki .png olur.
Hocam peki diğer özellikleri nelerdir bir kaynak,video ya da anlatım var mıdır? ul nedir li nedir yani tam anlamak istiyorum :)
- Üyelik 13.06.2012
- Yaş/Cinsiyet 31 / E
- Meslek Bilgisayar Mühendisi
- Konum İzmir
- Ad Soyad B** Ç**
- Mesajlar 396
- Beğeniler 82 / 125
- Ticaret 3, (%100)
ul etiketinin açılımı unordered list,anlamı menü elemanlarının herhangi bir sırası olmamasıdır.
Örneğin
Burada bir ayrıntıya girelim,ol etiketi ise ordered list yani belli bir sıraya göre listelenen elemanların olduğu menüdür,örnek vermek gerekirse
li etiketinin açılım list item yani unordered veya ordered listelemede item yani ögeleri listemeleye yarayan ekitettir.
Buradan daha detaylı bilgilere ulaşabilirsiniz.
Örneğin
*Ka
*Te
*Go
*RiBurada bir ayrıntıya girelim,ol etiketi ise ordered list yani belli bir sıraya göre listelenen elemanların olduğu menüdür,örnek vermek gerekirse
1.Ka
2.Te
3.Go
4.Rili etiketinin açılım list item yani unordered veya ordered listelemede item yani ögeleri listemeleye yarayan ekitettir.
Buradan daha detaylı bilgilere ulaşabilirsiniz.
- Üyelik 15.01.2012
- Yaş/Cinsiyet 29 / E
- Meslek Dil Öğrencisi
- Konum Muğla
- Ad Soyad Y** K**
- Mesajlar 1268
- Beğeniler 418 / 276
- Ticaret 15, (%100)
@kilitbilgi arkadaşın dediğini daha çok açacak olursak;
Ul ve Ol tutucu, li'ler ise elemandır.
Ol tutucusunu kullanırsak 1. 2. 3. diye sıralar
Ul tutucusunu kullanırsak da sıralar ama başında 1.2.3. yerine nokta çıkar..
li'ler Ol ve Ul'ların yanı tutucuların içine yazılır herzaman.
--Önizleme yapıcak olursak--
Ol kullanırsak;
Ul kullaırsak;
--Önemli bir not--
Şimdi diceksin, ul kullanınca başında nokta çıkıyor, ama ben menümde o noktaların çıkmasını istemiyorum nasıl olucak?
css dosyasına o li elemanının olduğu class'a şu kodu gireceksiniz;
Biz bu css kodunda ne yaptık?
Bu css kodunda dedik ki; .sinifadi class'ının içinde > ul tagının içindeki li elemanların'ın başındaki stilleri kaldır. Yani noktayı kaldır.
Ul ve Ol tutucu, li'ler ise elemandır.
Ol tutucusunu kullanırsak 1. 2. 3. diye sıralar
Ul tutucusunu kullanırsak da sıralar ama başında 1.2.3. yerine nokta çıkar..
li'ler Ol ve Ul'ların yanı tutucuların içine yazılır herzaman.
--Önizleme yapıcak olursak--
Ol kullanırsak;
[*]eleman1
[*]eleman2
[*]eleman3
Ul kullaırsak;
[*]eleman1
[*]eleman2
[*]eleman3
--Önemli bir not--
Şimdi diceksin, ul kullanınca başında nokta çıkıyor, ama ben menümde o noktaların çıkmasını istemiyorum nasıl olucak?
css dosyasına o li elemanının olduğu class'a şu kodu gireceksiniz;
.sinifadi ul li{list-style-type:none;}Biz bu css kodunda ne yaptık?
Bu css kodunda dedik ki; .sinifadi class'ının içinde > ul tagının içindeki li elemanların'ın başındaki stilleri kaldır. Yani noktayı kaldır.
Öyle böyle. Şöyle şöyle.
- Üyelik 11.05.2012
- Yaş/Cinsiyet 32 / E
- Meslek Psikolog
- Konum Ankara
- Ad Soyad B** K**
- Mesajlar 1400
- Beğeniler 497 / 496
- Ticaret 0, (%0)
Çok çok teşekkür ederim w3'e de baktım zaten hepinize tek tek teşekkür ederim :)
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)