2017-06-29 15 views
1

すべてのWebページで共通のナビゲーションバーが必要なので、すべてのWebページでHeader.htmlを作成し、<?php include('Includes/Header.html') ?>を使用して各ページの上部にナビゲーションバー/ 。PHPを使用してナビゲーションバーの上に動的Webページのコンテンツが表示される

しかし、動的コンテンツを(PHPを使用して)Webページの本文に追加しようとすると、ページの内容がナビゲーションバー/ヘッダーの「上に」表示され、その理由を理解できません。 Item_List.phpため

<?php 
    session_start(); 
    include('Includes/Header.html'); 
    include('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"; 
} 
?> 

いくつかについてはここで

は、ここで問題があるある Search.phpためのコードがある 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> 

のコードです理由が内容の内部Item_List.phpは、Header.htmlのコンテンツの上にレンダリングされます!私はSearch.phpの底にItem_List.phpの内容を追加しようとしましたが、同じことが起こります。たくさんの改行を加えることはどちらもうまくいかないようです。イメージリンクをクリックすると、私の意図がわかります。申し訳ありませんが、イメージはわずかに不明瞭ですが、「ホーム、検索」などのすぐ上には、ナビゲーションバーの下にレンダリングする必要があるデータ行があります。

Image of Problem

私はとても混乱している助けてください!

答えて

0

はあなたのCSSコードから次の行を削除することによってこれを達成することができます

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

しかし、あなたはあなたのナビゲーションやコンテンツ領域のために使用してセレクタ(クラス、ID)に見たいと思うかもしれません。

+1

ありがとうございます。間違ったCSSほどシンプルで、私は技術的にも頭の上でも何かを期待していたと信じられません。 – HelloWorld

+0

喜んでそれが助けられました:-) – jrn

関連する問題