Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. HTML / CSS / PHP / JS / RegExp
  5. Кнопки html, растянуть по размеру окна.

Кнопки html, растянуть по размеру окна.

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X
#1 29 апреля 2019 в 14:54
Здравствуйте. Что то не могу понять, как растянуть кнопки по размеру окна?

Они вот здесь:

Выводятся вот так:


А надо что бы было по размеру окна — виждета + что бы между кнопками были разрывы, не слипшиеся бока кнопок, немного отступ друг от друга.

Подскажите пожалуйста как сделать, вот html код который я использую:

  1. <table>
  2. 	<tr>
  3. 		<td><br>
  4. <p class="buttond" style="text-align:center;display: inline-grid;width: 100%;">
  5.     <a href="https://ссылка.html" target="_self" style="cursor: pointer; font-size:14px; text-decoration: none; padding:10px 20px; color:#222223; background-color:rgba(255, 255, 255, .4); border-radius:5px; border: 2px solid #222223;">Кто мы?</a></td></td>
  6. 		<td><br>
  7. <p class="buttond" style="text-align:center;display: inline-grid;width: 100%;">
  8.     <a href="https://ссылка.html" target="_self" style="cursor: pointer; font-size:14px; text-decoration: none; padding:10px 20px; color:#222223; background-color:rgba(255, 255, 255, .4); border-radius:5px; border: 2px solid #222223;">Что мы делаем?</a></td></td>
  9. 		<td><br>
  10. <p class="buttond" style="text-align:center;display: inline-grid;width: 100%;">
  11.     <a href="https://ссылка.html" target="_self" style="cursor: pointer; font-size:14px; text-decoration: none; padding:10px 20px; color:#222223; background-color:rgba(255, 255, 255, .4); border-radius:5px; border: 2px solid #222223;">Поддержать</a></td></td>
  12. 		<td><br>
  13. 	</tr>
  14. </table>
0
#2 29 апреля 2019 в 15:44
@Aliaksandr, для трех кнопок
используйте ширину в 33.3333%, для каждой кнопки
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#3 29 апреля 2019 в 15:47
@Aliaksandr, зачем вы используете таблицу для кнопок?
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#4 29 апреля 2019 в 15:57
@Aliaksandr,

без таблиц, 3 ссылки

  1.  
  2. <div class="button_block">

  3.    <a class="button" href="#">ссылка 1</a>

  4.    <a class="button" href="#">ссылка 2</a>

  5.    <a class="button" href="#">ссылка 3</a>

  6. </div>

  7.  
  1.  
  2. .button {
  3.     color: #337ab7;
  4.     background: #f7f7f7;
  5.     margin: 0 5px;
  6.     padding: 5px;
  7.     border: 1px solid #337ab7;
  8.     border-radius: 3px;
  9.     width: 32.2222%;
  10.     display: block;
  11.     float: left;
  12.     text-align: center;
  13. }
  14.  
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#5 29 апреля 2019 в 16:05
@Aliaksandr,
у вас ошибки в коде
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#6 29 апреля 2019 в 16:10
@Aliaksandr,

/forum/thread31656-1.html#310181

будет выглядеть так:
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#7 29 апреля 2019 в 16:33

Код CSS:
 
.button {
color: #337ab7;
background: #f7f7f7;
margin: 0 5px;
padding: 5px;
border: 1px solid #337ab7;
border-radius: 3px;
width: 32.2222%;
display: block;
float: left;
text-align: center;
}
 

Red Ray
А куда его вставить? Я в html блок вставил и не то что то.
0
#8 29 апреля 2019 в 16:34

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

Red Ray
что бы кнопки были в ряд в одном виджете, я их делал в онлайн генераторе кнопопк.
0
#9 29 апреля 2019 в 16:35


Код CSS:
 
.button {
color: #337ab7;
background: #f7f7f7;
margin: 0 5px;
padding: 5px;
border: 1px solid #337ab7;
border-radius: 3px;
width: 32.2222%;
display: block;
float: left;
text-align: center;
}
 

Red Ray
А куда его вставить? Я в html блок вставил и не то что то.

@Aliaksandr

это css код, прописывается в файле стилей .css
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#10 29 апреля 2019 в 16:37


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

