I'm working on a PHP page that showcases a company telephone list. At the top of the page, there are option buttons for adding and removing entries, with the data displayed below.
However, when a user scrolls down the page, the buttons move out of view and become inaccessible. Is there a way to keep these items fixed at the top of the page even when scrolling?
EDIT: I attempted using position: fixed, but it caused overlap issues with my database information display. Am I missing something in my implementation?
Here's the code snippet:
<center>
<html>
<head>
<style>
.menu {
position: fixed;
height: 0px;
top: 0;
left: 0;
width: 100%;
}
</style>
<title>Extension List</title></head><body>
<br>
<div class="menu">
<h1> Alpine Motors VW Extension List</h1>
<h2> Tel: 031 717 7800</h2>
<h2><a href="add.php">Add Extension</a>
<br>
<br>
<form action="AlpineExtensionList.php" method='post'>
<input type="submit" value="Print PDF"/>
<br>
<br>
<a href="delete.php"> Delete Extension</a></h2>
</div>
<br>
<br>
<?php
The rest of the code handles linking to the database and displaying the data. The challenge lies in ensuring that the content between the div remains fixed at the top as users scroll down the page.