Отступ списка от картинки слева..

gard · July 8, 2010

Здравствуйте!

Есть такая проблема:

Обычно у меня идет картинка, справа от которой заголовок и параграф текста, а тут в параграфе еще и список, маркеры которого налазят на картинку.. попробовал уже margin-left, padding-left.. а ему все равно, как стоял так и стоит.. прошу помощи.

Edited July 8, 2010 by gard

Searcher · July 8, 2010

Вы видимо пробовали эти свойства для img... Попробуйте для списка. Ну и на всякий случай почитайте http://htmlbook.ru/css/list-style-position.html Там при варианте inside маркеры будут в списке, но тогда при переносах строки будут ложится под маркеры. Вобщем все решается комбинациями с отступами для списка.

gard · July 8, 2010

Спасибо за совет, в том месте, на подобие которого я верстаю вообще был не список и строки разделенные <br> получилось что-то типа inside.. А тут до меня дошло, что список очевидно не блочный элемент (?).. я просто честно говоря по CSS только "Шаг за шагом" прочел, книжки читать пока не успеваю.. Дак вот, я просто окантовал список дивом pimgli:

.pimgli {
overflow:hidden;
margin: 0 1em 1em 0;
padding: 0 3px 0 0;
}
.pimgli ul {
padding: 0px 0px 0px 20px;
}

Картинка стала адекватной

Edited July 8, 2010 by gard

Great Rash · July 8, 2010

А все потому, что обнуление отступов вроде:

* {
margin: 0;
padding: 0;
}

не всегда хорошо...

gard · July 8, 2010

Знаю.. но там у меня гораздо больший код CSS.. пока делал все учитывать старался с отступами, все по пикселам до бордюрчиков.. так что оно работает вроде правильно.. правда в режиме совместимости в IE8 менюшка немного видоизменяется и табличка с галереей содержимое влево сдвигает, других багов вроде не замечено..

Игорь Ермаков · July 8, 2010

Спасибо за совет, в том месте, на подобие которого я верстаю вообще был не список и строки разделенные <br> получилось что-то типа inside.. А тут до меня дошло, что список очевидно не блочный элемент (?)

Список - блочный элемент.

Great Rash, почему, кстати? По-моему, при верстке сайтов всегда стоит обнулить все отступы, бордюры, что там еще..

gard · July 9, 2010

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

sigma77 · July 9, 2010

Great Rash, почему, кстати? По-моему, при верстке сайтов всегда стоит обнулить все отступы, бордюры, что там еще..

Потому что при применении универсальный селектор применяется ко всем и может вызвать проблемы в некоторых браузерах. Также при использовании универсального селектора, обнуляются все отступы и поля в формах, которые потом нужно восстанавливать.

Про глобальный сброс тут была тема - Гобальный сброс

Про универсальный селектор можно еще тут почитать.

gard · July 9, 2010

А подскажите знающие люди.. почему такая конструкция не работает:

.pimgli ul, ul.pimgli{
padding: 0px 0px 0px 20px;
}

А такая работает:

.box.visible .pimgli ul, .box.visible ul.pimgli{
padding: 0px 0px 0px 20px;
}

То есть пока я явно не указал во что вложен класс .pimgli оно не работало..

Edited July 9, 2010 by gard

psywalker · July 9, 2010

Скорее всего специфичность виновата. Т.е. добавление лишнего класса поднимает эту специфичность. Надо рыться в стилях.

gard · July 9, 2010

Ну на самом деле список и находится внутри этих дивов (указанны в рабочем варианте), но ведь правило .pimgli ul, ul.pimgli должно применяться (?) везде, независимо от текущего расположения элементов, то есть они могут быть в <body> а могут быть в девятидесяти дивах внутри..

Edited July 9, 2010 by gard

Sign In

Отступ списка от картинки слева..

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information