Css ile Simge Eklemek - Sayfa 2

05-09-2010, 18:08:23

#10

Arkadaşlar yorumlarınız için teşekkür ederim.Bu simgeleri koymak için html kullanmak sorun çünkü wordpress üzerine çalışıyorum ve kategorileri php çekip direk yazdırıyor.Tabi bu döngünün içine foreach aç yap diyebilirsiniz. Onuda yapmam için baya uğraşmam gerekiyor kullandığım tema kategorileri anasayfanın tam ortasında gösteriyor.Kategori sayım çok fazla eğer foreach kullanarak html ile simge eklersem alt kategorilerede eklenmiş olucak buda görüntü kirliliği olucak css de sayfanın istediğim yerine bir resmi yerleştirebilir diye düşündüm ve bu yüzden css yapmak istiyorum.

Kafamdaki css kodlama modelini anlatayım ona göre olurmu olmazmı tartışalım.Diyelim <div id="simge"> şeklinde simgeleri tanımladım.

<div id="simge"> <Kategori kod alanı> </div>

Şeklinde yazdığımda <div id="simge"> içindeki alana 2. satıra simge1.png resmini yerleştir.7. satıra simge2.png yerleştir.Şeklinde tanımlayamazmıyım?

05-09-2010, 19:33:35

#11

KorsaNvBh

nyildiz adlı üyeden alıntı: mesajı görüntüle

Arkadaşlar yorumlarınız için teşekkür ederim.Bu simgeleri koymak için html kullanmak sorun çünkü wordpress üzerine çalışıyorum ve kategorileri php çekip direk yazdırıyor.Tabi bu döngünün içine foreach aç yap diyebilirsiniz. Onuda yapmam için baya uğraşmam gerekiyor kullandığım tema kategorileri anasayfanın tam ortasında gösteriyor.Kategori sayım çok fazla eğer foreach kullanarak html ile simge eklersem alt kategorilerede eklenmiş olucak buda görüntü kirliliği olucak css de sayfanın istediğim yerine bir resmi yerleştirebilir diye düşündüm ve bu yüzden css yapmak istiyorum.

Kafamdaki css kodlama modelini anlatayım ona göre olurmu olmazmı tartışalım.Diyelim <div id="simge"> şeklinde simgeleri tanımladım.

<div id="simge"> <Kategori kod alanı> </div>

Şimdi dediğiniz şey şöyle olur

<ul>
<li><a href="#">Kategori 1</a></li>
<li><a href="#">Kategori 2</a></li>
<li><a href="#">Kategori 3</a></li>
<li><a href="#">Kategori 4</a></li>
<li><a href="#">Kategori 5</a></li>
<li><a href="#">Kategori 6</a></li>
<li class="simge2"><a href="#">Kategori 7</a></li>
</ul>

Şeklinde yazdığımda <div id="simge"> içindeki alana 2. satıra simge1.png resmini yerleştir.7. satıra simge2.png yerleştir.Şeklinde tanımlayamazmıyım?

Bu şekilde istedigin değişikliği yapabilirsin ama wordpress de olurmu bilmem.
Şöyle bir yol var jquery yazarsın dersinki #solmenu icindeki ul taginin içindeki li taginin sonuncusunu bul background-image'ini simge2.png yap.

sonuncu demem örnekti jquery selectors hakkında pek bir bilgim yok.

05-09-2010, 23:36:47

#12

nyildiz

Şimdi fark ettiğim bir şey var.

<li class="maincat"><a href="http://localhost/category/bilgisayar/">BİLGİSAYAR</a> (1)</li>

        	<li class="cat-item cat-item-8"><a href="http://localhost/category/bilgisayar/masaustu/">Masaüstü</a> (0)

</li>
	<li class="cat-item cat-item-5"><a href="http://localhost/category/bilgisayar/notebook/">Notebook</a> (0)
</li>
	<li class="cat-item cat-item-11"><a href="http://localhost/category/bilgisayar/tablet-pc/">Tablet PC</a> (0)

Gördüğünüz gibi her kategorinin başına bir sınıf oluşturuyor ve sınıf isminin sonuna kategori id'sini ekliyor.Scriptin css dosyasında bu css tanımlı değil.Örneğin master.css dosyasına "class="cat-item cat-item-11" şeklinde tanımlasam ve burada simgenin yerini göstersem direk olarak simge gelmez mi?

Eğer olursa sizden bir tane css için örnek ve kaynak rica edicem çünkü css dediğim gibi fazla bilgim yok css nasıl resim gösterilir bilmiyorum.

ilgili bölümün master css kodları:

