2016-04-29 26 views
-1

画像に問題があります。色付きの背景の代わりに使用したいです。navbar内のブートストラップ画像

しかし、それは何らかの理由で私に平凡な白い背景を与えます。

私はエラーを見つけることができませんでしたが、私はまだ試みます。私はまだHTML、CSS & PHPを正しく学習しているので、誰かがこの問題で私を助けてくれることを願っています!

CODE:

<?php 
 
// CSS Fil: 
 

 

 

 

 

 
?> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Jquery css --> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
 

 
<!-- Fontawesome.io CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
<style> 
 
\t html { 
 
\t position: relative; 
 
\t min-height: 100%; 
 
\t } 
 
\t body { 
 
\t /* Margin bottom by footer height */ 
 
\t margin-bottom: 60px; 
 
\t } 
 
\t .footer { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t width: 100%; 
 
\t /* Set the fixed height of the footer here */ 
 
\t height: 60px; 
 
\t background-color: #f5f5f5; 
 
\t } 
 
\t 
 

 
\t 
 
\t body { 
 
    background-image: url("images/vortrex-bg.png"); 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
\t } 
 
\t 
 
\t .footer { 
 
\t \t background: none; 
 
     padding: 20px; 
 
\t } 
 
\t .footer-p { 
 
\t \t color: black; 
 
\t \t 
 
\t } 
 
\t .footer-link { 
 
\t \t color: red; 
 
\t } 
 
\t .footer-link:hover { 
 
\t \t text-decoration: none; 
 
\t \t color: darkred; 
 
\t } 
 
\t .navbar-default { 
 
\t \t background-image: url(../images/128-198.png); 
 
     border-radius: 10px; 
 
     border: solid; 
 
\t } 
 
\t .navbar-default .navbar-nav > li > a { 
 
\t \t color: black; 
 
\t \t text-align: center; 
 
\t } 
 
\t 
 
\t .navbar-default .navbar-nav > li > a:hover { 
 
    color: darkgrey; 
 
\t } 
 
\t 
 
\t .navbar-default .navbar-nav > li > a:focus { 
 
\t color: none; 
 
\t } 
 
\t 
 
\t .navbar-default .navbar-nav .active > a, 
 
\t .navbar-default .navbar-nav .active > a:hover { 
 
\t \t color: black; 
 
\t \t background: darkgrey !important; 
 
\t } 
 
\t .img-circle { 
 
\t margin: -7px; 
 
\t } \t \t 
 
    .side-box-right { 
 
     margin: 10px; 
 
     padding: 10px; 
 
     margin-top: 100px; 
 
     float: right; 
 
     border: solid; 
 
     border-color: black; 
 
     border-radius: 10px; 
 
     background-image: url(../images/128-198.jpg); 
 
     
 
    } 
 
    .side-box-left { 
 
     margin: 10px; 
 
     padding: 10px; 
 
     margin-top: 100px; 
 
     float: right; 
 
     border: solid; 
 
     border-color: black; 
 
     border-radius: 10px; 
 
     background: darkgrey; 
 
    } 
 
    .nyheder { 
 
     border: solid; 
 
     background: darkgrey; 
 
     border-radius: 10px; 
 
    } 
 

 
</style>
<?php include('config/setup.php'); ?> 
 
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <?php include('config/css.php'); ?> 
 
\t \t <?php include('config/js.php'); ?> 
 
\t \t 
 
\t \t <title>Home | Vortrex</title> 
 
\t \t \t 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="container"> 
 
     <div class="row"> 
 
\t \t \t <div class="col-md-2"> 
 
\t \t \t \t <div class="side-box-left"> 
 
\t \t \t \t \t Teamspeak3 Class 
 
\t \t \t \t <?php 
 
\t \t \t \t /* \t try 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t // show server as online 
 
\t \t \t \t \t echo "Server Status: online<br />\n"; 
 
\t \t \t \t \t echo "Server IP: " . $ts3->getAdapterHost() . ":" . $ts3->virtualserver_port . "<br />\n"; 
 
\t \t \t \t \t echo "Server Name: " . $ts3->virtualserver_name . "<br />\n"; 
 
\t \t \t \t \t echo "Server Uptime: " . TeamSpeak3_Helper_Convert::seconds($ts3->virtualserver_uptime) . "<br />\n"; 
 
\t \t \t \t \t echo "Server Version: " . TeamSpeak3_Helper_Convert::version($ts3->virtualserver_version) . "<br />\n"; 
 
\t \t \t \t \t echo "Current Clients: " . $ts3->virtualserver_clientsonline . "/" . $ts3->virtualserver_maxclients . "<br />\n"; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t catch(Exception $e) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t // grab errors and show server as offline 
 
\t \t \t \t \t echo "Server Status: offline<br />\n"; 
 
\t \t \t \t \t } */ 
 
\t \t \t \t ?> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t <!-- RIGHT HERE --> \t 
 
      <div class="col-md-8"> \t 
 
\t \t \t \t <nav class="navbar navbar-default" role="navigation"> 
 
