- I'm working on a site, but I've run into a small issue. I want to have an external style sheet, so that when I want to edit the layout, it's one file I have to change instead of 10-20 or however many pages I will have. You get the idea. But when I load the page with the external style sheet, the html doesn't load the style sheet, as if it doesn't detect it. But when I put the style sheet inside the html, it loads fine. The style sheet and html file are in the same folder. I'm pretty sure it's linked properly, any help please? Here is the link and my files:
http://testpetsite.x10host.com/
index.html wrote:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="A virtual pet site for all ages.">
<meta name="keywords" content="virtual, pets, forums">
<meta name="author" content="Nettle">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="html/css" href="index.css">
</head>
<title>
Welcome to the Kingdom
</title>
<h1>
<center><a href="#"><img src="https://i37.servimg.com/u/f37/19/56/62/06/logo15.png"></a>
<br></center>
</h1>
<table id="MenuBar">
<tr>
<td id="fillerCell"> </td>
<td> </td>
<td><!--<a href="#"><i class="fa fa-user-o" aria-hidden="true"></i>--><i class="fa fa-user" aria-hidden="true"></i> <a href="Login.html">Login</a></td>
</tr>
</table>
<br>
<body>
<table id="Navigation" style="float:left;">
<tr>
<td><br><center style="color:#FFFFFF">Jump to Page<br>____________</center></td>
</tr>
<tr>
<td><div class="dropdown" style="float:right;">
<button class="dropbtn"><center>My Profile</center></button>
<div class="dropdown-content">
<a href="#" id="dropDown">My Companions</a>
<a href="#" id="dropDown">My Chibions</a>
<a href="#" id="dropDown">Edit Profile</a>
</div>
</div>
</td>
</tr>
<tr>
<td><div class="dropdown" style="float:right;">
<button class="dropbtn">Navigation</button>
<div class="dropdown-content">
<a href="#" id="dropDown">Map</a>
<a href="#" id="dropDown">Agency</a>
<a href="#" id="dropDown">Shop</a>
<a href="#" id="dropDown">Bank</a>
</div>
</div>
</td>
</tr>
<tr>
<td><div class="dropdown" style="float:right;">
<button class="dropbtn">Forums</button>
<div class="dropdown-content">
<a href="#" id="dropDown">Forum Rules</a>
<a href="#" id="dropDown">General Chat</a>
<a href="#" id="dropDown">Aurarity Chat</a>
<a href="#" id="dropDown">Misc. Chat</a>
</div>
</div>
</tr>
<tr>
<td><div class="dropdown" style="float:right;">
<button class="dropbtn">Help</button>
<div class="dropdown-content">
<a href="#" id="dropDown">Meet the Staff</a>
<a href="#" id="dropDown">Site Rules</a>
<a href="#" id="dropDown">Library</a>
<a href="#" id="dropDown">Request</a>
</div>
</div>
</tr>
<script>
/*<tr>
<td><div class="dropdown" style="float:right;"></td>
<button class="dropbtn">Help</button>
<div class="dropdown-content">
<a href="#">Meet the Staff</a>
<a href="#">Site Rules</a>
<a href="#">Ecyclopedia</a>
<a href="#">Report A Member</a>
</tr> */
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</table>
<table id="Main" style="float:center;">
<tr>
<th> </th>
<th style="padding: 15px; font-size: 30px;">News</th>
<th> </th>
</tr>
<tr>
<td width="10%"> </td>
<td width="80%">
<b id="Date">[Insert date here]</b><br>
According to all known laws of aviation, there is no way a bee
should be able to fly. Its wings are too small to get its fat little body off
the ground. The bee, of course, flies anyway because bees don't care what humans
think is impossible. Yellow, black. Yellow, black. Yellow, black. Yellow, black.
Ooh, black and yellow! Let's shake it up a little. Barry! Breakfast is ready!
Ooming! Hang on a second. Hello? - Barry? - Adam? - Oan you believe this is
happening? - I can't. I'll pick you up. Looking sharp. Use the stairs. Your
father paid good money for those. Sorry. I'm excited. Here's the graduate.
We're very proud of you, son. A perfect report card, all B's. Very proud. Ma!
I got a thing going here. - You got lint on your fuzz. - Ow! That's me! - Wave
to us! We'll be in row 118,000. - Bye! Barry, I told you, stop flying in the
house! - Hey, Adam. - Hey, Barry. - Is that fuzz gel? - A little. Special day,
graduation. Never thought I'd make it. Three days grade school, three days high
school. Those were awkward. Three days college. I'm glad I took a day and hitchhiked
around the hive. You did come back different. - Hi, Barry. - Artie, growing a
mustache? Looks good. - Hear about Frankie? - Yeah. - You going to the funeral?
- No, I'm not going. Everybody knows, sting someone, you die. Don't waste it on
a squirrel. Such a hothead. I guess he could have just gotten out of the way.
I love this incorporating an amusement park into our day. That's why we don't
need vacations. Boy, quite a bit of pomp... under the circumstances. - Well,
Adam, today we are men. - We are! - Bee-men. - Amen! Hallelujah! Students,
faculty, distinguished bees, please welcome Dean Buzzwell.
</td>
<td width="10%"> </td>
</tr>
<tr>
<td width="10%"> </td>
<td width="80%" style="padding: 15px;"> </td>
<td width="10%"> </td>
</tr>
</table>
<br>
</body>
<!--Bottom bar<-->
<table id="MenuBar">
<tr>
<td id="fillerCell" width="10%"> </td>
<td width="60%"></td>
<td width="30%"><a href="#">Aurarity</a> | <a href="#">Terms of Service</a> | <a href="Contact.html">Contact</a></td>
</tr>
</table>
</html>
index.css wrote:@charset "UTF-8";
body{
/*background-color: #A8BFE6*/
/*#1D264A*/
/*background-image: url("gradient.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;*/
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/# ... 3c93e0+100 */
background: rgb(209,230,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(209,230,255,1) 0%, rgba(184,202,234,1) 60%, rgba(50,66,128,1) 99%, rgba(50,66,128,1) 100%, rgba(60,147,224,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(209,230,255,1) 0%,rgba(184,202,234,1) 60%,rgba(50,66,128,1) 99%,rgba(50,66,128,1) 100%,rgba(60,147,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(209,230,255,1) 0%,rgba(184,202,234,1) 60%,rgba(50,66,128,1) 99%,rgba(50,66,128,1) 100%,rgba(60,147,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Avenir, "Century Gothic";
/*Avenir*/
/*font-family: "Avant Garde"*/
}
#grad {
/*background: #A8BFE6; /* For browsers that do not support gradients */
/*background: -webkit-linear-gradient(#A8BFE6, #1D264A); /* For Safari 5.1 to 6.0 */
/*background: -o-linear-gradient(#A8BFE6, #1D264A); /* For Opera 11.1 to 12.0 */
/*background: -moz-linear-gradient(#A8BFE6, #1D264A); /* For Firefox 3.6 to 15 */
/*background: linear-gradient(#A8BFE6, #1D264A); /* Standard syntax */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/# ... 3c93e0+100 */
/*background: rgb(209,230,255); /* Old browsers */
/*background: -moz-linear-gradient(top, rgba(209,230,255,1) 0%, rgba(184,202,234,1) 60%, rgba(50,66,128,1) 99%, rgba(50,66,128,1) 100%, rgba(60,147,224,1) 100%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(top, rgba(209,230,255,1) 0%,rgba(184,202,234,1) 60%,rgba(50,66,128,1) 99%,rgba(50,66,128,1) 100%,rgba(60,147,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom, rgba(209,230,255,1) 0%,rgba(184,202,234,1) 60%,rgba(50,66,128,1) 99%,rgba(50,66,128,1) 100%,rgba(60,147,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1e6ff', endColorstr='#3c93e0',GradientType=0 ); /* IE6-9 */
}
#links{
text-decoration: none;
color: white;
}
#fillerCell{
color: #1D3869;
}
.dropbtn {
background-color: #1E264A;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: center;
}
.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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #D5D9D9}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3D5396;
}
table#Navigation{
background-color: #1E264A;
border-radius: 10px;
text-align: center;
margin:0 40px;
}
table#MenuBar{
background-color: #1E264A;
border-radius: 10px;
text-align: center;
}
table#MenuBar{
width:100%;
height: 40px;
color: #FFFFFF;
background-color: #1D3869;
text-align: right;
padding: 10px;
}
table#Main{
background-color: white;
Border-radius: 20px;
width: 80%;
margin:0 20px;
}
#Date{
font-size: 20px;
}
/* unvisited link */
a:link {
color: white;
text-decoration: none;
}
/* visited link */
a:visited {
color: white;
text-decoration: none;
}
/* mouse over link */
a:hover {
color: white;
text-decoration: underline;
}
/* selected link */
a:active {
color: black;
text-decoration: none;
}
#dropDown:link {
color: black;
text-decoration: none;
}
/* visited link */
#dropDown:visited {
color: black;
text-decoration: none;
}
#dropDown:hover {
color: black;
text-decoration: underline;
}
/* selected link */
#dropDown:active {
color: black;
text-decoration: none;
}
Any help would sincerely be greatly appreciated, as I cant figure out what I'm doing wrong.
