• Страница 1 из 2
  • 1
  • 2
  • »
Маркированный список на сайте uCoz
Kosten
Понедельник, 25 Мая 2015, 22:17 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Как сделать правильно маркированный список, это к примеру. Если прописывать LI то автоматически должна быть точка. Просто вчера делал описание и так не мог понять и пришлось ставить ссылки.



Много прочитал, и понял идет по умолчанию 2 разных, это

Код
<ol>


и

Код
<ul>


Форматирование списков

Используем тэг ul обычных списков:

Код
<ul>
<li>Один из пунктов списка</li>
<li>Другой такой пункт</li>
<li>Ещё один пункт.</li>
</ul>

Заменяем тэг ul на ol и список становится пронумерованным, автоматически:

Код
<ol>
<li>Один из пунктов списка</li>
<li>Другой такой пункт</li>
<li>Ещё один пункт.</li>
</ol>


Может у кого есть информация и чтоб стили шли к ним.
Прикрепления: 6509407.jpg (4.9 Kb)
Страна: (RU)
First-1
Понедельник, 25 Мая 2015, 22:40 | Сообщение 2
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Ну если ты именно об этом сайте так точек у тебя здесь не будет
Страна: (US)
Kosten
Понедельник, 25 Мая 2015, 23:19 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, я почти ночь их мутил, что бы раньше не спросить.

Можно сделать через стили, а не ссылки прописывать на картинку, которая сейчас стоит.
Страна: (RU)
Kosten
Понедельник, 25 Мая 2015, 23:20 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Цитата First ()
Ну если ты именно об этом сайте так точек у тебя здесь не будет


Хотя стрелки сделал, но они такие страшные были и по вылазили даже вид материале.
Страна: (RU)
First-1
Вторник, 26 Мая 2015, 00:12 | Сообщение 5
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Kosten, если ты пропишешь стили к li, то есть ты его откроешь, так они у тебя по вылазят по всему сайту, и в меню и в виде материалов, в общем везде где стоит этот тег, что пере корчит весь дизайн. Как вариант можно придумать что то другое, например lii biggrin
И получится у нас вот такое
Код
<ul>   
<lii>Один из пунктов списка</lii>   
<lii>Другой такой пункт</lii>   
<lii>Ещё один пункт.</lii>   
</ul>


вот взял не много переделал стили к твоему ol
Код
lii {
background:url(/Ajaxoskrip/Frank/ul-li.png) no-repeat;
   display: block;
   list-style-type: decimal;
   -webkit-margin-before: 0em;
   -webkit-margin-after: 0.5em;
   -webkit-margin-start: 40px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 20px;
}


теперь там где хочешь видеть маркер в виде картинки пишешь не li а lii biggrin

ну это то что я придумал за пару минут, но нужно посидеть подумать, может есть ещё какие то варианты, хотя и этот не тяжелый и можно настроить отступы сменить картинку и т.д smile

в общем получится тоже самое только не нужно каждый раз картинку добавлять


Сообщение отредактировал
First - Вторник, 26 Мая 2015, 00:17
Страна: (US)
Kosten
Вторник, 26 Мая 2015, 01:14 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, от души и теперь красивей смотрится, так как нужно.
Страна: (RU)
Kosten
Вторник, 26 Мая 2015, 01:21 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, придется старый ставить, так как на Mozilla Firefox, смотрится так.

Прикрепления: 5634356.jpg (48.0 Kb)
Страна: (RU)
First-1
Вторник, 26 Мая 2015, 01:21 | Сообщение 8
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Kosten, да не за что
со стилями думаю разберешься
0.5 - это отступы между строк
20 - это отступ между картинкой и текстом
40 - это отступ от левого края
В общем выставляй как душе угодно)
Страна: (US)
First-1
Вторник, 26 Мая 2015, 01:23 | Сообщение 9
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Цитата Kosten ()
придется старый ставить, так как на Mozilla Firefox, смотрится так.

сделай больше отступ между картинкой и текстом или попробуй пропиши пикселями и должно быть нормально
Страна: (US)
First-1
Вторник, 26 Мая 2015, 01:35 | Сообщение 10
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Kosten, а лучше попробуй вот такими стилями
Код
lii {  
background:url(/Ajaxoskrip/Frank/ul-li.png) no-repeat;  
display: block;  
margin: 2px 10px 5px 40px;
padding-left: 20px;  
}

тоже самое только по другому написано, Mozilla должен увидеть
Страна: (US)
Kosten
Вторник, 26 Мая 2015, 01:38 | Сообщение 11
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, отвечает за это

Код
-webkit-padding-start: 20px;


Хоть больше и меньше делай, та же ситуация.
Страна: (RU)
Kosten
Вторник, 26 Мая 2015, 01:42 | Сообщение 12
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, этот стиль отлично подошел, сейчас только заменю галочки, покрашу под сайт. И Mozilla видит отлично, то слетало в право, сейчас с отступом.
Страна: (RU)
First-1
Вторник, 26 Мая 2015, 01:45 | Сообщение 13
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Kosten,
Цитата Kosten ()
Mozilla видит отлично


Mozilla почему то коды такого типа не видит, не понятные видно ему biggrin
Код
   -webkit-margin-before: 0em;  
    -webkit-margin-after: 0.5em;  
    -webkit-margin-start: 40px;  
    -webkit-margin-end: 0px;  
    -webkit-padding-start: 20px;
Страна: (US)
Kosten
Вторник, 26 Мая 2015, 01:52 | Сообщение 14
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Может от самой системы зависит. Mozilla, это тот браузер который можно настроить, чтоб был по шустрей. Я уже не помню что нужно прописывать в поисковой полосе, чтоб раскрылся фал от браузера. И там менять, делал, не чего не изменилось. А сейчас с этими обновлениями, так вообще не работаю.
Страна: (RU)
Kosten
Вторник, 26 Мая 2015, 01:56 | Сообщение 15
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
А описание начал делать, просто по CEO блокам часто хожу, читаю умные статьи и нашел здесь http://www.hdsw.ru/?p=33 за эту тему, а вот стили пришлось по ресурсам ходить и искать у кого стоит так в описание и нашел один, с хрома и выдернул CSS.
Страна: (RU)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: