VPF::Горизонтальный ul - Форум программистов

Kremnik

Дата 16.4.2009, 17:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 41
Регистрация: 5.9.2008

Репутация: нет
Всего: нет

Самый распространённый способ создания горизонтального списка - вставить список во float: left, но при этом появляется глюк в IE, т.к. весь список вылезает из флоатнутого блока. Есть какой либо другой способ создания горизонтального списка или устранения этого глюка в IE?

bars80080

Дата 16.4.2009, 17:47 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

это вобще-то не глюк, а стандарт и проявляется он во всех браузерах

для того чтобы блок закрепить, надо по окончанию всех плавающих блоков вставить

Код


<div style="clear: both;"></div>

Kremnik

Дата 16.4.2009, 17:50 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 41
Регистрация: 5.9.2008

Репутация: нет
Всего: нет

Цитата(bars80080 @ 16.4.2009, 17:47)

Код


<div style="clear: both;"></div>

Так таким образом блок уедет вниз, пока не закончатся флоатнутые блоки. А у меня блок вверху страницы.

bars80080

Дата 16.4.2009, 18:06 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

приводите код

Kremnik

Дата 16.4.2009, 18:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 41
Регистрация: 5.9.2008

Репутация: нет
Всего: нет

Грубо это выглядит так:

Код


<div id="top_menu">
<ul>
<li>link_1</li>
<li>link_2</li>
<li>link_3</li>
</ul>
</div>
<div id="left_block">
1234567890
</div>

Код


div#top_menu {
    border: 2px solid #000000;
    overflow: hidden;
}
div#top_menu ul {
    list-style-type: none;
}
div#top_menu ul li {
    float: left;
    margin-left: 7%;
    padding-right: 10px;
}
div#left_block {
float: left;
}

ksnk

Дата 16.4.2009, 18:34 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

решений много, вставить <div style="clear:both;"></div> послу ul'а, или

Код


div#top_menu {
    border: 2px solid #000000;
    overflow: hidden;
    float:left;width:100%; /* добавка */
}

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Kremnik

Дата 16.4.2009, 18:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 41
Регистрация: 5.9.2008

Репутация: нет
Всего: нет

Ок, спасибо большое, приём с флоатом и расширением прошёл успешно.
А могли бы вы объяснить, из-за чего такое происходит? Вроде по правилам вёрстки всё сделано правильно.

ksnk

Дата 16.4.2009, 19:26 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Вот статейка на habrahabre про потоки и float'ы, в частности...

Добавлено через 1 минуту и 42 секунды
точнее - вот smile

Добавлено через 3 минуты и 13 секунд
опять не совсем оно... Где-то там была и статья про float:left + width:100% :-( Не нашел, пока...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »