Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать такую форму / 10 сообщений из 10, страница 1 из 1
17.05.2016, 14:50
    #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, 16:55
    #39237598
Игорь Геворкян
Игорь Геворкян
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать такую форму
ElenaTomsk,

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

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

пришлите пожалуйста HTML-код этой формы
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.05.2016, 10:56
    #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, 15:19
    #39238350
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать такую форму
вопрос по теме от начинающегоПочему блоки 1111111 и 2222222 вышли за пределы своего родителя? (у родителя красная рамка)
Потому, как плавающие элементы не растягивают родителя со стандартным значением overflow...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.05.2016, 15:24
    #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, 16:23
    #39238448
вопрос по теме от начинающего
вопрос по теме от начинающего
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать такую форму
krvsa,

отлично! overflow:hidden; решило проблему.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2016, 15:21
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать такую форму / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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