Блог panig’а

Я уже писал, что комментарии и форма для добавления комментария в стандартных шаблонах будут одинаковые. Так как комментарии имеют древовидну структуру, то они и форма будут динамичными. Из-за этого было пару небольших проблем, о которых я и хотел рассказать. Почти у всех элементов есть свой стиль, а если и нет, то в css через родителя он задан, опять же почти у всех. Старался избегать коротких названий классов, которые потом бы через родителя назначались. То есть, например, родитель comment, а внутренние классы не просто info, message и replay, а comment-info, comment-message и comment-reply. С отключенным css тоже старлся делать понятным, только не уверен, что это так сильно нужно.

<li class="comment">
    <div class="comment-info">
        <ul>
            <li class="comment-avatar"><img src="img/avatar-img.gif" alt="" /></li>
            <li class="comment-username">гость</li>
            <li class="comment-date">2 июля 2010, 18:34 <a href="#">#</a></li>
            <li class="comment-vote">
                <span class="comment-plus">+15</span>
                <a href="#"><img src="img/plus-icon.png" alt="" /></a><a href="#"><img src="img/minus-icon.png" alt="" /></a>
            </li>
        </ul>
    </div>
    <div class="comment-message">
Возле фонтана прыгали
    </div>
    <div class="comment-reply"><a href="#">Ответить</a></div>
</li>

Каждый комментарий — элемент списка.

<div class="add-comment">
<fieldset>
    <legend>Добавление нового комментария</legend>
    <p>
        <span class="f-input"><input type="text" id="i-login" /></span>
        <span class="f-name"><label for="i-login">Имя</label></span>
    </p>
    <p>
        <span class="f-input"><input type="text" id="i-email" /></span>
        <span class="f-name"><label for="i-email">E-mail</label></span>
    </p>
    <p>
        <span class="f-input"><input type="text" id="i-www" /></span>
        <span class="f-name"><label for="i-www">Сайт</label></span>
    </p>
    <p>
        <span class="f-textarea rounded"><textarea></textarea></span>
    </p>
    <p>
        <span class="f-bottom">
            <span class="f-captcha"><input type="text" /></span>
            <span class="f-captcha-cod"><img src="img/captcha-img.png" alt="" /></span>
            <span class="f-action rounded"><input type="submit" value="Добавить комментарий" /></span>
        </span>
    </p>
</fieldset>
</div>

Как я и писал о формах, их я включаю в тег <span>. Только я писал, что на него можно повесить закругленные уголки, но теперь так делать не буду. Хочется видеть всю форму. Раньше мешало закруглить уголки то, что Opera делала поля прозрачными, а сейчас есть простой способ это убрать, поэтому стало проще. Но была проблема. Форма для сообщения должна занимать всю ширину блока родителя, но т.к. у нее есть отступы, она выходит за ее пределы. Поэтому у нее оформление задано для тега <span> и отступы в том числе, а сама форма занимает все оставшееся место и получается то, что нужно.

Похоже, нужно было сначало про структуру написать, а потом уже про комментарии, ну да ладно, об этом в следующий раз.