Строгая таблица XHTML с переменной шириной столбца - PullRequest
Новая
       9

Строгая таблица XHTML с переменной шириной столбца

0 голосов
/ 01 октября 2009

Я пытаюсь собрать панель навигации, используя таблицу:

  • Есть n ссылок на различные части сайта
  • Имеется одна ссылка для выхода из системы, представляющая собой значок фиксированного размера

Я хотел бы сделать следующее. Доступная ширина для всей панели (которая известна заранее) за вычетом необходимой ширины иконки должна быть поровну поделена между ячейками, содержащими n ссылок для навигации (без учета размера ссылок внутри, это не проблема)

В настоящее время я выполняю это вычисление на PHP и использую его для достижения этой цели. Однако это не соответствует стандартам XHTML 1.0 Strict. Согласно валидатору W3C, я должен использовать CSS, чтобы установить ширину столбца. Проблема в том, что я не знаю, как это сделать, и возможно ли это вообще. Вероятно, эта проблема - намек на то, что я не должен использовать таблицы для этого, но у меня нет других идей в то время.

Как я могу добиться эффекта, используя таблицы или что-то еще, XHTML Strict и CSS-совместимым способом?

Ответы [ 2 ]

2 голосов
/ 01 октября 2009

Во-первых, ломайте столы. Ваши ссылки не табличные данные.

Основы

Начните с этого:

CSS 

ul.navbar
{
    padding-right: 25px;
    list-style:none;
}
ul.navbar li
{
    margin: 0px;
    padding: 0px;
    border: 0px;
    display: block;
    float: left;
}

ul.navbar li.icon
{
    margin-right: -25px;
    width: 25px;
    float:right
}

HTML 

<ul class="navbar">
    <li>Home</li>
    <li>FAQ</li>
    <li>Contact</li>

    <li class="icon"></li>
</ul>

Равная ширина

Значок li должен касаться правого края. Теперь есть несколько способов достичь равного расстояния. Одним из способов было бы иметь эти классы и применить их к ul с помощью php или jquery:

CSS 

ul.navbar.links1 li
{
    width:100%;
}

ul.navbar.links2 li
{
    width:50%;
}

ul.navbar.links3 li
{
    width:33%;
}

ul.navbar.links4 li
{
    width:25%;
}

ul.navbar.links5 li
{
    width:20%;
}

JQuery 

$(function()
{
    var n = $("ul.navbar").children().length-1;
    //Get the number of links: -1 because of logout
    $("ul.navbar").addClass("links"+n);
});

В качестве альтернативы, вы можете просто изменить ширину с помощью jQuery или PHP. Вам решать. В любом случае, вы должны использовать проценты. 

$(function()
{
    var n = $("ul.navbar").children().length-1;
    //Get the number of links: -1 because of logout
    $("ul.navbar").width((100/n)+"%");
});
1 голос
/ 01 октября 2009

Самый простой способ - разместить ссылки в маленьких коробочках (одинакового размера). Поскольку CSS не имеет возможности производить вычисления, вы все равно должны установить ширину блоков, но с помощью CSS вы можете сделать это один раз. Используйте DIV для коробок. Класс для блоков должен содержать display: inline;, поэтому они ведут себя как слова в тексте (браузер разместит их рядом друг с другом в строке).

После этого вы просто вычисляете ширину каждого блока в PHP и отправляете эту ширину в виде небольшого фрагмента встроенного CSS в заголовке HTML-страницы. Таким образом, все поля будут иметь одинаковую ширину, и все они будут в одной строке.

Пример создания панели навигации с помощью CSS приведен в исходном коде страницы, которую вы сейчас читаете.

...