Is there a quick method to enhance the spacing between the buttons to give them a more polished and professional appearance without investing four hours of time?

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

My previous attempts on different projects involved manually adjusting button positions and percentages. It was time-consuming and tedious. There has to be a more efficient way to achieve this.

htmlcss

Answer №1

If you're uncertain about the end goal of your project, consider removing absolute positioning from your code and utilizing flex-box or CSS grid for a more flexible and responsive layout. Check out this guide for further insights on using flex-box. Here's a basic example incorporating flex-box to help get you started. Uncomment the /*flex: 1;*/ if you want to space out the links within their 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>
<

Answer №2

Your overuse of absolute position elements is causing issues in your code. To fix this, make sure to set the position to relative on buttons and add margins to each one for proper alignment.

Answer №3

One important thing to grasp is the utilization of HTML style sheets. Instead of embedding style in each element, it’s more advantageous to reserve that for rare exceptions as it can be exceedingly tedious.

To manage formatting for specific elements, utilize "class" and "id", while controlling spacing with "margin" and "padding". This method was effective in HTML4 and continues to work in HTML5.

Mastering these HTML basics is crucial, so make sure to commit them to memory.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying directory contents with JavaScript XHR

When I inquired whether javascript has the ability to list files on the server, the general response was that "javascript cannot access the server filesystem since it is a client-side scripting language". However, I believed this answer was only partially ...

javascripthtmlxmlxmlhttprequestlighttpd

What is the reason for Range.getBoundingClientRect() returning 0 for a range that is inside a textarea

When working with a <textarea> element and creating a range inside it, the following steps are taken: A new range is created using document.createRange() The only child node of the <textarea> is retrieved using textarea.childNodes[0] Range st ...

javascripthtmlcssrangegetboundingclientrect

Using HTML and CSS to Dynamically Alter Cell Text Color Based on Value

Unfortunately, I am unable to find a straightforward solution. My goal is to adjust the text color inside my cell based on its value. Here is a basic table: <table> <tbody> <tr> <td>Quantity</td> <td> ...

jqueryhtmlcsshtml-tablecell

Utilizing the position relative property with Firefox browser

Similar Question: Is Firefox compatible with position: relative on table elements? Check out this example: a full-width menu formatted as a table with ul dropdown menus. Everything works as expected in IE and Opera, but in Firefox the dropdown uls ex ...

cssfirefoxcss-position

Open the .exe file using an HTML link in Firefox browser

While working on a project using php / js / html, I encountered the need to launch a C# application from my web page without requiring any downloads. The challenge was that I primarily use Mozilla Firefox and could only find solutions involving ActiveXOb ...

javascriptphphtmlfirefox

Exploring the world of nested selectors in conjunction with Vue.js CSS modules

Can nested css selectors be used with Vue.js css modules? For example, I am trying to scope this css (to avoid affecting child components): .list { ... .item { ... } } The documentation only provides examples without nesting, but is ...

cssvue.jsmodule

Sending a Form using jQuery and Ajax

Struggling with getting my register page to post the data to the database using Ajax and jQuery. I'm new to ajax and can't quite figure out how to do this insert. Any advice on how to achieve this would be much appreciated. I'm not even sure ...

javascriptphpjqueryhtmlajax

Create an interactive musical experience on a webpage using HTML

I'm a newcomer to web technology and I'm trying to dynamically play a music file using Python Django HTML. I have saved the file location in the database and am fetching it. <audio control><source src= {{track.songlocation}} type="audio ...

htmldjangopython-2.7

Determining when all textures have successfully loaded in Three.js and ensuring there are no lingering black rectangles

I'm currently developing a web platform that allows users to customize and preview 3D house models. If the user's browser doesn't support WebGL, the server renders the house and sends screenshots to the client. However, if the screenshots ar ...

javascripthtmlcanvasopengl-esthree.js

Retrieve the data stored in the HTML input field prior to transferring it to the SQL database

Currently, I have a form where users input latitude and longitude coordinates, which are then used to create markers and send them to the MySQL database. However, I would like to update it so that users can input an address instead. I attempted to use the ...

htmlmysqlservergeolocation

What steps do I need to take to develop a feature similar to Tabzilla?

Exploring the innovative navigation bar on Mozilla.org seems intriguing; commonly referred to as tabzilla, it smoothly moves down to reveal the menu at the top of the page. I wonder if there are any existing libraries or ready-made jQuery code snippets tha ...

jquerycssmozilla

What is the process for creating a hover effect on a button that is triggered when a user hovers over the button's parent container?

Visit this link to view the code My Goal: I want the hover effect that normally applies to buttons when hovered over, to instead be applied when a user hovers over the parent div containing those buttons. The parent divs in question have a class of "ser ...

jquerycss

Disabling Android Back Button with JavaScript

Looking for assistance with my HTML app that includes CSS and Javascript. I successfully implemented a feature using JavaScript to prevent users from pressing the back button, which is working well. However, it doesn't seem to work on Android devices ...

javascriptandroidhtmlandroid-buttononbackpressed

Display a particular frame upon the initial loading of a Lottie animation

I've successfully integrated a lottie animation into my code. On the initial load, I'd like to display a specific frame. When the user hovers over it, I want the animation to start from the beginning and play through in its entirety. Here's ...

htmljsonanimationlottiebodymovin

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

htmlcss

Using HTML5 to overlay text on an image with a hyperlink

I'm interested in adding a hyperlink on top of an image using HTML5. Can you provide some guidance on how to achieve this? Regards, Ravi ...

javascripthtml

Modify the text when clicked on, but do not change the span

I'm currently attempting to change the text within an anchor (<a href=>) element when another element is clicked. The structure of the HTML is as follows: <h1> <a href=""> replace this text <span class="breadcrumb" ...

jqueryhtml

AngularJS allows for the ng-view directive to showcase a dynamic footer element that is positioned outside of its

I am relatively new to using angular.js and I could use some guidance on the best approach to implementing the functionality described in this scenario. My HTML structure consists of a header, sidebar, and content area provided by <div class="container- ...

javascriptcssangularjs

Tips for shifting a stuck div 200px upward once the bottom of the page is reached while scrolling:

I've set up a page layout with two columns, one fixed and the other scrollable. The left column is fixed (containing Google ads) and stays in place as I scroll down the page. The right column displays posts and scrolls along with the rest of the con ...

javascriptjqueryhtmlcssposition

Use CSS to style text when it falls on a "/" within a table

I currently have a table with a row that displays like this: word hi Someword/AnotherWord/LastWord My goal is to use CSS to break the text at the "/" symbol like this: hi<br>Someword<br>/AnotherWord<br>/LastWord However, the curr ...

htmlcss