2017-08-18 12 views
0

種類無料のウェブホスト(x10hostingおよび000webhost)にアップロードしたときにナビゲーションバーが表示されない理由を知っていますが、オンラインでアップロードしたときにナビゲーションバーが表示されない

私はlocalhostの enter image description here

し、この中で、それを実行したときに私はそれをオンラインで実行するときにこの問題が発生しているもの enter image description here

これは、これはCSSのコードでHTMLコード

<?php 
    error_reporting(E_ALL & ~E_NOTICE); 
    error_reporting(E_ERROR | E_PARSE); 
    session_start(); 
?> 

<!DOCTYPE html> 
<html> 
<head> 
<title>Home</title> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
</head> 

<body> 
<nav class="clearfix"> 
     <ul class="clearfix"> 
      <li><a href="index.php"><img src="img\home.png" style="margin-bottom:-2px; margin-right:3px; width:16px; height:16px;">Home</a></li> 
      <li><a href="speakers.php"><img src="img\speakers.png" style="margin-bottom:-1px; margin-right:4px; width:15px; height:13px;">Speakers</a></li> 
      <li><a href="about.php"><img src="img\about.png" style="margin-bottom:-1px; margin-right:3px; width:13px; height:12px;">About</a></li> 
      <li><a href="contact.php"><img src="img\contact.png" style="margin-bottom:-2px; margin-right:6px; width:13px; height:14px;">Contact</a></li> 
      <li><a href="reservation.php"><img src="img\reservation.png" style="margin-bottom:-2px; margin-right:5px; width:14px; height:13px;">Reservation</a></li> 
      <li><a href="signOut.php" id="signOut"><img src="img\signOut.png" style="margin-bottom:-2px; margin-right:6px; width:14px; height:14px;">Sign Out</a></li> 
      <li><a href="myAccount.php" id="user" style="text-transform:capitalize;"><img src="img\user.png" style="margin-bottom:-1px; margin-right:6px; width:13px; height:12px;"><?php echo $_SESSION['firstname']; ?></a></li> 
      <li><a href="signUp.php" id="signUp"><img src="img\signUp.png" style="margin-bottom:-1px; margin-right:6px; width:13px; height:11px;">Sign Up</a></li> 
      <li><a href="signIn.php" id="signIn"><img src="img\signIn.png" style="margin-bottom:-2px; margin-right:6px; width:14px; height:13px;">Sign In</a></li> 
      <li><a href="adminControl.php" id="adminControl"><img src="img\admin.png" style="margin-bottom:-3px; margin-right:6px; width:15px; height:16px;">Admin control</a></li> 
     </ul> 
     <a href="#" id="pull">Speaker Reservation</a> 
</nav> 

<div class="slideshow-container"> 

<div class="mySlides fade"> 
    <img id="img1" src="img/homepage-image1.jpg"> 
    <div class="text"></div> 
</div> 

<div class="mySlides fade"> 
    <img id="img2" src="img/homepage-image2.jpg"> 
    <div class="text"></div> 
</div> 

<div class="mySlides fade"> 
    <img id="img3" src="img/homepage-image3.jpg"> 
    <div class="text"></div> 
</div> 

<div id="dots"> 
    <span class="dot"></span> 
    <span class="dot"></span> 
    <span class="dot"></span> 
</div> 

</div> 

<div id="index-welcome"><p>Welcome to Online Speaker Reservation. We are an organization established in 2005 by Rey Vibal, which engages the skills of performing artists directors and writers for the purpose of tuition in the performing arts, theatrical and film production, corporate training, wellness and sharing methodologies.</p></div> 

<div id="footer" >Copyright 2017</div> 

<script> 
$(function() 
    { 
     var pull = $('#pull'); 
     menu = $('nav ul'); 
     menuHeight = menu.height(); 
     $(pull).on('click', function(e) 
     { 
      e.preventDefault(); 
      menu.slideToggle(); 
     }); 

     $(window).resize(function() 
     { 
      var w = $(window).width(); 
      if(w > 320 && menu.is(':hidden')) 
      { 
       menu.removeAttr('style'); 
      } 
     }); 
    }); 
</script> 

<script> 
var slideIndex = 0; 
showSlides(); 

function showSlides() { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex> slides.length) {slideIndex = 1}  
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
    setTimeout(showSlides, 4000); 
} 
</script> 

