Question 260446 in Html Question posted in
Some basic documentation can be found here.

Html – Is there any easy way to make the spacing between the buttons look more professional without taking 4 hours?

<!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>

I have tried on other projects to make the buttons closer together manually and testing out different percentages but it took so much time and was so boring, there has to be a better way to do this.

Tags:

2

Answers


  1. 0

    The problem is with you using too many absolute position elements that’s why nearly all your code need to be positioned from the start screen, you need to set the position to relative on the buttons and put margins on each one.

    Login or Signup to reply.
  2. 0

    I’m not sure what your end-goal is with this you need to remove all the absolute positioning from your code and used flex-box or css grid instead. This way you can position items on your page using a flexible and responsive pattern. I would recommend this for further reading. Here is a very basic example of using flex-box with some code to get you started. Uncomment the /*flex: 1;*/ if you want to space the links out within it’s parent element:

    <!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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search