Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
0 / 0 / 2
Регистрация: 26.11.2015
Сообщений: 33

Съезжают поля ввода данных в форме комментариев когда прячу её в блок вкладки

24.01.2016, 00:10. Показов 1269. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Помогите, пожалуйста, уже всё плывёт перед глазами! >_<

Ситуация на скриншотах:
1) Форма комментариев во вкладке.

http://iscr.ru/photo/1453504745_error.png

2) Вне блока.

http://iscr.ru/photo/1453504776_normal.png

Сам код:

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div id="tab_c1">
 
<?php // Do not delete these lines
    if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
        die ('Пожалуйста, не пытайтесь обратиться к файлу напрямую. Спасибо!');
 
    if (!empty($post->post_password)) { // if there's a password
        if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
            ?>
 
            <p class="nocomments">Введите пароль.</p>
 
            <?php
            return;
        }
    }
 
    /* This variable is for alternating comment background */
    $oddcomment = '';
?>
 
<br />
<?php if ($comments) : ?>
 
    <h4 id="comments"><?php comments_number('Пока нет комментариев', 'Есть 1 комментарий', 'Оставлено % комментариев.' );?></h4>
 
    <div class="commentlist alert alert-success">
        <?php wp_list_comments('avatar_size=64'); ?>
    </div>
 
 <?php else : // this is displayed if there are no comments so far ?>
 
    <?php if ('open' == $post->comment_status) : ?>
        <!-- If comments are open, but there are no comments. -->
 
     <?php else : // comments are closed ?>
        <!-- If comments are closed. -->
        <p>Комментарии к этой записи закрыты</p>   
    <?php endif; ?>
<?php endif; ?>
 
 
<?php if ('open' == $post->comment_status) : ?>
<br />
<div id="respond">
<div class="cancel-comment-reply">
    <small><?php cancel_comment_reply_link(); ?></small>
</div>
 
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>Пожалуйста,  <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">зарегистрируйтесь </a> для комментирования.</p>
<?php else : ?>
 
<!--Форма комментариев-->
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" class="form">
 
    <?php if ( $user_ID ) : ?>
    
    <p>Рад видеть вас у себя в гостях, <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Выйти">Выход &raquo;</a></p>
    
    <?php else : ?>
    
    <label>Ваше имя*</label>
    <div class="input-prepend">
        <span class="add-on"><i class="icon-user"></i></span><input type="text" name="author" placeholder="Имя">
    </div>
                        
    <label>Ваш e-mail*</label>
    <div class="input-prepend">
        <span class="add-on"><i class="icon-envelope"></i></span><input type="text" name="email" placeholder="email@gmail.com">
    </div>
                        
    <label>Ваш сайт</label>
    <div class="input-prepend">
        <span class="add-on"><i class="icon-home"></i></span><input type="text" name="url" placeholder="http://сайта.нет">
    </div>
    
    <?php endif; ?>
    
    <textarea id="comment" style="display: none;" name="comment"></textarea>
    
    <label>Текст сообщения</label>
    <textarea id="real-comment" name="real-comment"></textarea>
    
    <?php if( function_exists(checkbot_show) ) { checkbot_show(); } ?>
    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Отправить" class="btn btn-success" />
    <?php comment_id_fields(); ?>
    </p>
    <?php do_action('comment_form', $post->ID); ?>
 
    </form>
    <?php endif; // If registration required and not logged in ?>
    </div>
 
    <?php endif; // if you delete this the sky will fall on your head ?>
</div>
<div id="tab_c2">
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "580", attach: "*"});
</script> 
 
</div>
 
<h3>Оставить отзыв:</h3>
<section class="tabscomment">
        <input id="tab_1" type="radio" name="tab" checked="checked" />
        <input id="tab_2" type="radio" name="tab" />
        <input id="tab_3" type="radio" name="tab" />
        <input id="tab_4" type="radio" name="tab" />
        <label for="tab_1" id="tab_l1"><img src="<?php bloginfo('template_url') ?>/images/social/wordpress.png" alt="Wordpress" />сайт</label>
        <label for="tab_2" id="tab_l2"><img src="<?php bloginfo('template_url') ?>/images/social/vk.png" alt="ВКонтакте" />Контакте</label>
        <label for="tab_3" id="tab_l3"><img src="<?php bloginfo('template_url') ?>/images/social/facebook.png" alt="Facebook" />acebook</label>
        <label for="tab_4" id="tab_l4"><img src="<?php bloginfo('template_url') ?>/images/social/google.png" alt="Google+" />oogle plus</label>
        <div style="clear:both"></div>
        <div class="tabs_cont">     
 
