2017-05-12 5 views
0

私は学校プロジェクトのためにhtml5でウェブページを作っています。以前に働いていたハイパーリンクの一部が完全に壊れてしまったので、a:hover属性でさえも仕事はありません。ここでこれまで使っていたリンクはありません

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
#container { 
 
\t width:1024px; 
 
\t height:800px; \t 
 
\t background-image:url(Images/All%20Pages/Background.png); 
 
} 
 

 
header{ 
 
\t width:1024px; 
 
\t height:100px; 
 
\t text-align:left; 
 
\t font-family:Georgia, "Times New Roman", Times, serif; 
 
\t background-image:url(Images/All%20Pages/Top_Banner.png);s 
 
\t display:inline; 
 
} 
 

 
footer{ 
 
\t width:1024px; 
 
\t height:80px; 
 
\t font-family:Georgia, "Times New Roman", Times, serif; 
 
\t text-align:center; 
 
\t background-image:url(Images/All%20Pages/Bottom_Border.png); 
 
} 
 

 
#content{ 
 
\t width:869px; 
 
\t height:620; 
 
\t padding-left:155px; 
 
\t padding-bottom:80px; 
 
\t position:absolute; 
 
\t font-family:Georgia, "Times New Roman", Times, serif; 
 
\t text-align:center; 
 
} 
 

 
h2{ 
 
\t color:#FFF; 
 
} 
 

 
h4{ 
 
\t color:#FFF; 
 
} 
 

 
p{ 
 
\t color:#FFF; 
 
} 
 

 
#left_bar{ 
 
\t background-image:url(Images/All%20Pages/Sidebar.png); 
 
\t height:700px; 
 
\t width:155px; 
 
\t text-align:center; 
 
} 
 

 
a{ 
 
\t text-decoration: none; 
 
\t color:#FFF; 
 
} 
 

 
a:hover{ 
 
\t color:#000; 
 
\t text-decoration: none; 
 
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="About.css"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>[Title Goes Here]</title> 
 
</head> 
 

 
<body> 
 
<div id="container"> 
 

 
\t \t \t \t <header> 
 
       \t <div style="line-height:5%;"> 
 
    \t \t \t \t <br> 
 
\t \t \t \t \t </div> 
 
       <h2><a href="Title Goes Here.html" id="current">[Title Goes Here]:</a></h2> 
 
       <h4>Adventures in Design</h4> 
 
\t \t \t \t </header> 
 
       \t \t \t \t <!-- CONTENT DIV HERE --> 
 
       
 
\t \t \t \t \t \t \t <div id="left_bar"> 
 
          <br /> 
 
          <h2><a href="#" id="current">ABOUT</a></h2> 
 
          <br /> 
 
          <h2><a href="#">PORTFOLIO</a></h2> 
 
          <br /> 
 
          <h2><a href="#">CONTACT</a></h2> 
 
          </div> 
 

 

 
\t \t \t \t \t \t <footer> 
 
         <br /> 
 
         <p>Last Updated: 05-08-2017</p> 
 
         </footer> 
 

 
</div> 
 

 
</body> 
 
</html> 
 
<!--<div style="border-left:1px solid #000;height:500px"></div> 
 
    \t for vertical line -->

私のメインページの完全なコードです:ここでは

は、左のハイパーリンクが仕事をどの私についてのページの正確なコードは(コメントを含む)であり、 、その上でのみメインページに戻ってリードするリンクが動作します:

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
#container { 
 
\t width:1024px; 
 
\t height:800px; \t 
 
\t background-image:url(Images/All%20Pages/Background.png); 
 
} 
 

 
header{ 
 
\t width:1024px; 
 
\t height:100px; 
 
\t text-align:left; 
 
\t font-family:Georgia, "Times New Roman", Times, serif; 
 
\t background-image:url(Images/All%20Pages/Top_Banner.png);s 
 
\t display:inline; 
 
} 
 

 
footer{ 
 
\t width:1024px; 
 
\t height:80px; 
 
\t font-family:Georgia, "Times New Roman", Times, serif; 
 
\t text-align:center; 
 
\t background-image:url(Images/All%20Pages/Bottom_Border.png); 
 
} 
 

 
#content{ 
 
\t width:869px; 
 
\t height:620; 
 
\t padding-left:155px; 
 
\t padding-bottom:80px; 
 
\t position:absolute; 
 
\t font-family:Georgia, "Times New Roman", Times, serif; 
 
\t text-align:center; 
 
} 
 

 
h2{ 
 
\t color:#FFF; 
 
} 
 

 
h4{ 
 
\t color:#FFF; 
 
} 
 

 
p{ 
 
\t color:#FFF; 
 
} 
 

 
#left_bar{ 
 
\t background-image:url(Images/All%20Pages/Sidebar.png); 
 
\t height:700px; 
 
\t width:155px; 
 
