0
私は無料のテンプレートを使って簡単なウェブサイトを作っています。私のバージョンのイメージは表示されていないが、デモバージョンのイメージが動作しているので、私は混乱していると私は貼り付けコピーので、両方がまったく同じCSSファイルとHTMLを持っています。私はそれらを以下に掲示します。私の混乱は、htmlやcssスタイルシートのいずれかのイメージが表示されないという事実にあります。スタイリングは画像のためにありますが、ファイルの場所へのリンクはありません。 2つの質問。画像が私のレールアプリに表示されないのはなぜですか？
このサイトがどのように見えるかです：、あなたが背景を見ることができるよう
https://cherry-cupcake-30790.herokuapp.com/
ナビゲーションバーの背景と：これは私のサイトのように見えるものである
http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
メイン画像が欠落していますが、他のスタイリングとCSSが実装されています。
- なぜ私のバージョンに画像が表示されないのですか？
- デモ版に画像が表示されるのはなぜですか？画像の実際のファイル位置を参照していないようです（画像のスタイリングのみ）。
ありがとう。
htmlファイル：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>NightBeach | florida web design</title>
</head>
<body>
<div id="container">
<div id="mainpic">
<h1>Green<span class="off">Mountain</span></h1>
<h2>A template by Bryant Smith</h2>
</div>
<div id="menu">
<ul>
<li class="menuitem"><a href="#">Home</a></li>
<li class="menuitem"><a href="#">About</a></li>
<li class="menuitem"><a href="#">Products</a></li>
<li class="menuitem"><a href="#">Services</a></li>
<li class="menuitem"><a href="#">Design</a></li>
<li class="menuitem"><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>You may use this template in any manner you like. All I ask is that you leave the link back to my site at the bottom of the page. </h2>
<p> </p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="footer"><h3><a href="http://www.bryantsmith.com">florida web design</a></div>
</div>
</div>
</body>
</html>
CSSファイル：問題1について
/* A Free Design by Bryant Smith (bryantsmith.com) */
body {
margin: 0;
padding: 0;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 13px;
color: #061C37;
background: #EEEFE4;
background-image:url(images/background.png);
background-repeat:repeat-x;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
#container
{
display: block;
height:auto;
position: relative;
width: 940px;
}
#mainpic h1
{
position:absolute;
text-align:right;
color:#F8FDEE;
font-size:30px;
color:#FFF;
left:60px;
top:20px;
}
#mainpic h2
{
position:absolute;
text-align:right;
color:#E1E7F7;
left:60px;
top:50px;
}
#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;
}
.off
{
color:#3A6028;
}
#menu
{
background-image:url(images/menu.png);
background-repeat:no-repeat;
width:940px;
height:69px;
float:left;
clear:both;
}
#content
{
width:880px;
height:auto;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
}
#footer
{
width:inherit;
height:auto;
}
#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#7198E1;
}
#menu ul {
list-style: none;
padding: 0px;
margin-left:auto;
width:900px;
}
#menu li {
list-style: none;
padding: 0px;
display: inline;
}
#menu a {
float: left;
width: 150px;
height: 40px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
padding-top: 17px;
font-size: 15px;
}
#menu a:hover{
color:#BEE399;
}
#content p
{
}
html, body {
text-align: center;
}
p {text-align: left;}
[1]: http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
yesです。しかし、私のCSSが空であれば、どういう意味ですか？あなたは詳細を教えてくれますか？限り、私はスタイルシートのフォルダ内の私のレールアプリのCSSファイルがあり、これはウェブサイトに含まれていない必要がありますか？ – Owen
ウェブサイトのリンクをもう一度お試しください。私はherokuに前にプッシュしなかった。その固定された今、あなたはすべてのスタイリングがイメージから離れているのを見ることができます。 https://cherry-cupcake-30790.herokuapp.com/ – Owen
私はクロムのdevtoolsによると、あなたのウェブサイトにはアプリケーションのCSSファイルが含まれていますが、空のコンテンツはありません。私はCSSファイルをスタイルシートに入れていますが、application.cssには含めませんでした。 –