2016-04-26 2 views
0

Я кодирую веб-сайт, но я не уверен, почему веб-страница может прокручивать горизонтально.Вертикальная полоса прокрутки?

HTML & код CSS ниже:

<?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>

Сайт запрограммирован на моем localhosted компьютере, но если вы хотите увидеть его в Интернете вы можете найти его на http://92.222.85.81/

+0

Я не вижу вертикальную полосу прокрутки. – mlegg

+0

Мне жаль, что я должен загрузить его на свой новый сайт. Я обновлю это за секунду. Мой доступ к FTP ограничен. Должно быть в течение 15-30 минут –

+0

Посмотрите на это вместо http://92.222.85.81/ –

ответ

0

Вы имели в виду горизонтальную прокрутку?

Похоже, что ваш .row не находится внутри элемента .container (при условии, что это Bootstrap). Поскольку класс row добавляет отрицательный запас, он немного ударяет по этому элементу. Элемент container (опять же, если предположить, что это бутстрап, который выглядит так, как есть), это правильно.

Так попробуйте добавить:

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

только под body вокруг все ваши .row содержание.

Рекомендую прочитать Bootstrap documentaiton. Все необходимые классы перечислены для вас хорошо.

«Строки должны быть размещены в пределах .container (фиксированная ширина) или .container-fluid (полная ширина) для правильного выравнивания и заполнения».


ОБНОВЛЕНИЕ: О несвязанной ноте к вопросу; ваши meta, title и link теги должны находиться в теге head, а не в теге header.

+1

Большое спасибо за ваш ответ. Я действительно не знал, что это может вызвать эту проблему, но она ее исправила. Благодаря! –

+0

Добро пожаловать! –