Question

我想要一个在所有网页上都很常见的导航栏，因此我创建了Header.html并在我的所有网页中使用<?php include('Includes/Header.html') ?>将Nav Bar / Header添加到每个页面的顶部。

但是，当我尝试将动态内容添加到网页正文时（使用PHP）：页面内容显示在＃34;顶部＆＃34;导航条/标题，我无法解决原因。

以下是Header.html

的代码

<!DOCTYPE html>
<head>
    <title>Home</title>
    <style>
        body 
        {
            margin:0;
            background-repeat: no-repeat;
            background-position:center;
            background-attachment:fixed;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: fixed; /* Set the navbar to fixed position */
            top: 0; /* Position the navbar at the top of the page */
            width: 100%; /* Full width */
        }

        li {
            float: left;
            border-right:1px solid #bbb;
        }

        li:last-child {
            border-right: none;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #4CAF50;
        }

        form 
        {
            margin: 0; 
            padding: 12px;
            text-align: center;
            padding-right: 30px;
        }

        form input 
        {
           display: inline; 
        }

        .spacer
        {
            width: 100%;
            height: 95px;
        }

        .answer {
            background-color:   #DCDCDC;
        }

    </style>
</head>
<body>
    <ul>
      <li><a  href="#home">Home</a></li>
      <li><a class="active" href="Search_Found_Items.php">Search Items</a></li>
      <li><a href="Report_Found_Item.php">Report Found Item</a></li>
        <li style="float: right; color: White">
            <?php
                if(isset($_SESSION['email']))
                {
                    echo "{$_SESSION['email']}";
                    echo " ";
                    echo "<a href='Logout.php'>Logout</a>";
                }else{
                    include('Includes/Login_Form.html');
                    echo "<a href='Register.php'>Register</a>";
                }
            ?>
        </li>
    </ul>

以下是问题所在的Search.php的代码：

<?php
    session_start();
    include('Includes/Header.html');
    include('Item_List.php');
 ?>

Item_List.php的代码：

<?php
//connect to the database
try{
  $db = new PDO("mysql:dbname=...;host=localhost", "...", "...");
  $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $rows = $db->query("SELECT Catagory, Colour, Found_Place, Found_Date FROM Item");
  foreach ($rows as $row) {
?>
<div class="item_div">
  <ul>
    <li><?= $row['Catagory'] ?></li>
    <li><?= $row['Found_Place'] ?></li>
    <li><?= $row['Found_Date'] ?></li>
    <li><?= $row['Colour'] ?></li>
  </ul>
</div>
<?php
    }
}catch(Exception $e){
    echo 'Caught exception: ',  $e->getMessage(), "\n";
}
?>

出于某种原因，Item_List.php内的内容会在Header.html的内容之上呈现！我尝试将Item_List.php的内容添加到Search.php的底部，但同样的事情发生了。添加大量换行似乎也无效。你可以点击图片链接看看我的意思。对不起，图片有点不清楚，但就在上面＆＃34; Home，Search＆＃34;等等，有一行数据应该在导航栏下面呈现。

Image of Problem

请帮助我这么困惑!!

Answer 1

您可以通过从css代码中删除以下行来实现此目的：

position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */

但是，您可能希望使用选择器（类，ID）作为导航和内容区域。

动态网页内容使用PHP显示在导航栏的顶部

1 个答案: