Страница 1 из 212»
Форум про uCoz » Всё для web-мастера » Web мастеру » Маркированный список на сайте uCoz
Маркированный список на сайте uCoz
Kosten
Дата: Понедельник, 25.05.2015, 22:17 | Сообщение # 1
Администраторы
Сообщений:12678
Награды: 39


Как сделать правильно маркированный список, это к примеру. Если прописывать 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(5Kb)


First
Дата: Понедельник, 25.05.2015, 22:40 | Сообщение # 2
Vip
Сообщений:383
Награды: 11


Ну если ты именно об этом сайте так точек у тебя здесь не будет

Kosten
Дата: Понедельник, 25.05.2015, 23:19 | Сообщение # 3
Администраторы
Сообщений:12678
Награды: 39


First, я почти ночь их мутил, что бы раньше не спросить.

Можно сделать через стили, а не ссылки прописывать на картинку, которая сейчас стоит.


Kosten
Дата: Понедельник, 25.05.2015, 23:20 | Сообщение # 4
Администраторы
Сообщений:12678
Награды: 39


Цитата First ()
Ну если ты именно об этом сайте так точек у тебя здесь не будет


Хотя стрелки сделал, но они такие страшные были и по вылазили даже вид материале.


First
Дата: Вторник, 26.05.2015, 00:12 | Сообщение # 5
Vip
Сообщений:383
Награды: 11


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.05.2015, 00:17
Kosten
Дата: Вторник, 26.05.2015, 01:14 | Сообщение # 6
Администраторы
Сообщений:12678
Награды: 39


First, от души и теперь красивей смотрится, так как нужно.

Kosten
Дата: Вторник, 26.05.2015, 01:21 | Сообщение # 7
Администраторы
Сообщений:12678
Награды: 39


First, придется старый ставить, так как на Mozilla Firefox, смотрится так.

Прикрепления: 5634356.jpg(48Kb)


First
Дата: Вторник, 26.05.2015, 01:21 | Сообщение # 8
Vip
Сообщений:383
Награды: 11


Kosten, да не за что
со стилями думаю разберешься
0.5 - это отступы между строк
20 - это отступ между картинкой и текстом
40 - это отступ от левого края
В общем выставляй как душе угодно)


First
Дата: Вторник, 26.05.2015, 01:23 | Сообщение # 9
Vip
Сообщений:383
Награды: 11


Цитата Kosten ()
придется старый ставить, так как на Mozilla Firefox, смотрится так.

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


First
Дата: Вторник, 26.05.2015, 01:35 | Сообщение # 10
Vip
Сообщений:383
Награды: 11


Kosten, а лучше попробуй вот такими стилями
Код
lii {  
background:url(/Ajaxoskrip/Frank/ul-li.png) no-repeat;  
display: block;  
margin: 2px 10px 5px 40px;
padding-left: 20px;  
}

тоже самое только по другому написано, Mozilla должен увидеть


Kosten
Дата: Вторник, 26.05.2015, 01:38 | Сообщение # 11
Администраторы
Сообщений:12678
Награды: 39


First, отвечает за это

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


Хоть больше и меньше делай, та же ситуация.


Kosten
Дата: Вторник, 26.05.2015, 01:42 | Сообщение # 12
Администраторы
Сообщений:12678
Награды: 39


First, этот стиль отлично подошел, сейчас только заменю галочки, покрашу под сайт. И Mozilla видит отлично, то слетало в право, сейчас с отступом.

First
Дата: Вторник, 26.05.2015, 01:45 | Сообщение # 13
Vip
Сообщений:383
Награды: 11


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;


Kosten
Дата: Вторник, 26.05.2015, 01:52 | Сообщение # 14
Администраторы
Сообщений:12678
Награды: 39


Может от самой системы зависит. Mozilla, это тот браузер который можно настроить, чтоб был по шустрей. Я уже не помню что нужно прописывать в поисковой полосе, чтоб раскрылся фал от браузера. И там менять, делал, не чего не изменилось. А сейчас с этими обновлениями, так вообще не работаю.

Kosten
Дата: Вторник, 26.05.2015, 01:56 | Сообщение # 15
Администраторы
Сообщений:12678
Награды: 39


А описание начал делать, просто по CEO блокам часто хожу, читаю умные статьи и нашел здесь http://www.hdsw.ru/?p=33 за эту тему, а вот стили пришлось по ресурсам ходить и искать у кого стоит так в описание и нашел один, с хрома и выдернул CSS.

Форум про uCoz » Всё для web-мастера » Web мастеру » Маркированный список на сайте uCoz
Страница 1 из 212»
Поиск: