What is the best way to begin the main page content below the stationary header in order to prevent any overlap with the hyperlink section?

Question

What is the best way to begin the main page content below the stationary header in order to prevent any overlap with the hyperlink section?

I have created this HTML page, but I am facing an issue where the hyperlinked sections overlap with the static header when clicked on. I want all linked sections to appear below the header and each section to have different dimensions within the iframe.

Is there a way to set a fixed starting point for the main content on the page so that all hyperlinked sections start from that point only?

Here is the HTML code snippet:

<html lang="en">
    <head>
    </head>
    <style>

    <!-- Styles for header and menu bars -->

    </style>

    <body>

    <!-- Main content structure with header, menus, and linked sections -->

  </body>
</html>

Illustration of the issue faced: When clicking on link2, instead of appearing just below the static header, it merges with the header section: [Image Link]

Expected behavior: [Image Link]

Similarly, clicking on link3 causes the linked section (link-3) to merge with the header section, resulting in a partial display. [Image Link]

Desired outcome: [Image Link]

Thank you.

html css

Answer 1

Answer №1

I'm having trouble grasping your request, but based on what I understand, I have made some changes to the HTML page

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: sans-serif;
        padding: 0;
        margin: 0;
    }

    .header {
        background-color: #3A332D;
        height: 200px;
        display: flex;
        align-items: center;
        flex-direction: column;

        /*If you want the header to be sticky to top

        position: sticky;
        top: 0;
        
        */
    }

    .header h2 {
        text-align: center;
        margin: 20px auto;
        color: #ffffff;
        text-transform: uppercase;
    }

    ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    ul li {
        margin: 10px 20px;
        list-style: none;
        background-color: #635B53;
        padding: 10px 30px;
        cursor: pointer;
    }

    ul li:hover a {
        color: #ECEF01;
    }

    ul li a {
        color: white;
        text-decoration: none;
    }

    .video__wrapper {
        margin-top: 20px;
    }

    .video {
        width: 560px;
        height: 315px;
        margin: 20px auto;
    }

    iframe {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="header">
        <h2>Result</h2>
        <ul>
            <li><a href="#link1">Link1</a></li>
            <li><a href="#link2">Link2</a></li>
            <li><a href="#link3">Link3</a></li>
        </ul>
    </div>
    <div class="video__wrapper">
        <div class="video" id="link1">
            <iframe src="https://www.youtube.com/embed/KsIDRek_Gmc" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
        <div class="video" id="link2">
            <iframe src="https://www.youtube.com/embed/KsIDRek_Gmc" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
        <div class="video" id="link3">
            <iframe src="https://www.youtube.com/embed/KsIDRek_Gmc" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
    </div>
</body>

</html>

Answer 2

I'm having trouble grasping your request, but based on what I understand, I have made some changes to the HTML page

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: sans-serif;
        padding: 0;
        margin: 0;
    }

    .header {
        background-color: #3A332D;
        height: 200px;
        display: flex;
        align-items: center;
        flex-direction: column;

        /*If you want the header to be sticky to top

        position: sticky;
        top: 0;
        
        */
    }

    .header h2 {
        text-align: center;
        margin: 20px auto;
        color: #ffffff;
        text-transform: uppercase;
    }

    ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    ul li {
        margin: 10px 20px;
        list-style: none;
        background-color: #635B53;
        padding: 10px 30px;
        cursor: pointer;
    }

    ul li:hover a {
        color: #ECEF01;
    }

    ul li a {
        color: white;
        text-decoration: none;
    }

    .video__wrapper {
        margin-top: 20px;
    }

    .video {
        width: 560px;
        height: 315px;
        margin: 20px auto;
    }

    iframe {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="header">
        <h2>Result</h2>
        <ul>
            <li><a href="#link1">Link1</a></li>
            <li><a href="#link2">Link2</a></li>
            <li><a href="#link3">Link3</a></li>
        </ul>
    </div>
    <div class="video__wrapper">
        <div class="video" id="link1">
            <iframe src="https://www.youtube.com/embed/KsIDRek_Gmc" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
        <div class="video" id="link2">
            <iframe src="https://www.youtube.com/embed/KsIDRek_Gmc" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
        <div class="video" id="link3">
            <iframe src="https://www.youtube.com/embed/KsIDRek_Gmc" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
    </div>
</body>

</html>

What is the best way to begin the main page content below the stationary header in order to prevent any overlap with the hyperlink section?

Answer №1

Similar questions

Assign a unique HTML attribute to a child element within a Material-UI component

What is the best way to implement the useCallback hook in Svelte?

Bootstrap dropdown feature automatically rearranges all items in my navigation bar

Is there a way to make text within a Div selectable even if it is positioned behind another Div with a higher z-index?

The pop-up in the navigation bar imported from another source is malfunctioning

Troubleshooting an Issue with CSS Sliding Doors

Personalize the way UIkit tooltips appear

Utilizing ReactJS to fetch data from Material-UI's <TableRow/> component upon selection - a comprehensive guide

Adjust the size of the font based on the screen resolution

CSS3 :target and display:none inconsistency problem in Internet Explorer and Firefox

Select a specific division element using a pseudo element

Eliminate the horizontal scrollbar generated by a certain div

JavaScript form not working on submission

Minimize the gap between col-lg elements in responsive mode within Bootstrap

Looking to extract the hidden value from an HTML input field using Selenium

Eliminate any undefined data in the popup map of Javascript

What steps should I take to execute a unique function the very first time a user scrolls to a specific element?

Linear gradient background issue not functioning properly when transitioning between screens using Next.js

Verifying the accessibility of a website using JQuery/Javascript

A guide to placing tooltips dynamically in highcharts column charts