<script> 
function ifAdmin() 
{ 
     document.getElementById("signIn").style.display = "none"; 
     document.getElementById("signUp").style.display = "none"; 
     document.getElementById("signOut").style.display = "block"; 
     document.getElementById("adminControl").style.display = "block"; 
} 
</script> 

<script> 
function ifNotAdmin() 
{ 
    document.getElementById("signIn").style.display = "none"; 
    document.getElementById("signUp").style.display = "none"; 
    document.getElementById("signOut").style.display = "block"; 
    document.getElementById("adminControl").style.display = "none"; 
} 
</script> 

<script> 
function ifNotLogin() 
{ 
    document.getElementById("user").style.display = "none"; 
    document.getElementById("signOut").style.display = "none"; 
    document.getElementById("adminControl").style.display = "none"; 
} 
</script> 

<?php 

    if (isset($_SESSION['signedIn']) && $_SESSION['signedIn'] == true) 
     //if login 
     { 
      if($_SESSION['type'] == 1) 
      { 
       echo "<script type='text/javascript'>ifAdmin();</script>"; 
      } 
      elseif($_SESSION['type'] == 0) 
      { 
       echo "<script type='text/javascript'>ifNotAdmin();</script>"; 
      } 
     } 
     //if not login 
     else 
     { 
      echo "<script type='text/javascript'>ifNotLogin();</script>"; 
     } 
?> 

</body> 
</html> 

です

/*navigation bar*/ 

    nav 
    { 
     height: 60px; 
     width: 100%; 
     background: #342E2D; 
     font-size: 10pt; 
     font-family: 'PT Sans', Arial, sans-serif; 
     font-weight: bold; 
     position: relative; 

    } 
    nav ul 
    { 
     padding: 0; 
     margin: auto; 
     width: 100%; 
     height: 60px; 
    } 
    nav li 
    { 
     display: inline; 
    } 
    nav a 
    { 
     color: #fff; 
     display: inline-block; 
     width: 100px; 
     text-align: center; 
     text-decoration: none; 
     line-height: 60px; 
     text-shadow: 1px 1px 0px #283744; 
    } 
    nav li a 
    { 

     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
    } 
    nav li:last-child a 
    { 
     border-right: 0; 
    } 
    nav a:hover, nav a:active 
    { 
     background-color: #1E1D1C; 
    } 
    nav a#pull 
    { 
     display: none; 
    } 

    /* Clearfix */ 

    .clearfix:before, 
    .clearfix:after { 
     content: " "; 
     display: table; 
    } 
    .clearfix:after { 
     clear: both; 
    } 
    .clearfix { 
     *zoom: 1; 
    } 

    #signIn, #signUp, #signOut, #adminControl, #user 
    { 
     float:right; 
    } 

    #adminControl 
    { 
     width:130px; 
    } 
+1

「styles.css」ではなく「Styles.css」ですか?アップロードされたページへのリンクが表示されません。 – NineBerry

+1

よく見えます。あなたはブラウザのキャッシュをクリアしようとしましたか? – NineBerry

+0

@NineBerryに感謝します。私はすでにcssが動作していないときに私はキャッシュをクリアする必要があることを知っているが、あなたのサイトがオンラインのときにも必要であることを知らない。これが起こらないようにする方法がありますか? – Red

答えて

1

あなたのコードは正常に見えます。

CTRL +P

プライベート(IE)

CTRL +N

オプション2

ただ、ブラウザのキャッシュをクリアします。

webhost00を使用してキャッシュの問題が数回発生しました

+0

ありがとう、それは動作します。私はキャッシュをクリアするのを忘れた。 btwこれを防ぐ方法はありますか?それとも、無料のウェブホストでのみ発生しますか? – Red

+0

はい、このリンクを確認してください。https://stackoverflow.com/questions/25358998/clearing-cache-once-on-deploy –

1

CSSスタイリングがまったく読み込まれていないようです。 Webホスト上のCSSファイルの場所を、HTMLファイルのスタイルシートのリンクと照合して確認します。

はインコグニート(クローム)モードでは、ブラウザを開いてみてください:私は

オプション1でuはこれをachiveすることができますキャッシュをクリアすることを確認してくださいに

関連する問題