DWまた質問させていただきます。今度はプレビューでCSSが反映してくれません。

締切済

質問者：naka_2007
質問日時：2008/06/17 10:18
回答数：3件

お世話になっております。
つい先日もこちらのカテゴリにて質問をさせていただきました。

「dreamweaverMXテーブル背景に影を付けたい」とう質問を
させていただきました。
http://oshiete1.goo.ne.jp/qa4105017.html?ans_cou …

その後、背景の影については
色々ネットを見て、
http://blog.info-rich.jp/archives/2007/03/post_9 …

というサイトを参考にしたら無事できました。

しかしまた新たな問題が…。いろいろと調べましたが
解決が自分でできなかったので質問をさせていただきます。

背景に影を付ける方法は、上記urlの通り、800pxのテーブル幅にぼかしを付けて縦は1pxの画像を作成し、

上記urlの通り<div id="container"> </div>タグを追加し、

#outer {
margin: 0 auto;
width: 830px;
background: url(画像URL) repeat-y center top;
}

のCSSで背景を付けました。

dreamweaver上のレイアウトではこれで問題なく表示されています。
ですが…、プレビューで確認するとこの背景影が反映されておりません。

ちなみにPCはintelMacのためかInternet Explorerがインストール
されておりませんでしたので、（ダウンロートしようと探したのですが、
MacのInternet Explorerが見つからず、諦めてしまったのですが…）

確認ブラウザはSafariかFireFoxで行っております。

FireFoxではきちんと背景が反映されているのですが、
Safariでは反映してくれません。

どうすれば全てのブラウザ上できちんと表示されるのでしょうか？

影を付けているサイトはたくさんありますが、Safariでも問題なく
表示されておりますし…。

ド素人のため専門用語はあまり分からないため
分かりやすく教えて頂けると助かります。

知識不足で恐縮ですがアドバイス頂けたらと思います。

何度もすみません、宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： tsunami02
回答日時：2008/06/17 15:37

＞ackground: url(back.jpg) repeat-y center top;

のback.jpgでしょう。imgフォルダを置いてないのなら../を付けましょう。imgフォルダは最低、置きましょう。あとbackground.cssの名前の付け方も良くないと思います。違うファイル名にしてください。

back.jpgのリンクを再度貼りなおしてください。ホームページを制作する時はイメージフォルダをおきてください。そのフォルダにイメージを入れるのが一般的です。それとファイルの名前の付け方はhtml、CSSで記述される記述は避けます。

＞styleで直接htmlに書き込むのはどうかと思いますよ、CSSを使う意味が薄れてきますから。

CSSを使う目的としてHTMLとCSSを分けて、HTML側の記述を少なくしクローラに出来るだけキーワードを読み込ませるためや、更新作業をしやすくするなどがあります。styleで記述すれば、それだけhtml側の記述が増えますし、全ページ共通なら一箇所にまとめた方が更新作業もらくです。またトップページのみ変えたいのであればDWのテンプレート機能で間に合います。

- 0
- 件

通報する

この回答へのお礼

何度もありがとうございます。
何とか自力で解決ができました。
たくさん勉強が必要なようです(><)何回も回答ありがとうございました。感謝しております！

通報する

お礼日時：2008/06/17 22:03

No.2

回答者： tsunami02
回答日時：2008/06/17 13:54

問題はCSSの

background: url(back.jpg) repeat-y center top;
のback.jpgでしょう。imgフォルダを置いてないのなら../を付けましょう。imgフォルダは最低、置きましょう。あとbackground.cssの名前の付け方も良くないと思います。違うファイル名にしてください。

ホームページの制作は、はじめてですか？
styleで直接htmlに書き込むのはどうかと思いますよ、CSSを使う意味が薄れてきますから。

この回答への補足

回答ありがとうございます。
すみません、紙媒体専門でHP制作をしたことがありません…。
ですが会社のHP制作を私に丸投げされて、悪戦苦闘しております。

こうしたいという完成イメージはあるのですが、技術がままならないので、1つ1つ問題を解決してイメージに近づけているところです。

回答してくださった、

＞ackground: url(back.jpg) repeat-y center top;
のback.jpgでしょう。imgフォルダを置いてないのなら../を付けましょう。imgフォルダは最低、置きましょう。あとbackground.cssの名前の付け方も良くないと思います。違うファイル名にしてください。

＞styleで直接htmlに書き込むのはどうかと思いますよ、CSSを使う意味が薄れてきますから。

も、申し訳ございません、よく意味がつかません…。

できれば初心者にも分かるように、細かく教えて頂けないでしょうか？(><)

補足日時：2008/06/17 14:07

通報する

- 0
- 件

通報する

No.1

回答者： tsunami02
回答日時：2008/06/17 12:19

＞dreamweaver上のレイアウトではこれで問題なく表示されています。

あくまでdreamweaverはdreamweaverです。完全なものではありません。

ブラウザが絶対的なものです。dreamweaverは信用しないように。

こんだけの情報量では解決はできません。
情報をもっとください。htmlページとCSSの全ての記述をのせてください。前の記述が影響を与えている場合も多いので。

この回答への補足

言葉足らずで申し訳ございません。

DW作成コードは

<style type="text/css">

</style>
<title>テンプレート</title>
<link href="background.css" rel="stylesheet" type="text/css">
<link href="text.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">

</script>
<body>
<div align="center">
<div id="outer">
　<div id="container">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<tr>
<td width="15" rowspan="5" valign="top"></td>
<td height="100" colspan="3" valign="top"></td>
<td width="420" valign="top"></td>
<td width="14" rowspan="5" valign="top"></td>
</tr>
<tr>
<td height="35" colspan="4" valign="top"></td>
</tr>
<tr>
<td width="178" height="300" valign="top"></td>
<td width="10" rowspan="3" valign="top"></td>
<td colspan="2" rowspan="3" valign="top"></td>
</tr>
<tr>
<td height="180" valign="top"></td>
</tr>
<tr>
<td height="248" valign="top"><table width="173" border="0" cellspacing="1" cellpadding="1">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table></td>
</tr>
<tr>
<td height="17" colspan="6" valign="top"></td>
</tr>
<tr>
<td height="50" colspan="6" valign="top"></td>
</tr>
<tr>
<td height="1"><img src="../../../../homepage/spacer.gif" alt="" width="15" height="1"></td>
<td><img src="../../../../homepage/spacer.gif" alt="" width="178" height="1"></td>
<td><img src="../../../../homepage/spacer.gif" alt="" width="10" height="1"></td>
<td width="163"><img src="../../../../homepage/spacer.gif" alt="" width="163" height="1"></td>
<td><img src="../../../../homepage/spacer.gif" alt="" width="420" height="1"></td>
<td><img src="../../../../homepage/spacer.gif" alt="" width="14" height="1"></td>
</tr>
</table>
</div>
</div>
</div>
</body>

背景に当て込んでいるCSSは

#outer {
margin: 0;
width: 830px;
background: url(back.jpg) repeat-y center top;

です。これで問題点が発覚しますでしょうか…。
すがる思いです。

お手数御かけ致しますが、アドバイス宜しくお願い致します。