\t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t <div class="navbar-header"><a class="navbar-brand" href="#"><img class="img-circle" alt="Brand" src="images/logo.png" height="32" width="32"></a></div> 
 
\t \t \t \t \t \t <li class="active"><a href="index.php">Home</a></li> 
 
\t \t \t \t \t \t <li><a href="statistik.php">Statistikker</a></li> 
 
\t \t \t \t \t \t <li><a href="/forum">Forum</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Kontakt</a></li> 
 
         <li><a href="shop.php">Shop</a></li> 
 
         <li><a href="bans/index.php">Ban List</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </nav><!-- Slutningen af navbaren --> 
 
\t \t \t \t \t 
 
\t \t \t \t <div class="nyheder"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <!-- Overskrift på forsiden! --> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <h1 align="center">Velkommen til Vortrex</h1> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <!-- Overskrift på forsiden! --> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <!-- I mellen <p> og </p> skrives hvad der skal stå på forsiden! --> 
 
\t \t \t \t \t <br> 
 
\t \t \t \t \t <br> 
 
\t \t \t \t \t <h3 align="center">Nyheder</h1> 
 
\t \t \t \t \t <p align="center"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <?php #SKRIV HERUNDER! ?> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t 
 
         
 
         
 
\t \t \t \t \t \t <?php #SKRIV HEROVER! ?> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t \t <!-- I mellen <p> og </p> skrives hvad der skal stå på forsiden! --> 
 
\t \t \t 
 
       </div> 
 
\t \t \t \t \t \t 
 
\t \t </div> 
 
\t \t <div class="col-md-2"> 
 
\t \t \t <div class="side-box-right"> 
 
\t \t \t <?php 
 
\t \t \t 
 
\t \t \t $q = "SELECT * FROM server"; 
 
\t \t \t $r = mysqli_query($dbc, $q); 
 
\t \t \t \t 
 
\t \t \t \t if($r) { 
 
\t \t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t \t while ($rows = mysqli_fetch_assoc($r)) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t $online = $rows['online']; 
 
\t \t \t \t \t $status = $rows['status']; 
 
\t \t \t \t \t  
 
         
 
\t \t \t \t \t \t if($status == "Online") { 
 
          echo "<h3 align='center'><font color='green'>$status</font><br>$online/200</h3>"; 
 
          echo "<h4><strong>mc.vortrex.dk</strong></h4>"; 
 
          } else { 
 
          echo "<h3 align='center'><font color='red'>$status</font></h3>"; 
 
          echo "<h4><strong>mc.vortrex.dk</strong></h4>"; 
 
          } 
 
         } 
 
         } else { 
 
         echo "<h2>Der skette en fejl der gjorde serverens status ikke kunne vises!</h2>"; 
 
         echo "<br>"; 
 
         echo "<h4>Kontakt et staff medlem!"; 
 

 
         } 
 

 
         ?> 
 

 
\t \t \t </div> 
 
\t \t </div> \t 
 
</div> \t 
 
</div> 
 
\t \t \t \t 
 
\t \t \t \t <?php include(D_TEMPLATE.'/footer.php'); ?> \t 
 
\t \t \t \t 
 
\t \t \t \t <!--<div id="console-debug"> 
 
\t \t \t \t \t Test debug window 
 
\t \t \t \t </div>--> 
 

 
\t </body> 
 
</html>

はあなたの時間と助けてくれてありがとう!

答えて

0

あなたはあなたのコード内の画像フォルダに2つの異なるパスを持っている

body { 
    background-image: url("images/vortrex-bg.png"); 
    background-size: cover; 
    background-attachment: fixed; 
    } 

.navbar-default { 
     background-image: url(../images/128-198.png); 
     border-radius: 10px; 
     border: solid; 
    } 

ので、あなたはそれらのいずれかを変更し、あなたのコードでは

+0

ありがとうございます。私はコードに使用されている私のソフトウェアが../images/ を使用するように言いましたが、これを見ませんでしたが、私は次回より集中しなければならないと思います!しかし、ありがとうたくさんの男(Y) –

+0

あなたは歓迎ニック –

0

を変更するかを確認する必要がありますCSSコードの階層を覚えておく必要があります。あたかも自分のスタイルと葛藤しているかのように見えます。 1.Inline属性2.ID属性3.Class属性4、要素

また、多くのCSSスタイルシートを呼び出して、独自のCSSスタイルシートを追加しています。私が最初にあなたの二重のコールと遊ぶでしょう:

body { 
background-image: url("images/vortrex-bg.png"); 
background-size: cover; 
background-attachment: fixed; 
} 

.navbar-default { 
    background-image: url(../images/128-198.png); 
    border-radius: 10px; 
    border: solid; 
} 

はその後、それはあなたがあなたのスタイルシートを介して呼び出しているものと干渉していない確認してください。次にID属性がなくクラスのみがあることに注意してください。あなたが優先させたいものを考え、その階層をあなたの利益に利用してください。

関連する問題