выравнивание форм

[Zigzag]

плз, подскажите, как правильно средствами CSS выравнять input'ы, чтобу они вертикально в столбик были, а не выравнивались следом за текстом

<form method="post">
****<input type=&#39;&#39; name=&#39;&#39; value=&#39;&#39;>
****Ваше имя *: <input type="text" size="20" name="name" value=""/>

****Ваш e-mail: <input type="text" size="20" name="email" value=""/>

****Тема письма *: <input type="text" size="20" name="" value=""/>

****Текст сообщения *: <textarea cols="70" rows="10" name="message"></textarea>

****<input type="submit" value="" name=&#39;&#39; /><input type="reset" value="очистить" />
****</form>

[Zigzag]

и еще 1 вопросик

есть шаблон полностью на div'ах

.controls {
****background: #f0f2f6;
****border: solid 1px #716f64;
****height: 40px;
****margin: 5px;
}

как выровнять кнопку по высоте посередине?

[null]

1. с помощью тега label, охватывающего элементы формы. где-то статья на эту тему даже была. сейчас не найти, так что ищите сами смысл в том, что label работает также, как td при табличной верстке форм, но разметка выглядит изящней
2. свойство valign (в IE кажестя не работает). может быть поможет input {margin-top: auto; margin-bottom: auto;} попробуйте.

[DareDevil]

[Только зарегистрированные пользователи могут видеть ссылки. ]
Может, будет полезно.

[Zigzag]

всем спасибо, ответы я уже нашел самостоятельно =)

[Zigzag]

да... только вот выровнять кнопки так и не удалось =(
в т.ч. способом, указанным null

[agat]

Попробуйте посмотреть тут [Только зарегистрированные пользователи могут видеть ссылки. ]

[Zigzag]

Ребят, не могу разобраться, помогите, плз. Если я выставляю padding внутри DIV-блока, то почему-то, кроме отступа кнопки от верхнего края, весь блок увеличивается по высоте. В чем проблема?

Вот xhTML
Вот CSS

.controls {
****background: #f0f2f6;
****border: solid 1px #716f64;
****height: 40px;
****margin: 5px;
}
.controls input {
****display: block;
****float: right;
}
.controls h1 {
****display: block;
****float: left;
****font: 20px Verdana, Helvetica, sans-serif;
****font-weight: bold;
****padding: 5px 5px 5px 5px;
}

[null]

возможно в том, что h1 занимает 30px по высоте и если Вы добавляете padding для div.controls, то суммарная высота больше 40px?

[DareDevil]

Если я выставляю padding внутри DIV-блока, то почему-то, кроме отступа кнопки от верхнего края, весь блок увеличивается по высоте.

Так и должно быть.

[Zigzag]

DareDevil
ок, а как же мне тогда выровнять по высоте по центру мои злосчастные кнопки-то?

[DareDevil]

Ну так если известна высота контролса (а она известна) и высота кнопки (она ведь известна?) то можно задать верхни маргин для кнопки. Или вообще абсолютно спозиционировать ее относительно контролса.

[Zigzag]

в общем реализовал я следующим образом все это дело

реализовал следующим образом

<div class="controls">
 * <h1>Название раздела</h1>
 * <input type="button" value="ДОБАВИТЬ" />
 * <input type="button" value="РЕДАКТИРОВАТЬ" />
 * <input type="button" value="ОПУБЛИКОВАТЬ" />
 * <input type="button" value="СОРТИРОВАТЬ" />
 * <input type="button" value="УДАЛИТЬ" />
</div>

.controls {
 * background: #f0f2f6;
 * border: solid 1px #716f64;
 * height: 40px;
 * margin: 5px;
}
.controls input {
 * display: block;
 * float: right;
 * margin-top: 7px;
 * margin-right: 7px;
 * /margin-right: 0px;
 * height: 25px;
 * font: 12px Verdana, Helvetica, sans-serif;
}
.controls h1 {
 * display: block;
 * float: left;
 * font: 20px Verdana, Helvetica, sans-serif;
 * font-weight: bold;
 * padding: 5px 5px 5px 5px;
}

[Zigzag]

хотя, если честно, всеравно, что-то плохо я вникаю в саму суть позиционирования в xHTML =(