Плитка из section по центру(html, css)?
Пытаюсь сделать админ панель. хотел всё сделать красиво но 2 section накладываться друг на друга. Что делать? Может всё заменить на div или как.
Css
body { display: flex; align-items: center; font-family: Arial, Helvetica, sans-serif; background: black; } section { background: black; color: white; border-radius: 1em; padding: 1em; border: 3px solid #fff; position: fixed; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } } |
body { display: flex; align-items: center; font-family: Arial, Helvetica, sans-serif; background: black; } section { background: black; color: white; border-radius: 1em; padding: 1em; border: 3px solid #fff; position: fixed; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } }
html
<section> <h2>Меню</h2> <a href="logout.php"> <button>Выйти</button> </a> </section> <section> <form action="newart.php" method="post"> <p>Название статьи:</p> <input name="nameart"> <p>Текст статьи:</p> <textarea name="text"></textarea> <p>Текст ссылки в меню:</p> <input name="menu"> <input type="submit" value="Добавить статью"> </form> </section> |
<section> <h2>Меню</h2> <a href="logout.php"> <button>Выйти</button> </a> </section> <section> <form action="newart.php" method="post"> <p>Название статьи:</p> <input name="nameart"> <p>Текст статьи:</p> <textarea name="text"></textarea> <p>Текст ссылки в меню:</p> <input name="menu"> <input type="submit" value="Добавить статью"> </form> </section>
Дополнительно:
Я разобрался надо все блоки section ввести в section с класом например main и сделать стиль
css
section { background: black; color: white; border-radius: 1em; padding: 1em; border: 3px solid #fff; /* ����� ����� */ } .menu { top: 0%; left: 100%; } .main { background: black; color: white; border-radius: 1em; padding: 1em; border: 3px solid #fff; /* ����� ����� */ position: fixed; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } } |
section { background: black; color: white; border-radius: 1em; padding: 1em; border: 3px solid #fff; /* ����� ����� */ } .menu { top: 0%; left: 100%; } .main { background: black; color: white; border-radius: 1em; padding: 1em; border: 3px solid #fff; /* ����� ����� */ position: fixed; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } }
html
<section class="main"> <section > <h2>Меню</h2> <a href="logout.php"> <button>Выйти</button> </a> </section> <section> <form action="newart.php" method="post"> <p>Название статьи:</p> <input name="nameart"> <p>Текст статьи:</p> <textarea name="text"></textarea> <p>Текст ссылки в меню:</p> <input name="menu"> <input type="submit" value="Добавить статью"> </form> </section> </section> |
<section class="main"> <section > <h2>Меню</h2> <a href="logout.php"> <button>Выйти</button> </a> </section> <section> <form action="newart.php" method="post"> <p>Название статьи:</p> <input name="nameart"> <p>Текст статьи:</p> <textarea name="text"></textarea> <p>Текст ссылки в меню:</p> <input name="menu"> <input type="submit" value="Добавить статью"> </form> </section> </section>
Результат
- не обращайте внимания на /* ����� ����� */
- 1. <section class="main">
Это не секция в любом случае.
Это либо div, который нужен для группировки не имеющей смысла, либо тег main для основного содержимого страницы.2. <p>Название статьи:</p>
Это не p, это <label>.
Для подписей полей формы используют label и связывают его с инпутом. Во-первых, для скринридеров, во-вторых, чтобы клик по подписи ставил фокус в поле.
https://developer.mozilla.org/en-US/docs/Learn/For...3.
<a href="logout.php"> <button>Выйти</button> </a>
<a href="logout.php"> <button>Выйти</button> </a>
Всегда проверяйте код валидатором https://validator.w3.org/nu/
Кнопки нельзя вкладывать в ссылки. И наоборот нельзя.
Выберите что-то одно. Видимо, в вашем случае ссылку.4. Кнопки удобнее делать тегом button, а не input. Вам же легче будет стилизовать.
Вариант с input работающий но устаревший.И т.д.
- Я использовал section чтобы получить рамку потому что когда я пробовал div рамки не было. а main я не использовал потому что я новичок.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания плитки из элементов
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); justify-content: center; gap: 20px; } section { background-color: #f2f2f2; padding: 20px; text-align: center; }
В этом примере мы создаем контейнер с помощью grid layout, определяем ширину колонок с помощью grid-template-columns. Функция repeat() позволяет повторить шаблон колонок. Функция auto-fit автоматически подстраивает количество колонок в зависимости от ширины экрана, а minmax() задает минимальную и максимальную ширину колонок. Затем мы центрируем контейнер по горизонтали с помощью justify-content: center и добавляем промежуток между элементами с помощью gap.
Далее каждый
Теперь, если вы добавите несколько