Простая форма для вывода текста с двумя кнопками

@ElenaTomsk · Регистрация: 11.10.2014

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

Здравствуйте.

Пытаюсь сделать простую форму для вывода в нее текста и две кнопки ниже формы. В общем-то все сделала, но.

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

И с рамкой для текста тоже не все понятно. С одной стороны, я cодрала чужой css: цвет, шрифты. Но объем текста у меня меняется при выводе страницы и вместе с ним изменяется размер рамки, кнопки прыгают.

И как сделать правильно всегда большую, допустим, рамку и в ней текст? Максимальный размер текста я знаю, 2000 символов.

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

HTML5

1	'<div class="txt_main">'. $m_text . '</div>';

И вот так в css, это содрано из плагина WP-Note.

CSS

.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;
}

@Fedor92 · 17.05.2016, 21:45

ElenaTomsk, накидал кое-что, но думаю надо будет допиливать, хотелось бы код увидеть вместе с кодом кнопок... А кнопки естественно будут съезжать поскольку поле ввода текста динамически меняет высоту... Можно задать фиксированную высоту изначально для блока текста и тогда ничего съезжать не будет...

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>buttons</title>
        <meta charset="utf-8">
        <style>
            *{box-sizing:border-box}
            .text_wrap{
                width:70%;
                border:1px solid red;
                overflow:hidden
            }
            .txt_main{
                background-color: #E4F6F8;
                background-image: url(images/cat2.png);
                text-align: center;
                width: 100%;
                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;
                margin:  0px 0px 0px 0px;
            }
            .left{float:left}
            .right{float:right}
        </style>
    </head>
    <body>
    <div class="text_wrap">
        <div class="txt_main">eeeeeeeeeeeeeeee</div>
        <button class="left">Левая кнопка</button>
        <button class="right">Правая кнопка</button>
    </div>
    </body>
</html>

@ElenaTomsk · 18.05.2016, 23:37 **[ТС]**

Здравствуйте. Конечно, я понимаю, что причина такой работы с рамкой именно в том, что текст разный

А как бы вот именно сделать рамку фиксированную?

@Fedor92 · 18.05.2016, 23:43

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

А как бы вот именно сделать рамку фиксированную?

Как бы я уже ответил на данный вопрос:

Можно задать фиксированную высоту изначально для блока текста и тогда ничего съезжать не будет...

Нужен пример кода?

@ElenaTomsk · 19.05.2016, 16:03 **[ТС]**

Если не затруднит, то да.
И еще: вот вы сделали бокс, внутри которого разместился и текст, и кнопки, но это чистый html как я понимаю. А как это будет работать внутри вордпресса, в частности, не поломается ли оно в случае мобильных устройств?
Моя конечная цель, это плагин для вордпресс.

@Fedor92 · 19.05.2016, 16:28

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

Если не затруднит, то да.

Не затруднит...

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>buttons</title>
        <meta charset="utf-8">
        <style>
            *{box-sizing:border-box}
            .text_wrap{
                width:70%;
                height:500px;
                overflow:hidden
            }
            .txt_main{
                background-color: #E4F6F8;
                background-image: url(images/cat2.png);
                text-align: center;
                width: 100%;
                height:inherit;
                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:460px;
                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;
                margin:  0px 0px 0px 0px;
            }
            .left{float:left}
            .right{float:right}
        </style>
    </head>
    <body>
    <div class="text_wrap">
        <div class="txt_main">eeeeeeeeeeeeeeee</div>
        <input type="submit" class="left" value="Левая кнопка">
        <input type="submit" class="right" value="Правая кнопка">
    </div>
    </body>
</html>

Суть заключается в том что текстовое поле изначально имеет определённую высоту, которую необходимо скорректировать для максимального числа символов или же можно оставить 500px и если текст будет больше текстового поля, то сбоку появится полоса вертикальной прокрутки...

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

И еще: вот вы сделали бокс, внутри которого разместился и текст, и кнопки, но это чистый html как я понимаю. А как это будет работать внутри вордпресса, в частности, не поломается ли оно в случае мобильных устройств?

А почему он должен поломаться?

Текстовое поле увеличится по высоте при сужении экрана вот и всё... Кстати, высоту тоже можно задать в процентах для лучшей адаптивности...

@ElenaTomsk · 19.05.2016, 20:26 **[ТС]**

Огромное спасибо вам, именно то, что хотелось, проценты высоте добавила, вообще отлично вышло.

Возникла еще одна мысль. А как бы сделать расстояние между кнопками в зависимости от разрешения экрана? Если мобильные то подальше разнести, экран-то маленький, а если компьютер с высоким разрешением, то поближе. Наверное, как-то можно расстояние там тоже указать в процентах?

@Fedor92 · 19.05.2016, 20:39

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

Возникла еще одна мысль. А как бы сделать расстояние между кнопками в зависимости от разрешения экрана? Если мобильные то подальше разнести, экран-то маленький, а если компьютер с высоким разрешением, то поближе. Наверное, как-то можно расстояние там тоже указать в процентах?

Можно разместить одну кнопку над другой при сужении экрана это будет смотреться эстетично и не надо считать расстояния... К примеру можно попробовать к стилям добавить такой запрос:

CSS

1
2
3

  @media screen and (max-width: 480px) {
    input[type="submit"]{width: 100%; margin-top:2%}
   }

То есть при условии, что максимальная ширина экрана равна 480px ширина кнопок должна быть равной 100% ширины родительского блока, если ширина экрана больше 480px, то кнопки разбегаются по углам... В стилях я обратился к кнопках через селектор, хорошо бы сделать для них общий класс, чтобы не было конфликта с другими элементами...

@ElenaTomsk · 19.05.2016, 22:20 **[ТС]**

Нет, это не красиво. На широком мониторе особенно, здоровая такая кнопка, ужас просто какая здоровая!

@Fedor92 · 19.05.2016, 22:24

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

Нет, это не красиво. На широком мониторе особенно, здоровая такая кнопка, ужас просто какая здоровая!

А причём тут широкий монитор?

Я предложил решение исключительно для экранов <=480px, на остальных экранах кнопки будут по краям... Во полный код:

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>buttons</title>
        <meta charset="utf-8">
        <style>
            *{box-sizing:border-box}
            .text_wrap{
                width:70%;
                height:550px;
                overflow:hidden
            }
            .txt_main{
                background-color: #E4F6F8;
                background-image: url(images/cat2.png);
                text-align: center;
                width: 100%;
                height:inherit;
                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:460px;
                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;
                margin:  0px 0px 0px 0px;
            }
            .left{float:left}
            .right{float:right}
            @media screen and (max-width: 480px) {
                input[type="submit"]{width: 100%; margin-top:2%}
            }
        </style>
    </head>
    <body>
    <div class="text_wrap">
        <div class="txt_main">eeeeeeeeeeeeeeee</div>
        <input type="submit" class="left" value="Левая кнопка">
        <input type="submit" class="right" value="Правая кнопка">
    </div>
    </body>
</html>

Попробуйте заузить окно броузера до 480px увидите, что происходит... Можно даже до 320px переписать медиазапрос...

@ElenaTomsk · 19.05.2016, 23:25 **[ТС]**

Ой, это мои эксперименты были, извините! Ваш код чудесно работает, большое-пребольшое спасибо, именно что нужно!

Простая форма для вывода текста с двумя кнопками

Решение

Решение

@ElenaTomsk 4 / 4 / 0 Регистрация: 11.10.2014 Сообщений: 108
	18.05.2016, 23:37 [ТС]	3
	Здравствуйте. Конечно, я понимаю, что причина такой работы с рамкой именно в том, что текст разный А как бы вот именно сделать рамку фиксированную? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	18.05.2016, 23:43	4
	Сообщение от ElenaTomsk А как бы вот именно сделать рамку фиксированную? Как бы я уже ответил на данный вопрос: Можно задать фиксированную высоту изначально для блока текста и тогда ничего съезжать не будет... Нужен пример кода? 1

@ElenaTomsk 4 / 4 / 0 Регистрация: 11.10.2014 Сообщений: 108
	19.05.2016, 16:03 [ТС]	5
	Если не затруднит, то да. И еще: вот вы сделали бокс, внутри которого разместился и текст, и кнопки, но это чистый html как я понимаю. А как это будет работать внутри вордпресса, в частности, не поломается ли оно в случае мобильных устройств? Моя конечная цель, это плагин для вордпресс. 0

@ElenaTomsk 4 / 4 / 0 Регистрация: 11.10.2014 Сообщений: 108
	19.05.2016, 20:26 [ТС]	7
	Огромное спасибо вам, именно то, что хотелось, проценты высоте добавила, вообще отлично вышло. Возникла еще одна мысль. А как бы сделать расстояние между кнопками в зависимости от разрешения экрана? Если мобильные то подальше разнести, экран-то маленький, а если компьютер с высоким разрешением, то поближе. Наверное, как-то можно расстояние там тоже указать в процентах? 0

@ElenaTomsk 4 / 4 / 0 Регистрация: 11.10.2014 Сообщений: 108
	19.05.2016, 22:20 [ТС]	9
	Нет, это не красиво. На широком мониторе особенно, здоровая такая кнопка, ужас просто какая здоровая! 0

@ElenaTomsk 4 / 4 / 0 Регистрация: 11.10.2014 Сообщений: 108
	19.05.2016, 23:25 [ТС]	11
	Ой, это мои эксперименты были, извините! Ваш код чудесно работает, большое-пребольшое спасибо, именно что нужно! 0