Правда сразу оговорюсь, что для начала мы разберем скорее теоретические основы, поскольку существует браузер названИЕкоторого все знают. Нормальное решение основано на использовании автоматически генерируемого контента, а вышеупомянутый браузер (будем честными до конца – не только он один) не поддерживает эту возможность. Зато это прекрасно работает в Mozilla, FireFox, Netscape 6+, Opera и Safari. А затем разберем и универсальное решение. К сожалению не такое изящное.

Посмотрите на этот CSS-код:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
  text-indent:-1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}
li:before {
  content:"\00BB \0020";
}

Для начала скрываем маркер списка, который имеется по умолчанию с помощью list-style:none; затем устанавливаем левый отступ 1em, но при этом сдвигаем текст влево на ту же величину, т.е. -1em для того, чтобы «вытолкнуть» стандартный маркер из блока элемента списка. С помощью псевдоэлемента :before генерируем текстовый маркер. В свойстве content нужные символы указаны с помощью шестнадцатеричного escape-эквивалента Unicode, как того требует спецификация CSS2.1. В примере сгенерирована последовательность символов из двойной стрелки-ёлочки и пробела. Изящно, просто и красиво, но не для IE …

… и решение, которое подойдет для всех браузеров. К сожалению, уже не такое красивое. Текстовый маркер придется просто вставлять перед каждым элементом списка. Как показано ниже:

<ul>
  <li>» Первый пункт списка</li>
  <li>» Второй пункт списка</li>
  <li>» Третий пункт списка</li>
  <li>» Четвертый пункт списка</li>
  <li>» Пятый пункт списка</li>
</ul>

а таблицу стилей для этого варианта надо немного изменить. Вот так:

ul {
  list-style:none;
  margin:0;
  padding:0 0 0 1em;
}
li {
  width:20%;
  padding:0;
  margin:0 0 0.25em 0;
}

Однако и в этом способе есть недостаток, правда не очень критический. Если в браузере пользователя отключена поддержка CSS, он увидит два маркера для каждого элемента списка – маркер, генерируемый браузером и маркер, который мы добавили вручную.

Разберем другой вопрос: как сделать маркер, используя картинку?

Для того, чтобы применить графический маркер используется свойство list-style-image, как показано в примере ниже

ul {
  list-style-type: disc;
  list-style-image: url(marker.png);
}

Свойство list-style-type используется здесь на всякий случай, если браузер пользователя не имеет возможности использовать изображение. А в свойстве list-style-image задается путь к нужной картинке. Управлять размером картинки, которая используется как маркер списка, из таблицы CSS мы не сможем и поэтому надо убедиться в том, что картинка имеет подходящие размеры. Еще один нюанс состоит в том, что значения графических маркеров наследуются и если Вы создаете вложенные списки и хотите отказаться от маркера изображения в них, надо опять использовать свойство list-style-image. Вот таким образом:

ul ul {
  list-style-image:none;
}

А вот если хочется в качестве маркера списка иметь довольно большую картинку, такой способ уже не подойдет, поскольку часть картинки может быть просто «обрезана». Чтобы обойти это ограничение нужно поступить несколько иначе:

ul {
  margin-left:10px;
  padding-left:0px;
  list-style:none;
}
li {
  padding:0.5em 0 0.5em 54px;
  font: 1.3em/1.6 Verdana, Arial, sans-serif;
  background:url(bigMarker.png) no-repeat;
}

Сначала задаем значения и для левого поля и для левого отступа списка (почему именно так, я объяснял в одной из предыдущих статей). Потом удаляем маркер, используемый по умолчанию. Теперь главное: padding:0.5em 0 0.5em 54px; – мы освобождаем место слева от элемента списка, для того, чтобы вставить туда нашу большую картинку (например 54х54 пиксела), затем задаем свойство font таким образом, чтобы текст элемента списка не диссонировал с размером картинки-маркера и наконец используем свойство background, чтобы эту картинку вставить в качестве маркера списка.

Надеюсь, что это статья поможет кому-нибудь…

$("#menuList").sortable();

где #menuList – это идентификатор списка.
В меню справа использованы некоторые дополнительно установленные опции. Код конечно немного посложнее, но и в нем нет абсолютно ничего страшного.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