Red Ray
что бы кнопки были в ряд в одном виджете, я их делал в онлайн генераторе кнопопк.

@Aliaksandr

генератор с ошибкой сгенерировал? у вас открывающих и закрывающих тегах не соответствие.
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#11 29 апреля 2019 в 16:40
@Aliaksandr, 
  1.  
  2. <table>

  3. 	<tr>

  4. 		<td>

  5. 		<br>

  6. <p class="buttond" style="text-align:center;display: inline-grid;width: 100%;">

  7.     <a href="https://ссылка.html" target="_self" style="cursor: pointer; font-size:14px; text-decoration: none; padding:10px 20px; color:#222223; background-color:rgba(255, 255, 255, .4); border-radius:5px; border: 2px solid #222223;">Кто мы?</a>

  8. 	</td>

  9.  
  10. 	</td> - лишний закрывающий тег

  11. 		<td>

  12. 		<br> - зачем здесь перевод строки?

  13. <p class="buttond" style="text-align:center;display: inline-grid;width: 100%;">

  14.     <a href="https://ссылка.html" target="_self" style="cursor: pointer; font-size:14px; text-decoration: none; padding:10px 20px; color:#222223; background-color:rgba(255, 255, 255, .4); border-radius:5px; border: 2px solid #222223;">Что мы делаем?</a>

  15. 	</td>

  16. 	</td> - лишний закрывающий тег

  17. 		<td>

  18. 		<br> - зачем здесь перевод строки?

  19. <p class="buttond" style="text-align:center;display: inline-grid;width: 100%;">

  20.     <a href="https://ссылка.html" target="_self" style="cursor: pointer; font-size:14px; text-decoration: none; padding:10px 20px; color:#222223; background-color:rgba(255, 255, 255, .4); border-radius:5px; border: 2px solid #222223;">Поддержать</a>

  21. 	</td>

  22. 	</td> - лишний закрывающий тег

  23. 		<td> - лишний открывающий тег

  24. 		<br> - зачем здесь перевод строки?

  25. 	</tr>

  26. </table>

  27.  
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#12 29 апреля 2019 в 16:43
@Aliaksandr,

В виджете html вставьте тот код
  1.  
  2. <style>

  3.     .button {

  4. color: #337ab7;

  5. background: #f7f7f7;

  6. margin: 0 5px;

  7. padding: 5px;

  8. border: 1px solid #337ab7;

  9. border-radius: 3px;

  10. width: 32.2222%;

  11. display: block;

  12. float: left;

  13. text-align: center;

  14. }

  15. </style>

  16.  
  17. <div class="button_block">

  18.    <a class="button" href="#">ссылка 1</a>

  19.    <a class="button" href="#">ссылка 2</a>

  20.    <a class="button" href="#">ссылка 3</a>

  21. </div>

  22.  
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#13 29 апреля 2019 в 16:45
@Aliaksandr,

https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#14 29 апреля 2019 в 16:49

это css код, прописывается в файле стилей .css

Red Ray
прописал, а в мобильном виде кнопки вот так...


генератор с ошибкой сгенерировал? у вас открывающих и закрывающих тегах не соответствие.

Red Ray
Ну может быть я потом после редактора немного по изменял под себя zst
0
#15 29 апреля 2019 в 16:58
@Aliaksandr, про мобильную версию вы не писали.
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
Как убрать фото в новости?
Кнопки html

Похожие темы

Кнопки html

HTML / CSS / PHP / JS / RegExp Создана 4 года назад 12 сообщений

[ЕСТЬ РЕШЕНИЕ] Иконка в странице как изменить размер

Типы контента / статьи / страницы Создана 11 месяцев назад 5 сообщений

[ЕСТЬ РЕШЕНИЕ] Картинки разного размера

Виджеты, компоненты, плагины, модули Создана 5 месяцев назад 3 сообщения

Кнопки поделится, соц сети для instant 2

Разработка и тестирование Создана 4 года назад 3 сообщения

Пропала вверху кнопка редактировать

Релизы 2.X Создана 4 года назад 4 сообщения

Глупый вопрос(продолжение): Кнопки "Сохранить" в backend

Разработка дополнений Создана 3 года назад 11 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.