締切済み

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

2008/06/17 10:18

お世話になっております。つい先日もこちらのカテゴリにて質問をさせていただきました。「dreamweaverMXテーブル背景に影を付けたい」とう質問をさせていただきました。 http://oshiete1.goo.ne.jp/qa4105017.html?ans_count_asc=20 その後、背景の影については色々ネットを見て、 http://blog.info-rich.jp/archives/2007/03/post_99.html というサイトを参考にしたら無事できました。しかしまた新たな問題が…。いろいろと調べましたが解決が自分でできなかったので質問をさせていただきます。背景に影を付ける方法は、上記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でも問題なく表示されておりますし…。ド素人のため専門用語はあまり分からないため分かりやすく教えて頂けると助かります。知識不足で恐縮ですがアドバイス頂けたらと思います。何度もすみません、宜しくお願い致します。

noname#99542

ホームページ作成ソフト
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

みんなの回答

tsunami02
ベストアンサー率23% (16/68)

2008/06/17 15:37 回答No.3

＞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のテンプレート機能で間に合います。

質問者

お礼 2008/06/17 22:03

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

tsunami02
ベストアンサー率23% (16/68)

2008/06/17 13:54 回答No.2

問題はCSSの background: url(back.jpg) repeat-y center top; のback.jpgでしょう。imgフォルダを置いてないのなら../を付けましょう。imgフォルダは最低、置きましょう。あとbackground.cssの名前の付け方も良くないと思います。違うファイル名にしてください。ホームページの制作は、はじめてですか？ styleで直接htmlに書き込むのはどうかと思いますよ、CSSを使う意味が薄れてきますから。

質問者

補足 2008/06/17 14:07

回答ありがとうございます。すみません、紙媒体専門でHP制作をしたことがありません…。ですが会社のHP制作を私に丸投げされて、悪戦苦闘しております。こうしたいという完成イメージはあるのですが、技術がままならないので、1つ1つ問題を解決してイメージに近づけているところです。回答してくださった、＞ackground: url(back.jpg) repeat-y center top; のback.jpgでしょう。imgフォルダを置いてないのなら../を付けましょう。imgフォルダは最低、置きましょう。あとbackground.cssの名前の付け方も良くないと思います。違うファイル名にしてください。＞styleで直接htmlに書き込むのはどうかと思いますよ、CSSを使う意味が薄れてきますから。も、申し訳ございません、よく意味がつかません…。できれば初心者にも分かるように、細かく教えて頂けないでしょうか？(><)

tsunami02
ベストアンサー率23% (16/68)

2008/06/17 12:19 回答No.1

＞dreamweaver上のレイアウトではこれで問題なく表示されています。あくまでdreamweaverはdreamweaverです。完全なものではありません。ブラウザが絶対的なものです。dreamweaverは信用しないように。こんだけの情報量では解決はできません。情報をもっとください。htmlページとCSSの全ての記述をのせてください。前の記述が影響を与えている場合も多いので。

質問者

補足 2008/06/17 12:37

言葉足らずで申し訳ございません。 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; です。これで問題点が発覚しますでしょうか…。すがる思いです。お手数御かけ致しますが、アドバイス宜しくお願い致します。

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