Разметка HTML5 для списка спецификаций

Я немного пытаюсь понять, какой будет правильная разметка для следующей информации.

это будет список спецификаций для вина:

  • почва: почва представляет собой смесь известняка и глины...
  • наименование: ул. Эмилион
  • площади под виноградниками: 7,3 га
  • grape varieties:
    • merlot: 50%
    • каберне фран: 50%
  • выдержка: выдерживается в новых дубовых бочках в течение 24 месяцев.
  • top vintages:
    • 1929
    • ...
    • 2009
  • диаграмма стоимости погреба изменена: <img src="..."/>

Итак, сначала я подумал: было бы неплохо, если бы каждый из элементов был section в рамках спецификаций section, но потом оказалось, что это не раздел, потому что он в основном состоит из key:value пар.

Поэтому я заменил список определений <dl>, в котором будут некоторые термины определений и несколько элементов с более чем одним определением. Это выглядит хорошо в разметке, но нет никакого способа правильно стилизовать это, если вам нужен элемент block/flow для поиска одного из определений и размещения их рядом.

что-то вроде этого:

как должны отображаться элементы

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

Так что, возможно, таблица? ... ну, я немного сбит с толку после этого множества доступных вариантов, тот, который заставляет меня чувствовать себя более комфортно, но все же альтернатива sub-sections, но я не уверен, что это будет хорошая разметка, так как впечатление У меня есть разделы, которые в некоторых случаях будут включать больше контента, чем просто одну строку.

Если бы кто-то мог помочь здесь, как заставить его работать с чистой разметкой, но в то же время учитывать доступность, было бы здорово :)

заранее спасибо


list html format markup specifications
person zanona    schedule 10.03.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Хорошо, теперь я понимаю ваши проблемы. Я не знаю, будет ли этого достаточно для ваших нужд, но мне удалось добиться такого результата (работает с FF/Chrome/IE8):

Проблемы с моим подходом:

  1. вам нужно вручную установить высоту dl
  2. горизонтальные правила негибкие и привязаны к dts (однако вы можете обойти это, правильно используя поля и отступы;
  3. если вам нужна разная высота для каждой из этих строк, вам нужно назначить классы css по крайней мере одному из тегов dt в каждой строке (см. Нижний конец сообщения).

Как видите, моя разметка предельно проста. Однако css не так уж и много. Кроме того, этот подход выполнен в минималистичном стиле и не очень гибкий (обратите внимание, что я не использую поля/отступы, чтобы он выглядел лучше):

dl.winelist {
background-color: #fdd;
width: 600px;
height: 452px; /* 3 * 150px boxes + 2 * 1px border */
border: 1px solid #000;
}

dl.winelist dt {
width: 200px; /* definition for normal boxes */
height: 150px;
float: left;
font-weight: bold;
background-color: #070;
margin: 0;
border-top: 1px solid #000;
}

dl.winelist dt:first-child {
border-top: 0 /* only show those lines <i>between</i> the boxes */
}

dl.winelist dd {
font-style: italic;
background-color: #770;
margin: 30px 0 0; /* dd gets positioned 30px below the origin of dt */
width: 200px;
float: left;
margin-left: -200px; /* could combine that with margin statement above */
}

dl.winelist dt.triple {
width: 600px;
}

dl.winelist dt.triple + dd {
width: 600px;
margin-left: -600px;
}

dl.winelist ul {
list-style: none; /* you can freely style the ul, it won't actually break anything */
margin: 0;
padding: 0;
}

Если вы не хотите использовать класс triple для почвы, вы можете даже использовать :first-child вместо .triple.

Если вы можете назначить класс каждому из элементов <dt> (например, наименованию, району), у вас могут быть разные значения высоты для каждой из строк (однако удалите высоту из dl.winelist dt:

dt.appelation, dt.aging {
clear: left;
}

dt.soil {
height: 150px;
}

dt.appelation {
height: 120px;
}

dt.aging {
height: 240px;
}

Совершенно другой подход заключается в использовании position: relative в dl и позиционировании элементов absolutely в зависимости от их соответствующего класса.

person dialer    schedule 10.03.2011
comment
Вау, спасибо @dialer, я никогда раньше так не думал, это действительно хорошая реализация, спасибо за ваши усилия. Просто совет, поскольку кажется, что вы новичок в SO: вы можете редактировать свои ответы и добавлять к ним дополнительные сведения вместо создания другого ответа, это немного облегчает, когда вам нужно проверить ответ как правильный :) - person zanona; 10.03.2011

arrow_upward
0
arrow_downward

Наиболее локальным был бы список определений с дополнительными меньшими списками внутри тегов <dd> для «сортов винограда» и «лучших урожаев». Однако вы заявили, что у вас проблемы со стилем. Если бы вы могли предоставить больше информации о том, как именно вы хотите оформить его, и почему вы не можете сделать это с помощью CSS, люди могли бы помочь вам с этим.

person dialer    schedule 10.03.2011
comment
спасибо @dialer, да, мне это кажется логичным, я только что обновил пост с изображением, чтобы его было легче понять, спасибо за совет :) - person zanona; 10.03.2011

arrow_upward
0
arrow_downward

Это слайд-модификация решения @дилера.

  • Вам не нужно устанавливать высоту dl.
  • Каждый dd может быть разной, а не фиксированной высоты.
<!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">
<head>
    <title>Информация за вино</title>

    <style type="text/css">
    .wine-description
    {
        font-family: sans-serif;
        font-size: 12px;
        background-color: #efece7;

        width: 600px;
        padding: 5px 20px 10px;
    }

    .wine-description:after
    {
        clear: both;
        height: 0;
        display: block;
        visibility: hidden;
        content: ".";
    }

    .wine-description dt
    {
        color: #908f8c;

        font-size: 120%;
        font-weight: bold;
        text-transform: uppercase;

        float:left;
        width: 200px;

        padding: 5px 0;
        border-top: 1px solid #fff;
    }

    .wine-description dt.wine-soil
    {
        border-top-width: 0px;
        width: 100%;
    }

    .wine-description dd
    {
        color: #98676d;

        float: left;
        width: 195px; /* +5px padding-right = 200px; */

        margin: 30px 0 0 -200px;
        padding: 0 5px 25px 0;
    }

    .wine-description dt.wine-soil + dd
    {
        margin: 0 0 10px;
        width: 100%;
    }

    .clear
    {
        clear: left;
    }
    </style>
</head>

<body>
    <dl class="wine-description">
        <dt class="wine-soil">Soil</dt>
        <dd>The soil is a mixture of limestone and clay, becoming sandier on the lower reaches where the grapes exhibit slidhtly lower accidity.</dd>

        <dd class="clear">&nbsp;</dd>

        <dt>Apellation</dt>
        <dd>St. Emillion</dd>

        <dt>Area under vine</dt>
        <dd>7.3 Hectares</dd>

        <dt>Anual production</dt>
        <dd>2200 Cases per annum</dd>

        <dd class="clear">&nbsp;</dd>

        <dt>Grape vrieties</dt>
        <dd>Merlot (50%)<br />Cabernet Franc (50%)</dd>

        <dt>Ageing</dt>
        <dd>Aged in new oak barrels for 24-27 months</dd>

        <dt>Top vintages</dt>
        <dd>1929, 1979, 1982, 1995, 1996, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006</dd>
    </dl>
</body>
</html>
person Stanislav Stoyanov    schedule 11.03.2011