\t text-align:center; 
 
} 
 

 
a{ 
 
\t text-decoration: none; 
 
\t color:#FFF; 
 
} 
 

 
a:hover{ 
 
\t color:#000; 
 
\t text-decoration: none; 
 
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="Front_Page.css"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>[Title Goes Here]</title> 
 
</head> 
 

 
<body> 
 
<div id="container"> 
 
\t 
 
\t \t \t \t <header> 
 
       \t <div style="line-height:5%;"> 
 
    \t \t \t \t <br> 
 
\t \t \t \t \t </div> 
 
       <h2><a href="Title Goes Here.html" id="current">[Title Goes Here]:</a></h2> 
 
       <h4>Adventures in Design</h4> 
 
\t \t \t \t </header> 
 
       \t \t \t \t \t \t \t \t \t 
 
                <div id="content"> 
 
                <h2> Hello and welcome to [Title Goes Here], <br /> 
 
                one adventure in design, from websites to photos and beyond!</h2> 
 
                \t <div style="line-height:217px;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
      \t \t \t \t \t \t \t \t \t \t <img src="Images/Front Page/Landscape.png" /> 
 
      \t \t \t \t \t \t \t \t \t \t \t </div> 
 
       
 
\t \t \t \t \t \t \t <div id="left_bar"> 
 
          <br /> 
 
          <h2><a href="About.html" id="current">ABOUT</a></h2> 
 
          <br /> 
 
          <h2><a href="#">PORTFOLIO</a></h2> 
 
          <br /> 
 
          <h2><a href="#">CONTACT</a></h2> 
 
          </div> 
 
\t \t \t 
 
\t \t \t \t \t \t <footer> 
 
         <br /> 
 
         <p>Last Updated: 05-08-2017</p> 
 
         </footer> 
 

 
</div> 
 

 
</body> 
 
</html>

私はまだ間違ったことを見つけていないので、これに対する回答は非常に高く評価されます。私に迷惑をかける可能性のあるアドバイスをありがとうございます。

答えて

0

padding-leftのために#content要素が#left_bar要素の上にオーバーレイされています。代わりにmargin-leftを使用できます。

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
#container { 
 
\t width:1024px; 
 
\t height:800px; \t 
 
\t background-image:url(Images/All%20Pages/Background.png); 
 
} 
 

 
header{ 
 
\t width:1024px; 
 
\t height:100px; 
 
\t text-align:left; 
 
\t font-family:Georgia, "Times New Roman", Times, serif; 
 
\t background-image:url(Images/All%20Pages/Top_Banner.png);s 
 
\t display:inline; 
 
} 
 

 
footer{ 
 
\t width:1024px; 
 
\t height:80px; 
 
\t font-family:Georgia, "Times New Roman", Times, serif; 
 
\t text-align:center; 
 
\t background-image:url(Images/All%20Pages/Bottom_Border.png); 
 
} 
 

 
#content{ 
 
\t width:869px; 
 
\t height:620; 
 
\t margin-left:155px; 
 
\t padding-bottom:80px; 
 
\t position:absolute; 
 
\t font-family:Georgia, "Times New Roman", Times, serif; 
 
\t text-align:center; 
 
} 
 

 
h2{ 
 
\t color:#FFF; 
 
} 
 

 
h4{ 
 
\t color:#FFF; 
 
} 
 

 
p{ 
 
\t color:#FFF; 
 
} 
 

 
#left_bar{ 
 
\t background-image:url(Images/All%20Pages/Sidebar.png); 
 
\t height:700px; 
 
\t width:155px; 
 
\t text-align:center; 
 
} 
 

 
a{ 
 
\t text-decoration: none; 
 
\t color:#FFF; 
 
} 
 

 
a:hover{ 
 
\t color:#000; 
 
\t text-decoration: none; 
 
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="Front_Page.css"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>[Title Goes Here]</title> 
 
</head> 
 

 
<body> 
 
<div id="container"> 
 
\t 
 
\t \t \t \t <header> 
 
       \t <div style="line-height:5%;"> 
 
    \t \t \t \t <br> 
 
\t \t \t \t \t </div> 
 
       <h2><a href="Title Goes Here.html" id="current">[Title Goes Here]:</a></h2> 
 
       <h4>Adventures in Design</h4> 
 
\t \t \t \t </header> 
 
       \t \t \t \t \t \t \t \t \t 
 
                <div id="content"> 
 
                <h2> Hello and welcome to [Title Goes Here], <br /> 
 
                one adventure in design, from websites to photos and beyond!</h2> 
 
                \t <div style="line-height:217px;"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
      \t \t \t \t \t \t \t \t \t \t <img src="Images/Front Page/Landscape.png" /> 
 
      \t \t \t \t \t \t \t \t \t \t \t </div> 
 
       
 
\t \t \t \t \t \t \t <div id="left_bar"> 
 
          <br /> 
 
          <h2><a href="About.html" id="current">ABOUT</a></h2> 
 
          <br /> 
 
          <h2><a href="#">PORTFOLIO</a></h2> 
 
          <br /> 
 
          <h2><a href="#">CONTACT</a></h2> 
 
          </div> 
 
\t \t \t 
 
\t \t \t \t \t \t <footer> 
 
         <br /> 
 
         <p>Last Updated: 05-08-2017</p> 
 
         </footer> 
 

 
</div> 
 

 
</body> 
 
</html>

1

次の2点にご留意ください

まず、あなたは正しくフォーマットリンクのhrefを持っています。原則として

href="Title Goes Here.html"

、ファイル名にスペースを省略し、代わりにダッシュに置き換えることをお勧めします。

href="title-goes-here.html"

第二に、それは画像のようなもののためのURLパスを書くことになるとの目標は、相対的なルートディレクトリからファイルを取得している場合、あなたはスラッシュですべてのURLを導くべきです。

background-image:url(/Images/All%20Pages/Background.png);

+0

私は本当にそれをやっているはずですが、まだスペースでも動作することがわかります。これが私のやり方です。 – Lightparticle

0

.header CSSのセクションで余分な "S" もあります。 ";"の後の背景イメージ行を確認してください。

header{ 
    width:1024px; 
    height:100px; 
    text-align:left; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    background-image:url(Images/All%20Pages/Top_Banner.png);s 
    display:inline; 
} 
+0

それは問題の原因となったわけではありませんが、それを指摘してくれてありがとう。 – Lightparticle

関連する問題