cssに問題があります。
ホームページでは正常に読み込まれますが、自分のサイトのリンクにアクセスすると、cssが正しく読み込まれません。したがって、基本的に以下のコードはindex.htmlで正常に機能しますが、以下に示すリンクに移動すると、クラップスになります。
すべてのリンクにまったく同じコードが含まれているため、機能しない理由がわかりません。
これが私のソースコードです：
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id ="leftcol">
<a href="content/practice.html"><div class ="left-column-item">Practice!</div></a>
<a href="content/AboutUs.html"><div class ="left-column-item">About Us!</div></a>
<a href="content/contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
</div>
<div id="left-placeholder"></div>
<div id ="left-pusher"></div>
<div id ="content">Math Practice Site <br> hello</div>
</body>
</html>
//the css file:
/*
Document : styles
Created on : Nov 2, 2012, 11:50:48 PM
Author : me
Description:
Purpose of the stylesheet follows.
*/
root {
display: block;
}
#leftcol a{text-decoration: none;}
#leftcol{
left: 10%;
width: 200px;
height: 100%;
margin-top: 0px;
position: absolute;
opacity:0.6;
color: white;
font-size: 2em;
}
#left-placeholder{
height: 100%;
width: 10%;
float: left;
}
#left-pusher{
height: 100%;
width: 200px;
float: left;
}
.left-column-item{
background: url('images/bgnav.jpg');
height: 33.334%;
background-size: 100%;
opacity:0.6;
color: white;
}
.left-column-item:hover{
background: url('images/bgnav.jpg');
height: 33.334%;
background-size: 100%;
opacity: 1;
}
#content{
text-align: center;
color: white;
font-size: 5em;
height: 100%;
width: 70%;
float:left;
}
body{
background: url('images/background.jpg');
background-size: 100%;
margin: 0;
min-height: 100%;
width: 100%}
html, body
{
height: 100%;
}
これが私の練習ページです：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="../styles.css" rel="stylesheet" type="text/css">
<script type ="text/javascript">
</script>
</head>
<body>
<div id ="leftcol">
<a href="practice.html"><div class ="left-column-item">Practice!</div></a>
<a href="aboutUs.html"><div class ="left-column-item">About Us!</div></a>
<a href="contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
</div>
<div id="left-placeholder"></div>
<div id ="left-pusher"></div>
<div id ="content">Practice!</div>
</body>
</html>