<div id="tab_c3">
    <a rel="nofollow" class="fb-mod" target="_blank" href="https://developers.facebook.com/tools/comments?id=973648436059624">Интерфейс модератора</a>
    <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="10" data-width="580"></div> <!-- data-href="<?php the_permalink(); ?>" -->
</div>
 
<div id="tab_c4">
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <div class="g-comments" 
        data-href="<?php the_permalink(); ?>" 
        data-width="656" 
        data-first_party_property="BLOGGER" 
        data-view_type="FILTERED_POSTMOD"> 
    </div>
</div>
</div>
<!--/tabs_cont-->
 
</section>
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
h3 {
    text-align: center;
}
 
.tabscomment {
    width: 36%;
    position: relative;
    margin: 0 auto;
    padding: 0 0;
}
 
.tabscomment label {
    z-index: 1;
    display: block;
    float: left;
    font-family: Verdana;
    font-weight: bold;
    text-align: center;
    background: #f5f5dc; /* Цвет фона кнопок */
    border-radius: 6px 6px 0 0; /* Радиус закругления кнопок */
    color: #5d7fa3;
    cursor: pointer; /* Вид курсора при наведении на кнопки */
    position: relative;
    top: 5px; /* Высота подъема кнопки при наведении курсора */
    padding: 0 0;
    width: 23%; /* Длинна кнопок */
    margin: 0 1% 0 1%; /* Отступы от кнопок */
}
 
.tabscomment input {
    position:absolute;
    left:-9999px;
} 
 
.tabscomment label:hover {
    font-family:Verdana;
    font-weight:bold;
    background:#E7E1DD;
    top:0;
    -webkit-transition: all 0.2s ease-in-out;
} 
 
 
#tab_1:checked ~ #tab_l1, 
#tab_2:checked ~ #tab_l2, 
#tab_3:checked ~ #tab_l3,
#tab_4:checked ~ #tab_l4 {font-family:Verdana;font-weight:bold;background:#5d7fa3;color:#fffffe;top:0px;} 
.tabs_cont {
    background: #f7f7f7;
    border-radius: 2% 2% 2% 2%;
    padding: 10px 15px;
    position: relative;
    z-index: 2;
    height: 214px;
} 
.tabs_cont > div {position:absolute;left:-9999px;top:0;opacity:0;opacity .45s ease-in-out;} 
#tab_1:checked ~ .tabs_cont #tab_c1, 
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3,
#tab_4:checked ~ .tabs_cont #tab_c4 {
    position: static;
    margin: 0 auto;
    opacity:1;
}
 
.comments-title {background:#577aa2;font-family:verdana;font-weight:bold;color:#fffffe;padding:5px;border-radius:10px 0 10px 0;}
 
.fb-mod {
    font-face:verdana;
    color:#5d7fa3;
    font-size:8pt;
}
a {
    outline: none;
    color: #5d7fa3;
}
a:hover {
    color: #dae2e8;
}
 
#vk_comments {
    margin: 0 auto;
}
 
#plusonecomments {
    margin: 0 auto;
    border: 1px red solid;
}
 
/* Комментарии + форма */
 
    /* Контейнер комментария */
.commentlist {
    padding: 0;
    text-align: justify;
    width: 650px;
    margin: 10px auto;
    display: table;
}
 
.commentlist .comment {
    padding: 5px;
    list-style: none;
    display: block;
}
 
.commentlist .comment .comment {
    margin: 10px 10px 10px 10px;
    padding: 5px;
    width: auto;
}
 
    /* Аватарка, имя */
.comment-author {
    width: 80px;
    float: left;
    text-align: center;
}
 
    /* Имя автора */
