Neler yeni

Yeni mesajlar Yeni konular En çok mesaj En çok tepki En çok görüntülenen

Arkadaşlr Html de Menülerin Başlarına Ok işaret nasıl yapılır

webdesiigner

🏅Acemi Tasarımcı🏅
Katılım
8 Mar 2012
Mesajlar
62
Tepkime puanı
0
Arkadaş resimdeki gibi html de nasıl yapabilrim aslında yaptım ul - li lerle ama sadece yazıları yazdım ' ok ' işaretlerini beceremedim. yardımlarınızı bekliyorum şimdiden teşekkürler


 

Salamander

🏅Acemi Tasarımcı🏅
Katılım
20 Nis 2012
Mesajlar
57
Tepkime puanı
0
Web sitesi
www.rasitbolukcu.com
list item'lara(li) style(css) özelliği vererek yapabilirsiniz. Başka yolları da olabilir ama ben bu şekilde yapıyorum. Biraz daha açmak gerekirse, örneğin 32x32 lik bir ok resminiz(ok.png) olsun. li'lara soldan 32px padding verip backround'ına da ok.png resmini, tekrarsız yerleştirirseniz tüm li'larınızın başında ok olacaktır. Css konusunda bilginizin olduğunu varsayarak anlattım. Sıkıntı yaşarsanız daha basit bir açıklama da yapabilirim.
 

max1299

🌟Usta Tasarımcı🌟
Katılım
13 Kas 2009
Mesajlar
389
Tepkime puanı
6
li lerin class larına arka plan verip adding yaparak yapablirsin galiba resimdeki de o şekil

kod şöyle

.listeler{

background:url(ok.png) top left no-repeat;
padding:10px;

}

yada dreamweaver kullanıyorsan css ekleme panelinde list bölümünde listelere resim ekleme bölümü var o şekilde de yapabilirsin
 

webdesiigner

🏅Acemi Tasarımcı🏅
Katılım
8 Mar 2012
Mesajlar
62
Tepkime puanı
0
list item'lara(li) style(css) özelliği vererek yapabilirsiniz. Başka yolları da olabilir ama ben bu şekilde yapıyorum. Biraz daha açmak gerekirse, örneğin 32x32 lik bir ok resminiz(ok.png) olsun. li'lara soldan 32px padding verip backround'ına da ok.png resmini, tekrarsız yerleştirirseniz tüm li'larınızın başında ok olacaktır. Css konusunda bilginizin olduğunu varsayarak anlattım. Sıkıntı yaşarsanız daha basit bir açıklama da yapabilirim.

çok iyi anlattınız hemen deniyorum bi sıkıntı olursa yazarım teşekkürler
 

webdesiigner

🏅Acemi Tasarımcı🏅
Katılım
8 Mar 2012
Mesajlar
62
Tepkime puanı
0
li lerin class larına arka plan verip adding yaparak yapablirsin galiba resimdeki de o şekil

kod şöyle

.listeler{

background:url(ok.png) top left no-repeat;
padding:10px;

}

yada dreamweaver kullanıyorsan css ekleme panelinde list bölümünde listelere resim ekleme bölümü var o şekilde de yapabilirsin

çok teşekkür ederim
 

webdesiigner

🏅Acemi Tasarımcı🏅
Katılım
8 Mar 2012
Mesajlar
62
Tepkime puanı
0
rica ederim background resmi ve padding ençok kullanılan yöntemdir

yapamadım

vJuLd.jpg
 

Salamander

🏅Acemi Tasarımcı🏅
Katılım
20 Nis 2012
Mesajlar
57
Tepkime puanı
0
Web sitesi
www.rasitbolukcu.com
altyazilar adlı class ul'e mi li'a mı ait. ul'e aitse neden 55px height verdiniz. altyazilar sanki li'lara aitmis gibi geldi bana. Yoksa ok.png adlı resmi arkaya döşemesi gerekiyor. Onun sonuna no-repeat eklerseniz 1 defa yerleştirir. Buyrun size çalışan bir örnek;

Html kodum:

<ul class="pweDid">
<li>Pohoshop Design</li>
<li>HTML - CSS</li>
<li>PHP - MYSQL</li>
<li>Javascript(Jquery)</li>
</ul>

resim yolu ve boyutları: images/tick.png 16x16;

Css:

.pweDid {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
}

.pweDid li{
background:url(images/tick.png) 0px 6px no-repeat;
width:180px;
padding:5px 0px 5px 20px;
font-size:0.9em;
}

Netice:
 

webdesiigner

🏅Acemi Tasarımcı🏅
Katılım
8 Mar 2012
Mesajlar
62
Tepkime puanı
0
altyazilar adlı class ul'e mi li'a mı ait. ul'e aitse neden 55px height verdiniz. altyazilar sanki li'lara aitmis gibi geldi bana. Yoksa ok.png adlı resmi arkaya döşemesi gerekiyor. Onun sonuna no-repeat eklerseniz 1 defa yerleştirir. Buyrun size çalışan bir örnek;

Html kodum:

<ul class="pweDid">
<li>Pohoshop Design</li>
<li>HTML - CSS</li>
<li>PHP - MYSQL</li>
<li>Javascript(Jquery)</li>
</ul>

resim yolu ve boyutları: images/tick.png 16x16;

Css:

.pweDid {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
}

.pweDid li{
background:url(images/tick.png) 0px 6px no-repeat;
width:180px;
padding:5px 0px 5px 20px;
font-size:0.9em;
}

Netice:


Html ve css kodlarım şu şekilde bi yanlışlık varmı sizce ?

v6uh3.jpg
 

Salamander

🏅Acemi Tasarımcı🏅
Katılım
20 Nis 2012
Mesajlar
57
Tepkime puanı
0
Web sitesi
www.rasitbolukcu.com
ul'lere class vererek deneyin bir de. Ayrıca html kodlarınızda bir şey dikkatimi çekti. Gribox classlı divlerinizin içinde sadece altyazilar classlı divleriniz var. Tek div ile halledilebilecek bir iş gibi duruyor. iç içe 2 div kullanmanıza gerek yok gibi.
 

webdesiigner

🏅Acemi Tasarımcı🏅
Katılım
8 Mar 2012
Mesajlar
62
Tepkime puanı
0
ul'lere class vererek deneyin bir de. Ayrıca html kodlarınızda bir şey dikkatimi çekti. Gribox classlı divlerinizin içinde sadece altyazilar classlı divleriniz var. Tek div ile halledilebilecek bir iş gibi duruyor. iç içe 2 div kullanmanıza gerek yok gibi.

aynen dediğiniz gibi onu farketmedim tek bi div de hallettim şimdi, ul lere class verdim gene olmuyo gribox classında sorun var heralde
 

yeakca

⭐Deneyimli Tasarımcı⭐
Katılım
11 Haz 2007
Mesajlar
112
Tepkime puanı
2
Web sitesi
www.yeakca.com
li tagına padding, display:block bunları uygula bir de öyle dene.
 

Salamander

🏅Acemi Tasarımcı🏅
Katılım
20 Nis 2012
Mesajlar
57
Tepkime puanı
0
Web sitesi
www.rasitbolukcu.com
Ya bu şekilde yardımcı olmam oldukça zor oluyo. Kodları görmeden ya da kurcalayamadan pek elimden birşey gelmiyo. Onun yerine sana şöyle bir yardımda bulunayım. İstediğin şeyi yapmaya çalıştım. Şöyle bir şey ortaya çıktı.



Bununla ilgili dosyaları da

https://hotfile.com/dl/162985577/e404e85/deneme.rar.html

adresine upload ettim. Burdan indirip inceleyebilir kafana göre düzenleyebilirsin.
 

webdesiigner

🏅Acemi Tasarımcı🏅
Katılım
8 Mar 2012
Mesajlar
62
Tepkime puanı
0
Ya bu şekilde yardımcı olmam oldukça zor oluyo. Kodları görmeden ya da kurcalayamadan pek elimden birşey gelmiyo. Onun yerine sana şöyle bir yardımda bulunayım. İstediğin şeyi yapmaya çalıştım. Şöyle bir şey ortaya çıktı.



Bununla ilgili dosyaları da

https://hotfile.com/dl/162985577/e404e85/deneme.rar.html

adresine upload ettim. Burdan indirip inceleyebilir kafana göre düzenleyebilirsin.

bu çok iyi işte teşekkür ederim yardımlarınız için
 

AliATAS

🌱Yeni Üye🌱
Katılım
15 Tem 2014
Mesajlar
1
Tepkime puanı
0
List-style-image

css ile menüyü yap

li kısmına bunu yap tmmdır


list-style-image:url("Ok Resmi Urlsi ")
 
Üst