HTML5 разметка для списка спецификаций - PullRequest
Новая
       15

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

2 голосов
/ 10 марта 2011

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

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

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

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

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

как то так:

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

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

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

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

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

Ответы [ 3 ]

0 голосов
/ 10 марта 2011

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

0 голосов
/ 11 марта 2011

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

  • Вам не нужно устанавливать dl высоту.
  • Каждый дд может быть разным, не фиксированной высоты. 
<!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>
0 голосов
/ 10 марта 2011

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

...