kind sir's does anybody know why my navigation bar is not showing when i upload it in a free web host (x10hosting and 000webhost) but when i run it in localhost its perfectly working.
this is when i run it in localhost
and this what happens when i run it online
this is the html code
<?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>
this is the css codes
/*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;
}
