Центрирование списка (ul)

Тема: Центрирование списка (ul)

цитата
13/01/09 в 09:41

Yakuza
Что-то не соображу, как отцентрировать сабж.

Есть типа обычный список ссылок:
<ul>
<li>Ссылка 1</li>
<li>Ссылка 2</li>
<li>Ссылка 3</li>
</ul>

Со своими иконками типа:
ul li {background: url(img/icon.gif) no-repeat left; margin: 0px; padding: 0px 0px 0px 20px;}

Как все вместе это отцентрировать, чтоб и иконки сдвинулись тоже в центр (и при этом все пропорции сохранились)?

Что-то у меня либо центрируется только текст, либо все криво как-то вообще получается и отступы все улетают хз куда

цитата
13/01/09 в 09:56

Petek
наверно так

ul {margin: 0 auto;} - это отцентрирует список в нормальных браузерах,

а для контейнера в котором ul находится {text-align: center} - это отцентрирует список в ИЕ,
и скорее всего добавить
ul li {text-align: left}

цитата
13/01/09 в 10:47

Yakuza
В ИЕ на работает

цитата
13/01/09 в 10:53

3Sky
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

вот так сделай

цитата
13/01/09 в 10:55

Petek
а если ul li {text-align: left} не указывать?

цитата
13/01/09 в 11:00

Yakuza
Доктайп не помог.

Если ul li {text-align: left} не указывать, то в ИЕ центрируется только текст, а иконки остаются слева.
А не в ИЕ увеличивается отступ от иконок — все сдвигается вправо (кроме bullet'ов).

Если указывать, то все ок везде, кроме ИЕ.

цитата
13/01/09 в 11:04

Petek
просто ul (следовательно и li) растягивается на всю ширину контейнера, надо указать фиксированную ширину ul

также лучше сбросить в начале все отступы и границы
* {margin: 0; padding: 0}
так как в разных браузерах по умолчанию отступы и поля могут отличаться

цитата
13/01/09 в 11:11

Petek
вот так вроде работает

* {margin: 0; padding: 0}
body {text-align: center}
ul li {width: 400px; text-align: left; background: url(1.gif) no-repeat left; margin: 0 auto; padding: 0px 0px 0px 20px;}

цитата
13/01/09 в 11:23

Yakuza
Так работает, но откуда брать точную ширину ul, если ссылки предполагаются разные?

цитата
13/01/09 в 11:39

Petek
мне кажется, что если надо чтобы ul с иконками по центру выравнивался, без указания фиксированной ширины не обойтись

цитата
13/01/09 в 11:54

Petek
есть ещё вот такой вариант
* {margin: 0; padding: 0}
body {text-align: center}
ul li {list-style: url(img/icon.gif); padding: 0px 0px 0px 20px;}

но тут иконки не будут выровнены по левому краю, а будут выравниваться в зависимости от ширины ссылки,
и 20 пикселей паддинга слева по-разному считаются в ИЕ и Опере, так что придется паддинг не указывать, а сделать иконку с прозрачным правым полем например

цитата
13/01/09 в 12:30

erobrand
если хочется получить реально ровный список как положено по центру - единственное, на что я набрёл, это заюзать таблицу)

три ячейки, в средней список, крайние прижимают со сторон

цитата
13/01/09 в 17:06

pinnokio
Yakuza писал:

Что-то не соображу, как отцентрировать сабж.

Есть типа обычный список ссылок:
<ul>
<li>Ссылка 1</li>
<li>Ссылка 2</li>
<li>Ссылка 3</li>
</ul>

Со своими иконками типа:
ul li {background: url(img/icon.gif) no-repeat left; margin: 0px; padding: 0px 0px 0px 20px;}

Как все вместе это отцентрировать, чтоб и иконки сдвинулись тоже в центр (и при этом все пропорции сохранились)?

имеешь ввиду, что иконка должна быть слева (или справа) сразу около пункта?
Докладывай иконки спанами, по типу:
<ul>
<li>Ссылка 1</li>
<li>Ссылка 2</li>
<li>Ссылка 3</li>
</ul>
Где спам со следующим классом:
Код:

.icon{
width:12px;
height:12px;
float:left;
margin:0;
padding:0;
background:url(путь/рисунок)left center no-repeat;
}

если же нужна центрированная иконка под пунктами списка, то в твоей конструкции:

Код:

ul li {background: url(img/icon.gif) no-repeat top center; margin: 0px; padding: 0px 0px 0px 20px;}

где-то так... или я суть вопроса не до конца понял

цитата
13/01/09 в 17:41

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

сдеать его блочным можно,но тогда всё равно мне не приходит в голову его выравнивание, нужное тс.

цитата
13/01/09 в 18:21

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

сорри, не учел, что флоатить не получится, высота действительно не сработает. При указании position и float высота задается без проблем. Но в данном случаем ТС это действительно не подходит.
Вот рабочий пример, если я правильно понял ТС

цитата
16/01/09 в 13:06

hardy
все реально сделать, при чем легко. если топикстартеру еще нужно, стукни мне в аську, 348-215-379, помогу ;)

цитата
28/01/09 в 09:55

Suono Libero
Еще вариант с примером от pinnokio.
http://www.suono.me/temp/6/

цитата
08/03/09 в 06:17

Anton.l
...

Новая тема Ответить

Эта страница в полной версии