Bootstrap Bild in einer Navbar

-1

Ich habe ein Problem mit einem Bild, das ich anstelle von einem farbigen Hintergrund verwendet werden soll.Bootstrap Bild in einer Navbar

Aber es gibt mir nur einen einfachen weißen Hintergrund aus irgendeinem Grund.

Ich kann nicht scheinen, den Fehler zu finden, aber ich werde immer noch versuchen. Ich hoffe, jemand kann mir mit diesem Problem helfen, da ich immer noch HTML, CSS & PHP richtig lerne!

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>

Vielen Dank für Ihre Zeit und Hilfe!

Quelle

2016-04-29 Nichlas Mortensen

Sie haben zwei verschiedene Pfade in den Ordner images in Ihrem Code

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

und

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

so benötigen Sie einen von ihnen zu modifizieren und sehen, was

Quelle

2016-04-29 16:32:14

Vielen Dank. Ich habe das nicht gesehen, da meine Software, die ich benutzt habe, mir gesagt hat, ich solle ../images/ verwenden, aber ich denke, ich muss das nächste Mal fokussierter sein! Aber vielen Dank Mann (Y) –

Gern geschehen Nick –

In Ihrem Code ändert , Sie müssen sich an die Hierarchie Ihres CSS-Codes erinnern. Es sieht so aus, als ob Sie in Konflikt mit Ihren Stilen sind. Die Hierarchie ist wie folgt: 1. Inline-Attribute 2.ID-Attribute 3.Class-Attribute 4, Elemente

Sie rufen auch viele CSS-Stylesheets auf und fügen dann Ihre eigenen hinzu. Ich würde zuerst mit Ihrem Doppel Anruf spielen:

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

und

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

überprüfen, um dann sicherzustellen, dass es nicht mit stört, was Sie fordern, durch Ihre Stylesheets in. Beachten Sie, dass Sie keine ID-Attribute und nur Klassen haben. Denken Sie darüber nach, was Sie bevorzugen möchten, und nutzen Sie die Hierarchie zu Ihrem Vorteil.

Quelle

2016-04-29 17:03:52

Bootstrap Bild in einer Navbar

Antwort

Verwandte Themen