Как правильно сверстать страницу добавления отзывов (комментариев)?

@Slava-hacker32 · Регистрация: 16.11.2011

Студворк — интернет-сервис помощи студентам

Здравствуйте. Я пока что только учусь нормальной верстки.
Есть макет в PSD. Страница для добавления комментариев. Я не знаю как ее правильно сверстать.
В моем понимании это строка таблицы с двумя ячейками, одна для аватарки, а вторая для самого комментария. И по поводу верстки верхней части, как ее правильно сделать? Через таблицу, где первая строка отводится под кнопки соц сетей, а как с остальным? Через обычные блоки или продолжать табличку?

@Padimanskas · 09.11.2013, 05:15

Сообщение от Slava-hacker32

В моем понимании это строка таблицы с двумя ячейками, одна для аватарки, а вторая для самого комментария.

А в моем понимании, комментарий это текст упакованный в LI списочного элемента UL. И, только картинка слева - это псевдоэлемент :before, с свойством content: "", притворившийся блоком

@Slava-hacker32 · 19.11.2013, 03:02 **[ТС]**

Помогите сделать процесс добавления комментариев. Не нужно их сохранять в файл, в базу. Просто при заполнении формы и клику по кнопке этот текст появлялся ниже, с нужным форматом.

Вот мое подобие верстки страницы. Все держится на соплях. К форме где вводится текст сообщения я аватарку прикрутил. А как теперь этот шаблон использовать в JavaScript, что бы по этому шаблону оформлялись комментарии?

п.с. может есть пример верстки страницы комментариев или отзывов? В нете полным полно примеров верстки главной страницы сайта, а этой не встречал.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="CSS/style.css" type="text/css" />
    
</head>
 
<body>
 
<div class="wrapper">
 
    <div class="header">
    
       <div class="button" > 
        <div id="facebook">
        
        <img src="Image/faceBook.jpg" alt="facebook" width="105" height="31" /></div>
        <div id="twitter"><img src="Image/twitter.jpg" alt="twitter" width="137" height="33" /></div>
        <div id="mailru"><img src="Image/mailRu.jpg" alt="mail" width="137" height="33" /></div>
        <div id="odnoklas"><img src="Image/OdnoClass.jpg" alt="Odnoklasniki" width="150" height="33" /></div>
        <div id="vk"><img src="Image/VK.jpg" alt="Vkontakte" width="137" height="33" /></div>
        </div>
        
        <div class="post">
        
       ПОСТ БЫЛ ПОЛЕЗЕН? ЖМИТЕ "МНЕ НРАВИТЬСЯ"
        
        </div>
        
        <p id="comm">
        Комментарии (53):
        </p>
        
        <p id="allComent">
        Все комментарии
        </p>
         
    </div><!-- .header-->
<hr />
    <div class="content">
    
        
        <ul>
        
        <li>
  <form>
        
        <p><a href="#">zvezdalina</a> </p>
        <p> Добавлено: 20.10.2013 </p>
        <p> Добавить комментарий: </p>
        
        <div class="areaTextBox">
        <p > 
                <textarea  wrap="virtual" maxlength="100" id="TextKomenta">Текст сообщения</textarea>
        </p>
        </div>
        
        <p class="btnWrite">
            <input type="image" src="Image/Button.jpg" id="BtnWrite" />
            <br />
           </p>  
         <hr id="hr-com" /> 
       
      
        </li>
      
  </form>
        
        </ul>
   
    </div><!-- .content-->
 
</div><!-- .wrapper -->
 
<div class="footer">
    <strong>Footer:</strong> 
   
