iRuemu Coding Blog
Creating a Blank HTML Document with Top and Bottom Menus

Photo by Dean Pugh on Unsplash

Creating a Blank HTML Document with Top and Bottom Menus

Ogunuyo Ogheneruemu B's photo
Ogunuyo Ogheneruemu B
·

3 min read

In this tutorial, we will explore how to create a blank HTML document with both top and bottom menus that stay fixed as you scroll through the content. This can be a useful layout for various types of websites, providing a consistent navigation experience for your visitors.

Getting Started

To start, we'll create a basic HTML structure. You can use this as a foundation for your webpage.

<!DOCTYPE html>
<html>
<head>
    <title>Blank HTML Document</title>
    <style>
        /* CSS styles go here */
    </style>
</head>
<body>
    <div class="top-menu">
        <h1>Top Menu</h1>
    </div>

    <div class="content">
        <!-- Content goes here -->

        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>


        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>


        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>


        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>


        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>


        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>


        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>



        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>


        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>


        <h2>Welcome to My Website</h2>
        <p>This is an example of a blank HTML document with top and bottom menus. You can customize the content of this page as needed.</p>

    </div>

    <div class="bottom-menu">
        <h1>Bottom Menu</h1>
    </div>
</body>
</html>

Styling the Menus

We've added two menus, one at the top and another at the bottom. Let's style them using CSS.

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

.top-menu {
    background-color: red;
    color: white;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
}

.bottom-menu {
    background-color: #333;
    color: white;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.content {
    padding: 20px;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

Adding Content

We've left a placeholder for your content inside the .content div. You can replace this with your actual content, such as text, images, videos, or any other HTML elements.

Conclusion

In this tutorial, we've learned how to create a blank HTML document with fixed top and bottom menus. This layout provides a sleek and modern navigation experience for your website visitors. You can customize the styling and content to match your website's theme and purpose.

Feel free to experiment with different styles and content to make it your own.

HTML5CSSmenutopmenubottommenu