2016-04-26 16 views
0

Ich kodiere eine Website, aber ich bin mir nicht sicher, warum die Webseite horizontal leicht scrollen kann.Vertikale Bildlaufleiste?

HTML & CSS-Code sind unten:

<?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 overflow-y: hidden; // hide vertical 
 
\t overflow-x: hidden; // hide horizontal 
 
\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; 
 
\t } 
 
\t 
 
\t .footer { 
 
\t \t background: none; 
 
\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: grey; 
 
\t \t border-color: grey; 
 
\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 
 
\t h3 .online-text { 
 
\t \t color: green; 
 
\t } 
 
\t h3 .offline-text { 
 
\t \t color: red; 
 
\t } \t 
 

 
</style>
<?php include('config/setup.php'); ?> 
 
<!DOCTYPE html> 
 
<html> 
 
\t <header> 
 
\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 </header> 
 
\t <body> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-3"> 
 
\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 \t <div class="col-md-6"> \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> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </nav><!-- Slutningen af navbaren --> 
 
\t \t \t \t \t 
 
\t \t \t \t 
 
\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 \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 
 

 
\t \t \t \t \t \t 
 
\t \t </div> 
 
\t \t <div class="col-md-3"> 
 
\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 while ($rows = mysqli_fetch_assoc($r)) { 
 
\t \t \t \t 
 
\t \t \t \t $online = $rows['online']; 
 
\t \t \t \t $status = $rows['status']; 
 
\t \t \t \t 
 
\t \t \t \t if($rows['status'] == 'online') { 
 
\t \t \t \t echo "<h3 class='online-text'>$status:</h3> <h3>$online/200</h3>"; 
 
\t \t \t \t echo "<h4>mc.vortrex.dk</h4>"; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t echo "<h3 class='offline-text'>$status</h3>"; 
 
\t \t \t \t \t echo "<h4>mc.vortrex.dk</h4>"; 
 
\t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t } else { 
 
\t \t \t \t echo "<h2>Der skette en fejl</h2>"; 
 
\t \t \t \t echo "<br>"; 
 
\t \t \t \t echo "<h4>Kontakt et staff medlem!"; 
 
\t \t \t 
 
\t \t \t \t } 
 
\t \t \t 
 
\t \t \t ?> 
 
\t \t \t </div> 
 
\t \t </div> \t 
 
</div> \t 
 
\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>

Die Website auf meinem localhosted PC programmiert ist, aber wenn Sie es sehen wollen Online können Sie es auf http://92.222.85.81/

+0

Ich sehe keine vertikale Bildlaufleiste. – mlegg

+0

Es tut mir leid, ich muss es auf meine neue Website hochladen. Ich werde das in einer Sekunde aktualisieren. Mein FTP-Zugang ist eingeschränkt. Sollte innerhalb von 15-30 Minuten sein –

+0

Schauen Sie sich diese stattdessen http://92.222.85.81/ –

Antwort

0

finden Meinst du horizontale Bildlaufleiste?

Es sieht so aus, als ob Ihre .row nicht in einem .container Element (vorausgesetzt, es ist Bootstrap). Da die Klasse row einen negativen Rand hinzufügt, stößt sie dieses Element etwas an. Das container-Element (wiederum unter der Annahme, dass es Bootstrap ist, wie es aussieht) widerspricht dem richtig.

versuchen So fügt hinzu:

<div clsas="container"></div>

knapp body um alle Ihre .row Inhalt.

Ich empfehle das Lesen der Bootstrap documentaiton. Alle notwendigen Klassen sind gut für dich aufgelistet.

"Die Zeilen müssen innerhalb einer .container (feste Breite) oder .container-fluid (volle Breite) für die richtige Ausrichtung und Polsterung platziert werden."


UPDATE: Auf eine nicht verwandte Anmerkung zu der Frage; Ihre meta, title und link Tags sollten innerhalb eines head Tags und nicht eines header Tags sein.

+1

Vielen Dank für Ihre Antwort. Ich wusste nicht wirklich, dass dies das Problem verursachen könnte, aber es hat es behoben. Vielen Dank! –

+0

Gern geschehen! –

Verwandte Themen