Странная проблема CSS LI

Question

У меня странная проблема с лий, которую я просто не могу понять. У меня есть изображение для содержимого этой страницы, но оно не против текста, а за изображением! Запутался, как решить это. Любая помощь будет принята с благодарностью.

http://staging.liquor.com/wind-at-your-back/

Answer 1

Добавить

overflow: hidden;

до #single_content ul. (overflow: auto тоже будет работать). Если он также должен работать в IE6, убедитесь, что список имеет макет (например, добавив zoom: 1).

Строки внутри блока блока, следующие за плавающей точкой, отталкиваются плавающим элементом. Но сам блок-блок не двигается, сохраняя фоновые изображения по левому краю, покрытые плавающим элементом.

Вы можете запретить блоку перекрывать плавающий элемент, установив новый контекст форматирования блока. Один из способов сделать это - установить свойство overflow. Это заставляет весь список рядом с плавающей точкой, а не просто отодвигает его текст в сторону.

См. раздел спецификации CSS2 о числах с плавающей запятой для получения более подробной информации.

Answer 2

Немедленным решением является добавление следующего правила к #single_content ul

margin: 0 0 0 295px;

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

РЕДАКТИРОВАТЬ 1: Не намного лучше, но вместо этого вы можете добавить следующее правило к элементам li:

background-position: 295px 0;

Answer 3

Чтобы фоновые изображения отображались снаружи изображения, вы можете добавить поле к стилю

добавить

margin:0 0 0 ~300px;

до

#single_content ul li

Answer 4

Фоновые изображения вашего списка находятся за изображением коктейля. Вы можете сделать список с плавающей точкой прямо так:

#single_content ul {
  float:right;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  width:280px;
}

или укажите li s margin-left ширины + поля вашего изображения, например

#single_content ul li {
  background:transparent url(images/ulliarrow.png) no-repeat scroll 0 0;
  margin:0 0 0 310px;
  padding:0 0 3px 15px;
}

чтобы вновь появиться за плавающим изображением.