А теперь разберем примеры более подробно. Этот пример для своей корректной работы требует подключения достаточно большого количества различных вспомогательных файлов.

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.mouse.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<script src="js/ui.draggable.ext.js" type="text/javascript"></script>
<script src="js/ui.droppable.js" type="text/javascript"></script>
<script src="js/ui.droppable.ext.js" type="text/javascript"></script>
<script src="js/ui.sortable.js" type="text/javascript"></script>

Все файлы уже знакомы по предыдущим примерам. Добавился только один файл ui.sortable.js, который (как и все остальные) мы подключаем в разделе HEAD нашей страницы.
Из таблицы стилей остановлюсь только на небольшом моменте, поскольку это по большому счету дело вкуса.

.dragStyle {
  background:#CFD4E6;
  border:1px solid #727EA3;
}

Класс dragStyle используется во втором примере и применяется в момент перемещения элемента, отображая то место, на которое перемещаемый элемент будет «сброшен».

Далее полностью приведен кусок кода, который и отвечает за работу обоих списков.

<script type="text/javascript">
$(document).ready(function(){
  $("#menuList").sortable(); // 1-ый спискок

  $("#menuList2").sortable({ // 2-ой список
	hoverClass: "dragStyle",
	start: function(ev, ui) {
	  var text = $(ui.draggable.element).text();
	  $("#result").text("Перемещаем " + text);
	},
	stop: function(ev, ui) {
	  $("#result").text("Перемещение окончено!");
	}
  });
});
</script>

Вот так просто. За работу первого списка отвечает всего-навсего одна строка кода. Для второго списка мы используем некоторые дополнительные опции.
hoverClass – опция содержит название класса, который будет применен в процессе перемещения одного из пунктов списка, чтобы указать место, куда перемещаемый пункт будет «сброшен».
start – здесь указываем функцию, которая выполнится в момент старта перемещения элемента списка. В этой функции мы обращаемся к перемещаемому элементу, получаем его содержимое в виде текста и записываем в переменную text. Затем отыскиваем элемент #result и вставляем текст туда.
stop – указываем функцию, которая выполнится в момент, когда произошел «сброс» элемента на нужную позицию (независимо от того изменилась ли фактическая позиция элемента). Тут тоже все предельно просто – вставляем текст сообщения в элемент #result.

Я использовал для примера всего несколько опций, а их полный список опций можно найти на сайте разработчиков библиотеки.

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

Решение в этом случае достаточно простое. При создании стилевого оформления списка надо просто учесть этот факт и задать оба свойства, например вот так:

ul {
  margin-left: 50px;
  padding-left: 0px;
}

Если же Вы попытаетесь разделить эти 50px между свойствами margin и padding, то отображение страницы в разных браузерах будет уже неодинаковым.
С одним вопросом немного разобрались. Теперь во всех браузерах отступы одинаковые, но вот как-то бедно выглядят эти списки. У одного в качестве маркера – закрашенный кружочек, у другого – ничем не примечательные цифры.

Возможно также создавать и свои собственные маркеры для списков, причем как текстовые, так и графические, но эти возможности мы рассмотрим отдельно.

Для того, чтобы поменять стандартный стиль списка, воспользуйтесь свойством list-style-type и Вы сможете изменить маркер или тип счетчика. Приведу возможные значения для ненумерованного списка.
disc – обычно по умолчанию. Закрашенный кружок.
circle – незакрашенный кружок.
square – закрашенный квадратик.
Т.е., если мы хотим вместо появляющегося по умолчанию закрашенного кружочка увидеть квадратик, пишем:

li {
  list-style-type: square;
}

Точно так же для нумерованного списка по умолчанию применяется значение decimal, т.е. начинается с 1, затем 2, 3 и так далее…
Приведу еще несколько возможных значений:
decimal-leading-zero – начинается с 01, потом идет 02, 03 и так далее. Количеству ведущих нулей может равняться числу значащих цифр. Например 0001 будет показан в списке из например 9999 элементов.
lower-roman – строчные римские цифры.
upper-roman – заглавные римские цифры.
lower-greek – начинается с букв греческого алфавита: альфа, бета, гамма и т.д. (не поддерживается в IE).
hebrew – начинается с традиционного иврита (не поддерживается в IE).
none – как же без этого – маркеры не отображаются.

Ну и еще один маленький совет: браузеры в большинстве случаев изменяют тип маркера при переходе с одного уровня списка на другой. Для того, чтобы этого избежать необходимо менять значение свойства list-style-type в каждом списке-потомке.