Плитка из section по центру(html, css)?

Question

[stasbombit]

Пытаюсь сделать админ панель. хотел всё сделать красиво но 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%) }
    }

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>

Answer 1

[stasbombit]

Я разобрался надо все блоки 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%) }
    }

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>

Результат

Comments

[stasbombit]

не обращайте внимания на /* ����� ����� */

[Ankhena]

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>

Всегда проверяйте код валидатором https://validator.w3.org/nu/
Кнопки нельзя вкладывать в ссылки. И наоборот нельзя.
Выберите что-то одно. Видимо, в вашем случае ссылку.

4. Кнопки удобнее делать тегом button, а не input. Вам же легче будет стилизовать.
Вариант с input работающий но устаревший.

И т.д.

[stasbombit]

Я использовал section чтобы получить рамку потому что когда я пробовал div рамки не было. а main я не использовал потому что я новичок.