Ксдыщь!

Дилетантские заметки про XSLT/XPath, HTML/CSS и всякую фигню

Создаём сложные формы без таблиц. Часть вторая

10 марта 2006 · Комментариев: 9 · HTML/CSS, Рецептарий

В комментариях к предыдущей заметке было справедливо замечено, что не был рассмотрен вариант, когда label’ы располагаются слева от элементов. Исправляем упущение.

Для достижения результата я совместил предыдущую технику и definition list’ы. Код выглядит следующим образом:

fieldset dl dt,
fieldset dl dd {
    margin:.4em 0;
    }
fieldset dl dt {clear:left;}
fieldset dl label {
    float:left;
    width:30%;
    margin-right:1em;
    }
fieldset dl input,
fieldset dl select {
    width:50%;
    }

Не буду приводить html-разметку, она есть в работающем примере. Скажу только, что данный метод не работает в IE 5.0. В нем наши label’ы все так же находятся на строку выше.

Также не работает задуманное мною поведение при большом label’е. В несколько другой разметке поведение весьма корректное, а вот в этой, “оптимизированной”, мне пока не удается его добиться. Видимо, это не последняя заметка по теме форм :)

Теги: ·

Комментариев: 9 ↓

Оставить комментарий