Xpoint
   [напомнить пароль]

Позиционирование вложенного списка

Метки: [без меток]
[удл]
2004-10-19 23:04:30 [обр] Tanita[досье]
Какое свойство в CSS поможет установить правый край вложенного списка вровень с правым краем внешнего списка, если для левого края вложенного списка задано отрицательное смещение?
спустя 41 минуту [обр] Алексей В. Иванов(9/2861)[досье]
Уф, вот завернули-то.
Вообще-то правые края всегда совпадают (если, ширина, конечно, жестко не задана). Независимо от того, какой margin-left у вложенного списка.
Это легко проверить сделав li { border: 1px solid red; } или li { text-align: right; }
Это при условии, что я правильно "развернул" вопрос.
Что Вы хотите реализовать? Вы уверены, что Вам нужен отрицательный отступ у вложенного списка? Учтите, что отступы для списков все браузеры по-разному интерпретируют.
спустя 2 дня 16 часов [обр] Tanita[досье]
сообщение промодерировано
Вообще-то правые края всегда совпадают
У меня почему-то не совпадают.
Суть такова, что колонка, в которой располагаются списка узкая, а элементы вложенного списка имеют большую длину. Изначально браузер размещал вложенный список со смещением вправо от элементов основного списка; чтобы это побороть я задала отрицательное смещение (и относительное позиционирование). И убедилась, что весь вложенный список (обведенный рамочкой, как было выше предложено, для наглядности) "съезжает" влево, вместе со своим правым краем, растянуть его мне не удается - т.е. цель моя не достигнута, сколько было у меня места для размещения элементов вложенного списка, столько и осталось. Что я не так делаю? :)
спустя 39 минут [обр] Алексей В. Иванов(9/2861)[досье]

Если Вам не нужен отступ, то сделайте нечто вроде:

UL {
    list-style: none;
}
UL, LI {
    margin: 0px;
    padding: 0px;
}

Отрицательный отступ, повторюсь, будет во всех браузерах разный.
По-идеи, после этого будет все работать как надо.

спустя 6 минут [обр] Tanita[досье]
Отступ, действительно, не нужен, или нужен совсем маленький, но вот маркеры списка нужны.
А они пропадают при list-style: none;
спустя 10 минут [обр] Алексей В. Иванов(9/2861)[досье]

Можно маркеры свои изобразить с помощью:

li {
    padding-left: 20px;
    background: transparent url(dot.gif) center left no-repeat;
}

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

спустя 19 минут [обр] Tanita[досье]
Сэнкс! Вот теперь похожде на правду (результат, который вижу на своей странице).
Так, получается, нельзя по собственному усмотрению вложенный список позиционировать(где левый край, где правый)?
Я не говорю о совместимости, пусть уж, хоть в продвинутой версии ИЕ работало бы...
спустя 21 минуту [обр] Tanita[досье]
сообщение промодерировано

Извините, на самом деле, опять не похоже на правду. После

padding-left: 20px;

все вернулось обратно - ненужные отступы у вложенного списка.

спустя 5 часов [обр] Алексей В. Иванов(9/2861)[досье]
То ли мы друг друга не понимаем, то ли одно из двух.
Я проверял на IE6 (WinXP SP2), IE5 (Win98), Mozilla, Opera. Нигде правый край не смещается.
см. предмет моих стараний
спустя 4 дня [обр] Tanita[досье]
сообщение промодерировано

Большое спасибо за пример; он был старательно изучен.
До недавнего времени я не подозревала, что можно так изящно задавать css-свойства фрагментов списка (ul li, ul ul li ecc).
Однако влияние на внешний вид списка параметров margin и padding непонятно мне и сейчас. В Вашем примере все просто, но почему если добавить к

#test1 UL UL LI {
   MARGIN-LEFT: -40px
        }

PADDING-LEFT: 0px (даже ноль пикселов),

то вновь возникает тот отступ слева, с которым я боролась, т.е. все усилия по созданию нужного внешнего вида сводятся на нет?
И почему изменение этого параметра никак на внешний вид не влияет? (Хоть 0рх, хоть 40рх - результат один и тот же, как я понимаю стандартный вид списка)

И если добавить к

#test2 UL UL LI {
   PADDING-LEFT: 30px
   }

MARGIN-LEFT: 0px

отступ для элементов вложенного списка "отменяется" и они выстраиваются в один ряд с элементами основного?

спустя 2 минуты [обр] Tanita[досье]
И можно ли как-то уменьшить расстояние между левым краем страницы и маркером списка?
спустя 1 час [обр] Алексей В. Иванов(9/2861)[досье]

Пробовал сделать все, что Вы сказали. Ничего не двигается ни при padding-left: 0, ни при margin-left: 0, никаких отступов не появляется.
Я до сих пор не могу понять что Вы имеете в виду. Можете скриншот сделать?

На досуге посмотрите, как браузеры понимают один и тот же список, может, на какие мысли наведет. (Список тестировался на =#<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
#=)
Серая рамка - контейнер, куда вложен список.
Синяя рамка вокруг <UL>
Красная, соответственно, вокруг <LI>

спустя 17 часов [обр] Tanita[досье]
Вот что получается у меня
спустя 4 минуты [обр] Алексей В. Иванов(9/2861)[досье]
Похоже, в этом разделе нужен рейтинг для публикации изображений :(
Ссылку можете дать?
спустя 8 минут [обр] Tanita[досье]

Попыталась найти в правилах, какими характеристиками должны обладать прилагаемые изображения - решительно ничего не нашла. Может оно у меня слишком большое (33кб)?

Попробую еще раз.

Ссылку дать не могу :(

спустя 36 минут [обр] Tanita[досье]
спустя 1 час 2 минуты [обр] Алексей В. Иванов(9/2861)[досье]

Мы говорим про

   #test1 ul ul li {
      margin-left: -40px;
      padding-left: 0px;
   }

и

   #test2 ul ul li {
      padding-left: 20px;
      margin-left: 20px;
   }

?
Если да, то у меня все нормально, как подразумевается, так и отображается. Не так, как у Вас на картинке.

спустя 1 час 38 минут [обр] Tanita[досье]

Да, к сожалению, именно об этом мы и говорим... Значит у моего компа индивидуальное восприятие действительности... ну что тут еще сказать... Спасибо Вам за обсуждение!

А можно уменьшить расстояние между левым краем страницы и маркером списка?
А то тоже много места "съедает".

спустя 44 минуты [обр] Алексей В. Иванов(9/2861)[досье]
Вроде, везде одинаково работает:
ul li {
    margin-left: -20px;
}
Powered by POEM™ Engine Copyright © 2002-2005