Oldboy
С нами с 10.12.99
Сообщения: 1288
Рейтинг: 120
|
 Добавлено: 13/01/09 в 09:41 |
Что-то не соображу, как отцентрировать сабж.
Есть типа обычный список ссылок:
<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;}
Как все вместе это отцентрировать, чтоб и иконки сдвинулись тоже в центр (и при этом все пропорции сохранились)?
Что-то у меня либо центрируется только текст, либо все криво как-то вообще получается и отступы все улетают хз куда 
|
|
|
|
| |
чоткий дезайнер
С нами с 20.07.06
Сообщения: 1782
Рейтинг: 731
|
| Добавлено: 13/01/09 в 09:56 |
наверно так
ul {margin: 0 auto;} - это отцентрирует список в нормальных браузерах,
а для контейнера в котором ul находится {text-align: center} - это отцентрирует список в ИЕ,
и скорее всего добавить
ul li {text-align: left}
|
|
|
|
Дизайн (CJ от 40$, AVS от 80$)
|
4
|
|
| |
Oldboy
С нами с 10.12.99
Сообщения: 1288
Рейтинг: 120
|
| Добавлено: 13/01/09 в 10:47 |
В ИЕ на работает 
|
|
|
|
| |
zza
С нами с 19.10.03
Сообщения: 9911
Рейтинг: 4827
|
| Добавлено: 13/01/09 в 10:53 |
<!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">
вот так сделай
|
|
|
|
| |
чоткий дезайнер
С нами с 20.07.06
Сообщения: 1782
Рейтинг: 731
|
| Добавлено: 13/01/09 в 10:55 |
а если ul li {text-align: left} не указывать?
|
|
|
|
Дизайн (CJ от 40$, AVS от 80$)
|
0
|
|
| |
Oldboy
С нами с 10.12.99
Сообщения: 1288
Рейтинг: 120
|
| Добавлено: 13/01/09 в 11:00 |
Доктайп не помог.
Если ul li {text-align: left} не указывать, то в ИЕ центрируется только текст, а иконки остаются слева.
А не в ИЕ увеличивается отступ от иконок — все сдвигается вправо (кроме bullet'ов).
Если указывать, то все ок везде, кроме ИЕ.
|
|
|
|
| |
чоткий дезайнер
С нами с 20.07.06
Сообщения: 1782
Рейтинг: 731
|
| Добавлено: 13/01/09 в 11:04 |
просто ul (следовательно и li) растягивается на всю ширину контейнера, надо указать фиксированную ширину ul
также лучше сбросить в начале все отступы и границы
* {margin: 0; padding: 0}
так как в разных браузерах по умолчанию отступы и поля могут отличаться
|
|
|
|
Дизайн (CJ от 40$, AVS от 80$)
|
0
|
|
| |
чоткий дезайнер
С нами с 20.07.06
Сообщения: 1782
Рейтинг: 731
|
| Добавлено: 13/01/09 в 11:11 |
вот так вроде работает
* {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;}
|
|
|
|
Дизайн (CJ от 40$, AVS от 80$)
|
0
|
|
| |
Oldboy
С нами с 10.12.99
Сообщения: 1288
Рейтинг: 120
|
| Добавлено: 13/01/09 в 11:23 |
Так работает, но откуда брать точную ширину ul, если ссылки предполагаются разные?
|
|
|
|
| |
чоткий дезайнер
С нами с 20.07.06
Сообщения: 1782
Рейтинг: 731
|
| Добавлено: 13/01/09 в 11:39 |
мне кажется, что если надо чтобы ul с иконками по центру выравнивался, без указания фиксированной ширины не обойтись
|
|
|
|
Дизайн (CJ от 40$, AVS от 80$)
|
0
|
|
| |
чоткий дезайнер
С нами с 20.07.06
Сообщения: 1782
Рейтинг: 731
|
| Добавлено: 13/01/09 в 11:54 |
есть ещё вот такой вариант
* {margin: 0; padding: 0}
body {text-align: center}
ul li {list-style: url(img/icon.gif); padding: 0px 0px 0px 20px;}
но тут иконки не будут выровнены по левому краю, а будут выравниваться в зависимости от ширины ссылки,
и 20 пикселей паддинга слева по-разному считаются в ИЕ и Опере, так что придется паддинг не указывать, а сделать иконку с прозрачным правым полем например
|
|
|
|
Дизайн (CJ от 40$, AVS от 80$)
|
0
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 13/01/09 в 12:30 |
если хочется получить реально ровный список как положено по центру - единственное, на что я набрёл, это заюзать таблицу)
три ячейки, в средней список, крайние прижимают со сторон
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 13/01/09 в 17:06 |
| 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><span></span>Ссылка 1</li>
<li><span></span>Ссылка 2</li>
<li><span></span>Ссылка 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;}
|
где-то так... или я суть вопроса не до конца понял 
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 13/01/09 в 17:41 |
сори, не проверял, но как можно задавать спану такие параметры не объявляя его блочным элементом? если я ничего не путаю, он строчный и твоя высота и проч и проч попросту не сработают.
сдеать его блочным можно,но тогда всё равно мне не приходит в голову его выравнивание, нужное тс.
|
|
|
|
| |
С нами с 11.11.08
Сообщения: 3606
Рейтинг: 402
|
| Добавлено: 13/01/09 в 18:21 |
| Dizman© писал: | | сори, не проверял, но как можно задавать спану такие параметры не объявляя его блочным элементом? если я ничего не путаю, он строчный и твоя высота и проч и проч попросту не сработают. |
сорри, не учел, что флоатить не получится, высота действительно не сработает. При указании position и float высота задается без проблем. Но в данном случаем ТС это действительно не подходит.
Вот рабочий пример, если я правильно понял ТС
|
|
|
|
| |
С нами с 16.01.09
Сообщения: 268
Рейтинг: 384
|
| Добавлено: 16/01/09 в 13:06 |
все реально сделать, при чем легко. если топикстартеру еще нужно, стукни мне в аську, 348-215-379, помогу ;)
|
|
|
|
| |
С нами с 15.03.08
Сообщения: 3501
Рейтинг: 104
|
| Добавлено: 28/01/09 в 09:55 |
|
|
|
|
| |
С нами с 08.03.09
Сообщения: 1
|
| Добавлено: 08/03/09 в 06:17 |
...
|
|
|
|
| |