.comment-author .fn {
    font-weight: bold;
}
 
    /* двоеточие */
.comment-author .says {
    display: none;
}
 
    /* Сама аватарка тег img */
.avatar {
    width: 60px;
    border-right: 1px solid #dedcdc;
    border-bottom: 1px solid #dedcdc;
    padding: 5px;
    background: #f8f6f6;
}
 
    /* Дата добавления */
.comment-meta {
    width: 83%;
    float: left;
    border-bottom: 1px dashed #84a719;
}
 
    /* Текст комментария */
.commentlist p {
    margin: 15px 0 0px 20px;
    padding-bottom: 10px;
    width: 80%;
    float: left;
    border-bottom: 1px dashed #84a719;
}
 
    /* Кнопка "Ответить" */
.commentlist .reply {
    width: 98%;
    float: left;
    text-align: right;
    padding: 0 0 5px 0;
}
 
    /* Форма отправки комментария */
.form textarea {
    resize: vertical;
    width: 500px;
    height: 150px;
}
Добавлено через 21 час 48 минут
Помогите разобраться, товарищи!
Объясню ещё раз: как только выношу конструкцию за пределы <div id="tab_c1"> всё нормально (как на втором снимке), а внутри такая вот каша.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
24.01.2016, 00:10
Ответы с готовыми решениями:

Поля ввода в форме
Можно ли создать поле ввода ФИО существующее только в форме и не существующие в таблице? И как из него взять данные например с помощью...

На форме разместить поля для ввода данных и поле для вывода результата, кнопку "Выполнить"
Дана длина ребра куба. Наити объем куба и площадь его боковой поверхности

Запрет ввода поля с пустым значением в форме
Коллеги ну очень надо - никак не могу сделать - заклинило в таблице - поле необязательное а в форме надо сделать так чтобы...

4
3 / 3 / 2
Регистрация: 17.11.2014
Сообщений: 92
27.01.2016, 07:40
Это чистый css, как по мне. Попробуй убрать возможность разширять (resize) форму, и настроить правильно стили для размеров.
0
0 / 0 / 2
Регистрация: 26.11.2015
Сообщений: 33
27.01.2016, 11:15  [ТС]
fenster, Убирал, менял, пробовал уже все эти варианты.
0
3 / 3 / 2
Регистрация: 17.11.2014
Сообщений: 92
27.01.2016, 16:20
Цитата Сообщение от HellNHeaven Посмотреть сообщение
fenster, Убирал, менял, пробовал уже все эти варианты.
Эм, кинь сайтик, я гляну. Если найду, как, могу помочь (*)

* Фрилансер - я

Добавлено через 1 минуту
я, кстати. нашел вроде ошибку => относительное позиционирование элементов !
0
0 / 0 / 2
Регистрация: 26.11.2015
Сообщений: 33
29.01.2016, 01:56  [ТС]
fenster, Это ничего не меняет(
Сайт на локалке, выложил в этом посте всё, кроме фото:
Вместо постов отображается чёрт знает что
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
29.01.2016, 01:56
Помогаю со студенческими работами здесь

Настройка поля поиска в форме ввода access
Возможно ли настроить поле поиска так чтобы искал по всем полям таблицы кроме одного оно у меня закрыто для изменений

Интерактивное изменение типа значения поля ввода на форме
Здравствуйте! Подскажите, можно ли программно прописать, чтобы после выбора типа значения в поле списка (на форме) автоматически менялся...

Как очистить поля ввода на форме при её вызове в С++ Builder?
Есть две формы. Одна вызывает другую (на нажатию на кнопку). В второй форме заполняются всякие поля ввода. После этого введённые данные...

Связанные поля со списком в форме: не отображается значение после ввода
Есть три поля со списком Страна,город,улица. Сделал зависимость, и обновление полей. В форме после того как выбираю страну город улице,...

Yii2 Как в форме сделать изначально заполненные поля для ввода?
Добрый день. Подскажите пожалуйста как сделать вывод формы с изначально заполненными полями, чтобы можно было редактировать данные. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm)
8Observer8 30.01.2026
Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru