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

 
Посетитель
small user social cms
Медаль
Сообщений: 918
Здравствуйте. Что то не могу понять, как растянуть кнопки по размеру окна?

Они вот здесь:
Кнопки html, растянуть по размеру окна.
Выводятся вот так:
Кнопки html, растянуть по размеру окна.

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

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

Код PHP:
  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>
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr, для трех кнопок
используйте ширину в 33.3333%, для каждой кнопки
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr, зачем вы используете таблицу для кнопок?
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr,

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

Код HTML:
  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.  
Код CSS:
  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.  
Редактировалось: 4 раз (Последний: 29 апреля 2019 в 16:06)
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr,
у вас ошибки в коде
Кнопки html, растянуть по размеру окна.
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr,

https://instantcms.ru/forum/thread31656-1.html#310181

будет выглядеть так:
Кнопки html, растянуть по размеру окна.
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Посетитель
small user social cms
Медаль
Сообщений: 918
Red Ray:
Код 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;
}
 
А куда его вставить? Я в html блок вставил и не то что то.
Посетитель
small user social cms
Медаль
Сообщений: 918
Red Ray:
зачем вы используете таблицу для кнопок?
что бы кнопки были в ряд в одном виджете, я их делал в онлайн генераторе кнопопк.
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr:

Red Ray:
Код 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;
}
 
А куда его вставить? Я в html блок вставил и не то что то.

это css код, прописывается в файле стилей .css
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr:

Red Ray:
зачем вы используете таблицу для кнопок?
что бы кнопки были в ряд в одном виджете, я их делал в онлайн генераторе кнопопк.

генератор с ошибкой сгенерировал? у вас открывающих и закрывающих тегах не соответствие.
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr,
Код HTML:
  1.  
  2. <tr>
  3. <td>
  4. <br>
  5. <p class="buttond" style="text-align:center;display: inline-grid;width: 100%;">
  6. <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>
  7. </td>
  8.  
  9. </td> - лишний закрывающий тег
  10. <td>
  11. <br> - зачем здесь перевод строки?
  12. <p class="buttond" style="text-align:center;display: inline-grid;width: 100%;">
  13. <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>
  14. </td>
  15. </td> - лишний закрывающий тег
  16. <td>
  17. <br> - зачем здесь перевод строки?
  18. <p class="buttond" style="text-align:center;display: inline-grid;width: 100%;">
  19. <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>
  20. </td>
  21. </td> - лишний закрывающий тег
  22. <td> - лишний открывающий тег
  23. <br> - зачем здесь перевод строки?
  24. </tr>
  25.  
Редактировалось: 3 раз (Последний: 29 апреля 2019 в 16:41)
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr,

В виджете html вставьте тот код
Код HTML:
  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.  
  15. <div class="button_block">
  16. <a class="button" href="#">ссылка 1</a>
  17. <a class="button" href="#">ссылка 2</a>
  18. <a class="button" href="#">ссылка 3</a>
  19. </div>
  20.  
Редактировалось: 2 раз (Последний: 29 апреля 2019 в 16:44)
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr,

Кнопки html, растянуть по размеру окна.
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
Посетитель
small user social cms
Медаль
Сообщений: 918
Red Ray:
это css код, прописывается в файле стилей .css
прописал, а в мобильном виде кнопки вот так...
Кнопки html, растянуть по размеру окна.

Red Ray:
генератор с ошибкой сгенерировал? у вас открывающих и закрывающих тегах не соответствие.
Ну может быть я потом после редактора немного по изменял под себя zst
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 161
@Aliaksandr, про мобильную версию вы не писали.
Разработка шаблонов для InstantCMS https://red-ray.ru
Шаблоны для InstantCMS 2
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: