ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать такую форму
10 сообщений из 10, страница 1 из 1
Как сделать такую форму
    #39237457
ElenaTomsk
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ElenaTomsk
Гость
Здравствуйте!

Вернее, форму я уже сделала и все в ней хорошо, но когда меняется количество текста, то изменяется и размер рамки и кнопки прыгают.
Можно ли как-то сделать его фиксированным и кнопки разнести по обоим краям текстбокса? Это у меня сделано в плагине для вордпресса, код css взят из wp-note. Хотя бы в чем именно надо углубленней разобраться?

Код: 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.
.txt_main{
  background-color: #E4F6F8;
  background-image: url(images/cat2.png);
    text-align: center;
    width: 70%;
    margin-top:2em;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px 10px;
    -moz-border-radius: 10px 10px;
    -webkit-border-radius: 10px 10px;
    padding: 15px 20px 15px 80px;
    margin: 0px 0px 0px 0px;
    -webkit-box-shadow: 2px 2px 3px #999;
    -moz-box-shadow: 2px 2px 3px #999;
    /*IE min-height hack*/
    min-height:40px;
    height:auto !important;
    height:40px;
    overflow:visible;
    
    position:relative;
    bottom:6px;
    right: 6px;
    border: 1px solid #999999;
    /*Set the position of the background image*/
    background-position: 20px 50%;
    background-repeat: no-repeat;
    text-align: justify;
    /* IE5 hack */
    \margin: 0px 0px -3px 0px;
    ma\rgin:  0px 0px 0px 0px;
}
...
Рейтинг: 0 / 0
17.05.2016, 14:50
| Ответить | Цитировать | Написать  
Как сделать такую форму
    #39237598
Игорь Геворкян
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Игорь Геворкян
Гость
ElenaTomsk,

learn.javascript.ru , htmlbook.ru , htmlbook.ru/
...
Рейтинг: 0 / 0
17.05.2016, 16:55
| Ответить | Цитировать | Написать  
Как сделать такую форму
    #39237688
ElenaTomsk
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ElenaTomsk
Гость
Игорь Геворкян,

Не совсем. Там про то, как управлять текстом, а мой вопрос о том, как сделать рамку как раз фиксированного размера и как сделать кнопки под ней не как сейчас, сплошными, без пробелов между ними, а вразбивку, желательно по углам этой рамки.
Пока насчет кнопок приходит в голову только таблица, но как-то ощущается это неправвильным.
...
Рейтинг: 0 / 0
17.05.2016, 18:03
| Ответить | Цитировать | Написать  
Как сделать такую форму
    #39237874
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ElenaTomsk , сделай, для начала, простой тестовый пример. На нем и покажут варианты решений.
...
Рейтинг: 0 / 0
18.05.2016, 08:53
| Ответить | Цитировать | Написать  
Как сделать такую форму
    #39237926
Vasiliy_Kashkin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vasiliy_Kashkin
Участник
ElenaTomsk,

пришлите пожалуйста HTML-код этой формы
...
Рейтинг: 0 / 0
18.05.2016, 09:46
| Ответить | Цитировать | Написать  
Как сделать такую форму
    #39238017
вопрос по теме от начинающего
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вопрос по теме от начинающего
Гость
Почему блоки 1111111 и 2222222 вышли за пределы своего родителя? (у родителя красная рамка)
Уверен, как-то можно без таблицы, flex, position:absolute сделать резиновость по высоте, и чтобы не выходили за пределы родителя.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<style>
.main {
  width:400px;
  border:1px solid red;
}
.info {
  background: #E4F6F8;
  height:100px; width:400px;
  border:1px solid #ccc;
  border-radius:10px;
}
.le {float:left;}
.ri {float:right;}
</style>
</head>
<body>
<div class="main">
  <div class="info"></div>
  <div class="le">1111111111</div>
  <div class="ri">2222222222</div>
</div>
...
Рейтинг: 0 / 0
18.05.2016, 10:56
| Ответить | Цитировать | Написать  
Как сделать такую форму
    #39238350
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
вопрос по теме от начинающегоПочему блоки 1111111 и 2222222 вышли за пределы своего родителя? (у родителя красная рамка)
Потому, как плавающие элементы не растягивают родителя со стандартным значением overflow...
...
Рейтинг: 0 / 0
18.05.2016, 15:19
| Ответить | Цитировать | Написать  
Как сделать такую форму
    #39238357
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
вопрос по теме от начинающегоПочему блоки 1111111 и 2222222 вышли за пределы своего родителя? (у родителя красная рамка)
Уверен, как-то можно без таблицы, flex, position:absolute сделать резиновость по высоте, и чтобы не выходили за пределы родителя.
Поддержу твою уверенность.
Как вариант...

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.main {
	width: 400px;
	border: 1px solid red;
	overflow: hidden;
}
.info {
	background: #E4F6F8;
	height: 100px; width:400px;
	border: 1px solid #ccc;
	border-radius: 10px;
}
.le {
	float: left;
}
.ri {
	float: right;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="main">
	<div class="info"></div>
	<div class="le">1111111111</div>
	<div class="ri">2222222222</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
18.05.2016, 15:24
| Ответить | Цитировать | Написать  
Как сделать такую форму
    #39238448
вопрос по теме от начинающего
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вопрос по теме от начинающего
Гость
krvsa,

отлично! overflow:hidden; решило проблему.
...
Рейтинг: 0 / 0
18.05.2016, 16:23
| Ответить | Цитировать | Написать  
Как сделать такую форму
    #39239195
ElenaTomsk
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ElenaTomsk
Гость
Vasiliy_Kashkin,

Здравствуйте. Код, это очень громко сказано. Вот этот все, что есть, наши попытки. Это плагин для вордпресса.

$out = '<div class="txt_main">'. $m_text . ' id: ' . $m_id . '</div>';
$out .= '<div><input class="mbutton" type="button" value="Обновить" <button style="width:25%";><input class="mbutton" type="button" <float: left;padding-left: 30%"; value="Новое"></div>';
...
Рейтинг: 0 / 0
19.05.2016, 15:21
| Ответить | Цитировать | Написать  
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать такую форму
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]