Здравейте, опитах се да сложа image, вместо точките на ul > li, но взех външна картинка от google.com и не знам как да я намаля, моля помогнете ми.
кода ми е :
li {
padding-bottom: 10px;
text-align: left;
text-indent: 30px;
width: 180px;
}
ul {
list-style-image: url('http://www.clipartbest.com/cliparts/di8/7LM/di87LM8ie.png');
}
Аз използвах ето такава 16 на 16 пиксела картинка: http://cdn-img.easyicon.net/png/198/19841.gif
Твърде голяма резулюция са картинките, които използваш за list-style-image.
Етопробвай с тези и ще стане
li {
padding-bottom 10px;
text-align left;
text-indent 30px;
width 180px;
}
ul {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAnFBMVEX///8ltB6h4pKR3ISC1nmy6Z/B8Kz8/Pz19fXQ9bcksB3v7+/5+fnn5+f29vbf398ipxxbx1Pb+r82pzGhq6DZ2dlPw0UpqCN8q3llqmLN0chHq0Jyq3DF3qnG0rmUspOnw6OqqqqSuo7Kysq+7p28vLyZqpizs7OZy4mG1npy0GPT+bLB4qO47Zas5pKj44e2xrVEvztoy2GWupXSDINXAAAA80lEQVQ4jeWS23bCIBBFtTcIAwxUiYoajTT1Emu9/P+/NVnpWtJJ8uxD9+vZDGfBDAb/D8YVIirOenKN2TJJkmWGuvM4+GP5XlMePXQMgeyrTH75yKA933+/3Tn51i1qd3qN2CnawB+eYvaetNDrw3PMfk3u4Bv78ocNJ8JNDC9pau31am2aXsSNCPIshjHiLElJN48NMXekJFMrczeEWdG3ZBAWRjSKEGYR6I8xjsV0UikVZjItlG4JyhXj2cgYM5qNCwRJBVkZYZvnn3m+DQjtnagNhc4F51ABpwMaA0BVQB13LhWTUnPOdU/cODW96aP4AUToEowFSywUAAAAAElFTkSuQmCC');
}
Другия вариянт е да сложиш в html документа img таг в li таговете и после в css файла да сложиш source към url-ла и зададеш размери:
HTML
<ul>
<li><img/>1</li>
<li><img/>2</li>
<li><img/>3</li>
<li><img/>4</li>
</ul>
CSS
li {
padding-bottom: 10px;
text-align: left;
text-indent: 30px;
width: 180px;
}
img {
content:url(http://www.clipartbest.com/cliparts/di8/7LM/di87LM8ie.png);
width: 15px;
height: 100%;
}
Или оразмеряваш файла, който ще използваш, качваш го някъде и използваш.
Поне аз за това се сещам сега.
успях да го направя, сега ми остана да центрирам текста по средата на li елемента
aside nav header{
text-decoration: underline;
font-size: 35px;
}
ul {
list-style: none;
}
li {
text-align: left;
text-indent: 10px;
margin-top: 20px;
margin-left: -50px;
}
ul li a{
font-size: 25px;
padding-left: 30px;
padding-top: 20px;
text-decoration: none;
background-repeat: no-repeat;
background-image: url('http://findicons.com/files/icons/1609/ose_png/256/tick.png');
background-position: 0 25px;
background-size: 20px 20px;
position: relative;
color: black;
}
Даваш text-align: center;
тазе с със страхотна резулуция, но ако беше transperant, щеше да е незаменима :)
и проблема е, че когато я вкарам в <a> тага полувинате се скрива, а когато е в li тага и сложа li:hover ховъра не я хваща
http://bgwebdev.free.bg/ColorKitchen.html Ето така ми се получи на мен :)