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

плз, подскажите, как правильно средствами 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>

---

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

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

Код:

---

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

---

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

1. с помощью тега label, охватывающего элементы формы. где-то статья на эту тему даже была. сейчас не найти, так что ищите сами [Only registered and activated users can see links. Click Here To Register...] смысл в том, что label работает также, как td при табличной верстке форм, но разметка выглядит изящней
2. свойство valign (в IE кажестя не работает). может быть поможет input {margin-top: auto; margin-bottom: auto;} попробуйте.

[Only registered and activated users can see links. Click Here To Register...]
Может, будет полезно.

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

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

Попробуйте посмотреть тут [Only registered and activated users can see links. Click Here To Register...]

Ребят, не могу разобраться, помогите, плз. Если я выставляю 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;
}

---

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

Цитата:

---

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

---

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

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

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

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

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

Код:

---

<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;
}

---

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