Есть ли простой способ сделать расстояние между кнопками более профессиональным, не тратя на это 4 часа?

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Puggy Adventure Website</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body style = "background-color: rgb(237, 227, 227);">
    <header>
        <section>
            <h1 style = "position:absolute; display: flex; top: 0%; left: 2%; color:rgb(182, 21, 185); font-style: italic;"><strong>Puggy Adventures</strong></h1>
        </section>
    </header>
    <div class = "navigationBar" style = "background-color: rgb(123, 120, 123); height: 50px;">
        <section>
            <button class = "homeButton" style = "position: absolute; display: flex; left: 20%; top: 3.5%;"><strong>Home</strong></button>
        </section>
        <section>
            <button class = "newsButton" style = "position: absolute; display: flex; left: 30%; top: 3.5%;"><strong>News</strong></button>
        </section>
        <section>
            <button id = "supportButton" style = "position: absolute; display: flex; left: 40%; top: 3.5%;"><strong>Support</strong></button>
        </section>
        <section>
            <button id = "aboutButton" style = "position: absolute; display: flex; left: 50%; top:3.5%;"><strong>About</strong></button>
        </section>
    </div>
    <main>
        <img src = "" id = "featuredImage" style = " position: absolute; display: flex; height: 200px; width: auto; left: 20%; top: 40%;">
        <section>
            <h2>Storyline</h2>
        </section>
        <section>
            <p style = "position: absolute; display: flex; top: 40%; left: 45%; text-align: center;"><strong>The Puggy Adventure offers a school-friendly experince which is designed to keep you entertained for hours! Our team of professionals with google slides know how to make you have the best experince possible while playing our game! This year the puggy adventure is mostly in 1st person POV! along with some 3D models being injected into the game.</strong></p>
        </section>
        <section>
            <iframe width = "220" height = "200" src = "https://www.youtube.com/embed/VJEVxYyTFRI" ?autoplay=1 frameborder = "0" style = "left:0%; top: 40%; position: absolute; display: flex;"></iframe>
        </section>
    </main>
    <script src = "index.js"></script>
</body>
</html>

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

Кнопки не предназначены для ссылок?

— 07.10.2023 16:59

html css web

07.10.2023 16:40

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

07.10.2023 16:55

Ответ принят как подходящий

Я не уверен, какова ваша конечная цель, но вам нужно удалить все абсолютное позиционирование из вашего кода и вместо этого использовать flex-box или css-сетку . Таким образом, вы можете размещать элементы на своей странице, используя гибкий и адаптивный шаблон. Я бы рекомендовал это для дальнейшего чтения. Вот очень простой пример использования flex-box с некоторым кодом для начала. Раскомментируйте /*flex: 1;*/, если вы хотите разместить ссылки внутри родительского элемента:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Puggy Adventure Website</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <style>
        body{
            background-color: rgb(237, 227, 227);
        }
        header{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            background-color: rgb(31 31 31);
        }
        h1{
            color:rgb(182, 21, 185);
            font-style: italic;
            padding: 0 2rem;
        }
        nav{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            /*flex: 1;*/
        }
        nav > a{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.5rem 2rem;
            font-size: 1rem;
            text-decoration: none;
            color:rgb(222, 222, 222);
            font-family: sans-serif;
            transition: all ease-in 0.2s;
        }
        nav > a:hover{
            color: rgb(240 40 240);
        }
        #featuredImage{
            height: 200px; width: auto;
        }
        main{
            display: flex;
            flex-direction: column;
            align-content: center;
            margin: 1rem 2rem
        }
        main section{
            display: flex;
            flex-direction: row;
            justify-content: center;
            background: rgb(220, 213, 213);
            border-radius: 4px;
            margin: 0.25rem;
            padding: 1rem;
        }
        .multi-section div{
            padding: 1rem;
            background: rgb(228, 228, 228);
            margin: 0.25rem;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<header>
    <h1><strong>Puggy Adventures</strong></h1>
    <nav>
        <a href = "/home">Home</a>
        <a href = "/news">News</a>
        <a href = "/support">Support</a>
        <a href = "/about">About</a>
    </nav>
</header>
<main>
    <section>
        <h2>Storyline</h2>
    </section>
    <section class = "multi-section">
        <div>
            <img src = "https://ichef.bbci.co.uk/news/976/cpsprodpb/17638/production/_124800859_gettyimages-817514614.jpg.webp" id = "featuredImage">
        </div>
        <div>
            <p><strong>The Puggy Adventure offers a school-friendly experince which is designed to keep you entertained for hours! Our team of professionals with google slides know how to make you have the best experince possible while playing our game! This year the puggy adventure is mostly in 1st person POV! along with some 3D models being injected into the game.</strong></p>
        </div>
    </section>
    <section>
        <iframe src = "https://www.youtube.com/embed/VJEVxYyTFRI"></iframe>
    </section>
</main>
<script src = "index.js"></script>
</body>
</html>

07.10.2023 18:10

Вкратце, вам нужно научиться использовать таблицы стилей HTML. (Встраивание стилей в каждый элемент должно быть зарезервировано для редких исключений, и, как вы обнаружили, это исключительно утомительно.)

Вы будете использовать «класс» и «id» для форматирования определенного набора элементов и использовать «поля» и «отступы» для управления интервалами. Это работало еще в HTML4 и до сих пор работает в HTML5.

Это основы HTML, поэтому я рекомендую вам вбить это в голову.

07.10.2023 19:20