CSS задачка

Главные вкладки

Аватар пользователя digital_sword digital_sword 11 марта 2010 в 14:58

http://trm.ruweb.net/node/add/product .

Не понятно, какое поле к какой метке относится. Далеко растягивать поля - не вариант. Как можно подкорректировать так, чтобы и метка, и ее поле "упирались вверх в одну линию"? В общем чтобы ровно были.

Сдается мне, что это vertical-align. Но что-то не получается.

Комментарии

Аватар пользователя brg brg 11 марта 2010 в 15:12

можно попробовать:

#edit-field-ru-nid-nid-wrapper, #edit-field-number-on-ru-value-wrapper, #edit-field-height-rp-0-value-wrapper, #edit-field-width-rp-0-value-wrapper, #edit-field-tall-rp-0-value-wrapper, #edit-field-about-road-value-wrapper, #edit-field-trafficlight-value-wrapper, #edit-field-distance-tl-0-value-wrapper, #edit-field-crossroads-value-wrapper, #edit-field-distance-cr-0-value-wrapper, #edit-field-potok-working-value-wrapper, #edit-field-potok-dayoff-value-wrapper, #edit-field-transport-working-value-wrapper, #edit-field-transport-dayoff-value-wrapper, #edit-field-bus-working-value-wrapper, #edit-field-bus-dayoff-value-wrapper, #edit-field-nap-potok-value-wrapper, #edit-field-vidimost-value-wrapper, #edit-field-pregrada-value-wrapper {
clear: left;
margin-bottom: 10px;
vertical-align: top;
}

Это из своего CSS кусок, нужно добавить clear: left;
Если правильно понял задачу, то будет выглядеть вот так:

Аватар пользователя digital_sword digital_sword 11 марта 2010 в 15:17

Подошло...
margin-bottom:10px;
vertical-align:top;
Уже стояло, все дело в clear:left;... Не догадался бы, спасибо!

Еще одно: эти поля вообще можно разместить красиво так:
[_____] [_____]
[___]     [_______]

?? Ну если метки короче будут. Колонками. Через ccs думаю коряво в разных браузерах будет. или нет?

Аватар пользователя brg brg 11 марта 2010 в 15:22

всмысли что бы селект лист был под лэйблом?
Можно скорее всего, нужно только нечетным блокам ставить float - влево, четным - вправо.
Но при этом ширина блоков должна быть не больше 50% .. и я не помню как там с IE6 Wink По-моему у него 50% + 50% > 100% Biggrin

Аватар пользователя digital_sword digital_sword 11 марта 2010 в 15:55

Спасибо, и чтоб совсем закрыться Smile : поле наличие освещения (там радиокнопки) также как тестовые поля, направо, в ряд как вывести? На .form-item label {float: left} реакция нездоровая.

Аватар пользователя brg brg 11 марта 2010 в 16:16

Все верно, только у тебя .form-item label {float: left; } применяется ещё для кучи блоков, по твоему коду четко выделать именно label для радио группы не очень выходит. JS может помочь или добавить идентификатор или убирать float там, где не нужен.

#edit-field-dop-har-0-value-wrapper{ float: none; } например.