I am trying to write html and css for a web page, but it doesn't show anything when I open the file directly from the file. It works fine when I access it through my ftp server, even from the same pc and browser. I have tried searching google for solutions, but I wasn't able to find anything
index.html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<head lang="en">
<meta charset="utf-8">
<title>Employee Page</title>
</head>
<body>
<div id="header"></div>
<br><br>
<div id="content"></div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$("#header").load("header.html");
$("#content").load("startingContent.html");
$("#footer").load("footer.html");
</script>
</body>
</html>
header.html
<header>
<nav id="menu">
<img id="logo" src="Images/logo.png" height="150" style="border: 5px solid black">
<ul>
<li> <a href="ftp://wtpa.ddns.net/Site/index.html">Home</a></li>
<li> <a href="ftp://wtpa.ddns.net/Site/calendar.html">Calendar</a>
</li>
<li> <a href="ftp://wtpa.ddns.net/Site/contacts.html">Contacts</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">File Server</a>
<div class="dropdown-content">
<a href="#">Documents</a>
<a href="#">GameFiles</a>
<a href="#">Videos</a>
</div>
</li>
</ul>
</nav>
</header>
style.css
.menu {
width: 100%;
vertical-align:top;
height:25px;
float: top;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
font-size: 16px;
display:inline-block;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
Any help is appreciated. Thanks!
First of all, it appears that your navigation is using absolute linking.
<li> <a href="ftp://wtpa.ddns.net/Site/index.html">Home</a></li>
<li> <a href="ftp://wtpa.ddns.net/Site/calendar.html">Calendar</a>
</li>
<li> <a href="ftp://wtpa.ddns.net/Site/contacts.html">Contacts</a>
</li>
Furthermore, you can bring up you console, see what parts of your website refuse to load at all and change the routing.
EDIT
You cannot load these resources clearly for security reasons. Running pages through file:// protocol have disabled a lot of features because security issues. You can always create a javascript server using Node.js and host it locally without installing apache or something similar.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments