XHtml Strict, Float: Центр?

У меня проблемы с Xhtml Strict 1.0 и Css. И у меня почти закончились решения.

URL-адрес моего сайта: http://www.pro-turk.net/beta/

Я сделал многоуровневое выпадающее меню jquery для своего сайта.

Это выглядит нормально, но я использовал свойство встроенного блока атрибута отображения css в меню навигации, которое является частью css 2.1 и не поддерживается некоторыми браузерами (включая ie6 и ie7).

Я хочу сделать элементы #nav > li блочными элементами, но чтобы сделать это и разместить их все в одной строке, единственный способ — использовать float в #nav > li. Но я хочу сосредоточить их на своих родителях (строка меню). Поэтому мне нужно что-то вроде float:center (я знаю, что это довольно глупо и не существует). Но есть ли способ включить элементы уровня блока в качестве дочерних элементов без разрывов строки (я имею в виду без создания элемента уровня блока).

С уважением.


center strict xhtml css-float
person Axel Myers    schedule 06.04.2010    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Я думаю, что в css2 нет решения для этого без использования таблиц.

person Axel Myers    schedule 06.04.2010

arrow_upward
0
arrow_downward

Вы можете сделать li плавающим влево или вправо и сделать само меню центрированным. Сделайте меню шириной суммы его элементов.

#nav
{
    width: 500px;

    /* This will center the block within its container */
    margin-left: auto;
    margin-right: auto;
}

РЕДАКТИРОВАТЬ: Поскольку вы не знаете ширину меню (оно динамическое), мы подходим к тому самому случаю, когда нет альтернативы столам.

<table border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
    <tr>
        <td>Menu item 1</td>
        <td>Menu item 2</td>
        <td>Menu item 3</td>
    <tr>
<table>

P.S. Существует некоторая замена таблиц более новыми расширениями CSS3, такими как display:table | table-cell и т. д., но они пока не имеют широкой поддержки.

person Community    schedule 06.04.2010
comment
Это не работает. ‹ul› — элемент блочного уровня, который заполняет всю строку. Если я сделаю #nav › li float, он просто будет плавать влево (или вправо) в этой строке. Кстати, я не могу указать фиксированную ширину для ‹ul›, потому что меню меняется в зависимости от того, зарегистрирован ли пользователь и т. д. - person Axel Myers; 06.04.2010
comment
Я видел, как вы редактировали, но, как я уже сказал в своей заметке, * я не могу указать фиксированную ширину для #nav, потому что меню меняется в зависимости от того, зарегистрирован ли пользователь / пользователь является администратором, модом и т. д. - person Axel Myers; 06.04.2010
comment
На самом деле это вполне выполнимо без реальных элементов таблицы, используя display: table; для реальных браузеров и особенно неприятный хак для IE. - person Matti Virkkunen; 06.04.2010
comment
Есть ли какой-нибудь хак или что-то для Ie? Мой сайт не поддерживает IE8 ниже, потому что они не поддерживают встроенный блок. Если я должен использовать таблицы для проектирования, почему я использую Xhtml. Кстати, я пытался вызвать hasLayout ie7, но все еще очень глючил. Может быть, я должен просто использовать таблицы... - person Axel Myers; 06.04.2010

arrow_upward
0
arrow_downward

display:inline-block не поддерживается в IE6 или IE7, но вы можете получить тот же эффект в этих браузерах, используя display:inline и гарантируя, что hasLayout установлен для этого элемента, скажем, с помощью zoom:1. Используйте условные комментарии, чтобы направлять разные css только в эти браузеры.

person Alohci    schedule 06.04.2010