Расположение поля ввода комментариев

Question

Как правильно указать поле ввода под тремя перечисленными характеристиками?

Характеристики:

-Всегда 30 пикселей с левой стороны окна браузера.

- Всегда на 30 пикселей ниже слова «Добавить комментарий», если комментарии не были добавлены.

-Всегда на 30 пикселей ниже предыдущего комментария, если был добавлен один или несколько комментариев.

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

John

HTML / PHP код:

<div class="addacomment"><label for="title">Add a comment:</label></div> 
    <div class="commentbox"><input class="commentsubfield" name="title" type="title" id="title" maxlength="1000"></div> 

CSS (таким образом, у меня нет объявлений для селектора "commentbox"):

.commentsubfield { width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; }   
.addacomment
    {
    position:absolute;
    width:250px;
    left:30px;
    top:180px;
    text-align: left;
    margin-bottom:3px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#000000;
    }   

Answer 1

Во-первых, вам не нужны эти <div> с. Вы можете просто добавить class="addacomment" к ярлыку.

Итак, вы получили это:

<label class="addacomment" for="title">Add a comment:</label>
<?php print $your_comments_if_any; ?> 
<input class="commentsubfield" name="title" type="title" id="title" maxlength="1000">

Я не уверен, какой DOCTYPE вы используете, но вы поняли. Теперь для CSS:

Если вы хотите расположить что-либо относительно страницы, рекомендуется помнить о полях страницы. Принимая значение по умолчанию, вы захотите установить любые поля или отступы на 0:

html, body {
   margin: 0;
   padding: 0;
   }

Теперь позиционирование, которое вы сделали на .addacomment, в основном не дает вам получить желаемый результат. Я убрал ненужные вещи для ясности:

.addacomment {
    display: block; /* override the default inline display */
    margin-left: 30px; /* The 30px from the left you wanted */
    }

Далее .commentsubfield нужны только поля, добавленные к нему:

.commentsubfield {
    margin: 30px 0 30px 30px;
    [your other styles]
    }

Это должно дать вам следующий результат (это фактический снимок экрана с Opera 10.10 OSX), хотя отделение метки от ее поля довольно странно:

пример позиционирования элемента формы http://img.skitch.com/20100329-pbyj117655wig4pfh8estxw9me.jpg

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

Надеюсь, я правильно понял ваш вопрос, и надеюсь, что это поможет.