Софтуерно Инженерство
Loading...
+ Нов въпрос
daniel.nikov926 avatar daniel.nikov926 18 Точки

Problem 2 - Основи на CSS

Здравейте, опитах се да сложа 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');
}

Тагове:
0
Web Fundamentals - HTML5
Kiril555 avatar Kiril555 4 Точки

Аз използвах ето такава 16 на 16 пиксела картинка: http://cdn-img.easyicon.net/png/198/19841.gif

0
daniel.nikov926 avatar daniel.nikov926 18 Точки

тазе с със страхотна резулуция, но ако беше transperant, щеше да е незаменима  :)

0
daniel.nikov926 avatar daniel.nikov926 18 Точки

и проблема е, че когато я вкарам в <a> тага полувинате се скрива, а когато е в li тага и сложа li:hover ховъра не я хваща

0
Philip.Paskalev avatar Philip.Paskalev 24 Точки

Твърде голяма резулюция са картинките, които използваш за 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%;
}

Или оразмеряваш файла, който ще използваш, качваш го някъде и използваш.

Поне аз за това се сещам сега.

0
06/09/2016 11:13:24
daniel.nikov926 avatar daniel.nikov926 18 Точки

успях да го направя, сега ми остана да центрирам текста по средата на li елемента

0
daniel.nikov926 avatar daniel.nikov926 18 Точки

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;
}

0
Philip.Paskalev avatar Philip.Paskalev 24 Точки

Даваш text-align: center;

0