#directory .catcol ul li.maincat{border-bottom:1px solid #DDD; font-weight:bold; padding:0 0 2px; text-transform:uppercase}

#directory .catcol ul li.maincat a{text-decoration:none;}

#directory .catcol ul li.cat-item a{text-decoration:none; color:#545454;}

#directory .catcol ul li.maincat a:hover, #directory .catcol ul li.cat-item a:hover{text-decoration:underline}

#directory .catcol ul li.cat-item{background:transparent url(../images/bullet-grey.png) no-repeat scroll 3px 10px; border-bottom:1px solid #DDD; line-height:20px; padding:5px 0 2px 10px}

#directory .catcol ul li{line-height:20px; padding:5px 0 2px 10px}

06-09-2010, 10:06:28

#13

mystec

verdiğin css dosyasında bullet-grey.png zaten resim olarak atanmış. Amacın atıyorum 7. linkteki bullet-grey.png yerine istediğin bir resmi koymaksa;

#directory .catcol ul li.cat-item-7{background:transparent url(../images/yedi.png) no-repeat scroll 3px 10px; }

Bunu yukarıdakilerin altında ekle ama.

06-09-2010, 13:53:16

#14

nyildiz

mystec adlı üyeden alıntı: mesajı görüntüle

verdiğin css dosyasında bullet-grey.png zaten resim olarak atanmış. Amacın atıyorum 7. linkteki bullet-grey.png yerine istediğin bir resmi koymaksa;

#directory .catcol ul li.cat-item-7{background:transparent url(../images/yedi.png) no-repeat scroll 3px 10px; }

Bunu yukarıdakilerin altında ekle ama.

Arkadaşım öncelikle saol dediğin şekilde resim ekledim.

Yanlız bir de ufak bir hata yapmışım

 <li class="maincat"><a href="http://localhost.com/category/bilgisayar/">BİLGİSAYAR</a> (1)</li>
               <li class="maincat"><a href="http://localhost.com/category/tabletpc/">Tablet PC</a> (1)</li>

Ana kategorileri maincat sınıfında gösteriyormuş.Alt kategorileri class="cat-item cat-item-8" sınıfında tanımlıyormuş ben simgeleri ana kategorilerin yanına yerleştirmem gerekiyor.

Php kodlarını değiştirerek her ana kategori için ayrı sınıf yazdırdım.Yani:

 <li class="maincat-0"><a href="http://localhost.com/category/bilgisayar/">BİLGİSAYAR</a> (1)</li>
               <li class="maincat-1"><a href="http://localhost.com/category/tabletpc/">Tablet PC</a> (1)</li>

şeklinde geliyor sormak istediğim ana kategorilerinin tanımlandığı sayfadaki yerinin tanımlandığı yazı font ayarlnadığı bir satır var master.css de

#directory .catcol ul li.maincat{border-bottom:1px solid #DDD; font-weight:bold; padding:0 24px 0px; text-transform:uppercase}

Tüm kategorilerde bu şekilde olması gerek.Ama hepsi için ayrı ayrı yazıp sistemi yormak istemiyorum.Toparlıyayım biraz karıştı sanırım maincat diye tanımlanmış sınıfı maincat-0 maincat-1... tarafından tüm kategori başlılarında kullanılsın istiyorum.Bunu nasıl sağlarım?

07-09-2010, 05:39:32

#15

nyildiz

manicat sınıfının her biri için ayrı css tanımladım sorun bu şekilde çözüldü.Yardımlarınız için tekrar saolun.

07-09-2010, 06:14:14

#16

~~SpyboT~~

Üyeliği durduruldu

anlatayım.

ilk olarak bi sınıf açıp gereken değerleri verin.örneğin .kategori

.kategori{
font...
back..
}

listelemeleride yapalım

ul.kategori{
......
}
ul.kategori li {
......
}

ve html'de

<div class="kategori">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

şimdi li 'lere sınıf vericez

li.sin{.............}
li.sun{............}

ve htmlde

.......
<li class="sin"></div>
<li class="sun"></div>
.......

böyle yaptığınızda her liste elemanına ayrı resim verebilirsiniz resim vermek içinde arkaplan komutlarını kullanıcaz.

li.sin{
background: url(resim/ikon.png) no-repeat 0px 0px; /*yanlış hatırlamıyosam ilk 0 yatay pozisyon ikinci 0 dikey pozisyon yani soldan üstten pozisyonu*/
padding: 0 0 0 0; /*eğer yazıyı kaydırmak istiyorsanız normal padding kodları kullanacaksınız.*/

}

onlar nasıl yapmış bilemem ama benim kullandığım ve kolay bulduğum yöntem bu.

iyi çalışmalar.