</div><!-- .footer -->
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    font: 12px/18px Arial, sans-serif;
    width: 100%;
    height: 100%;
}
.wrapper {
    width: 915px;
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
 
 
/* Header
-----------------------------------------------------------------------------*/
.header {
    height: 160px;
    background: #FFE680;
}
/*.button{ border: solid 2px red; background: white; }*/
#facebook,#twitter,#mailru,#odnoklas,#vk{ float:left; margin-right: 20px; margin-top: 35px;  }
#facebook{margin-left: 100px;}
#vk{clear: right;}
 
.post{background-image: url(../Image/postLike.jpg); width: 356px; height: 36px; margin-top: 10px; border: solid 2px blue; clear: both; text-align: center; margin: 0 auto;}
#comm,#allComent{float:left; width: 417px; margin: 20px; }
#allComent{text-align: right; }
 
 
/* Content
-----------------------------------------------------------------------------*/
.content {
    padding: 0 0 90px; height: 794px;
    background: yellowgreen;
    padding-left: 40px; padding-top: 20px;
}
ul:before{content: url(../Image/ava.jpg); float: left; padding-right: 10px;}
ul{list-style: none;}
#TextKomenta{width: 770px;height: 80px;}
.btnWrite{float: right; margin-right: 45px; margin-top: 30px;}
.areaTextBox{margin: 0 auto; width: 770px; height: 80px;padding-left: 10px; padding-top: 15px; }
#hr-com{width: 770px; margin-top: 110px;}
 
 
/* Footer
-----------------------------------------------------------------------------*/
.footer {
    width: 915px;
    margin: -90px auto 0;
    height: 90px;
    background: #BFF08E;
    position: relative;
}

Добавлено через 45 минут
Вообщем как создавать новый элемент списка я разобрался. Я вот только не могу понять как их оформлять. Нужно что бы были строки:
логин
Дата добавления
количество комментариев.
Текст.
Горизонтальная линия.
У меня только текст из TextArea и маркер списка (он же аватарка)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
      var ul = document.createElement('ul');
  document.body.appendChild(ul);
 
  
    var data = document.getElementById('TextKomenta').value;
 
   
 
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(data));
    ul.appendChild(li);
 }

@Padimanskas · 19.11.2013, 03:31

Slava-hacker32, используйте jQuery вместо этой кучи нативного кода.
код страницы:

HTML5
1
<ul></ul>

оформим элементы

CSS
1
2
3
.prettyNiceLi{
 ...something
}

JavaScript
1
2
3
4
5
6
7
8
9
10
/*
    Найдем элемент UL
*/
 
var ul = $('ul'); 
/* 
    Добавим в найденный UL новый LI и установим ему стиль оформления из правила prettyNiceLi
*/
 
$('<li />').addClass('prettyNiceLi').appendTo(ul);

@rpsv · 19.11.2013, 06:46

Сообщение от Padimanskas

используйте jQuery вместо этой кучи нативного кода.

Зачем грузить ВСЮ библиотеку ради 2-3 функций?? Верстальщики хоть иногда сами пальцами шевелят?

@Padimanskas · 19.11.2013, 14:46

Сообщение от rpsv

Зачем грузить ВСЮ библиотеку ради 2-3 функций??

Можно собрать свою версию jQuery из необходимых частей. Например: http://projects.jga.me/jquery-builder/

Сообщение от rpsv

Верстальщики хоть иногда сами пальцами шевелят?

You mean i'm "Верстальщик"?

@rpsv · 20.11.2013, 06:54

Не по теме:

Сообщение от Padimanskas

You mean i'm "Верстальщик"?

А разве нет?))

Добавлено через 9 минут
Padimanskas, кстати если собирать библиотеку, там все равно хламчик: 40.59 Kb (MIN) / 113.15 Kb - для версии 2.0.3

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@Slava-hacker32 7 / 7 / 2 Регистрация: 16.11.2011 Сообщений: 251

	Как правильно сверстать страницу добавления отзывов (комментариев)? 09.11.2013, 03:44. Показов 6616. Ответов 6 Метки нет (Все метки) Здравствуйте. Я пока что только учусь нормальной верстки. Есть макет в PSD. Страница для добавления комментариев. Я не знаю как ее правильно сверстать. В моем понимании это строка таблицы с двумя ячейками, одна для аватарки, а вторая для самого комментария. И по поводу верстки верхней части, как ее правильно сделать? Через таблицу, где первая строка отводится под кнопки соц сетей, а как с остальным? Через обычные блоки или продолжать табличку? Миниатюры 0