• 締切済み

Dreamweaver8でページに付けた影の画像がプレビューで表示されない

他の方の質問&回答を見て、ページに影を付ける方法を知りました (1)Fireworksで幅20ピクセル、縦30ピクセルの影の画像を作りました。 (2)terriroryタグ(幅:770、背景色:白)で囲んだコンテンツの背景画像として、水平位置750ピクセル、垂直位置0、リピートは縦方向に設定してこの画像を挿入しました。 (3)作成画面では、きれいに770ピクセルにおさまり、縦に影らしく表示されました。ステータスバーのterritoryタグを クリックすると影の画像もterritory内に囲まれていることが確認できます。 (4)でもプレビューで見ると影はついていません。 「全てを保存する」してみても変わりません。 他を変更してプレビューしてみるときちんと変更されたものが表示されます。 どこかの設定がおかしいのでしょうか...。 Bodyは背景色を薄い青にしています。幅は自動です。 マージン、余白は0にしています。関係ないですかね。 どなたか教えてください~!おねがいします。

みんなの回答

  • crepon133
  • ベストアンサー率51% (399/776)
回答No.2

わたしならこんな手順になります 1)あらかじめ #territory のCSS定義を作る 2)デザインビューですべて選択→挿入→  レイアウトオブジェクト→Divタグを挿入→IDを指定 * divタグの改行は「前、中間、後」に設定してあります 手順の問題ではないと思いますが、ソースを見ないと何とも言えません。

yuki427
質問者

お礼

お礼が遅くなり、申し訳ありませんでした。 どうもありがとうございました。 影を付けることができました。

  • crepon133
  • ベストアンサー率51% (399/776)
回答No.1

こんな感じですか? body { margin:0px; padding:0px; background-color:#f3fcff; } #terrirory { width:770px; background-image:url(img/bg.gif); background-repeat:repeat-y; background-position:750px 0px; background-color:#ffffff; } #content { width:750px; } <div id="terrirory"> <div id="content"> ああああああああああああああああああああああああ </div> </div>

yuki427
質問者

補足

ご回答ありがとうございます。 はい、bodyとterritoryはほぼそんな感じですが、#contentsタグは作っていません。カタカナでコンテンツと書いてしまったのが紛らわしかったですね、すみません。「内容すべて」という意味で書きました。 私がしたことは、ページを新しく作る際に、レイアウトモードで幅750ピクセルのテーブルを作り、「編集」→「すべてを選択」して#territoryタグを挿入しました。そして、テーブルの中にセルやCSSを使って内容を作成しました。そして、テーブルの終わる位置(750ピクセル)から、幅20ピクセルの影の画像を配置した、という感じです。 作成画面ではぴったり770に収まって影の画像が挿入されるのに、プレビューでは表示されません。プレビューではその20ピクセル幅のところに、territoryで設定した背景色が表されていました。 背景画像より背景色の方が優先されるのですか?そんなわけないですよね。すみません、初心者です。 作り方、間違っていますでしょうか…?

関連するQ&A

  • Dreamweaver CS3で背景画像が表示されません

    セールスレター(ホームページ)の背景に画像を使いたいので CSSの「body」から背景→背景イメージの欄に使用したい画像を設定しています。 理想はグラデーション画像なのですが、 どんな画像を入れても表示されません。 (グラデーションでないものも、ファイルサイズ等に関係なく表示されません) jpg画像で同じフォルダ内に入っています。 背景色は問題なく表示されます。 ホームページ内の背景でない部分はdivで囲み影画像を背景にしてあります。 (幅680px,高さ指定なし マージン:左右自動、上下0 影の画像をY軸にリピート) body:(幅高さ指定なし、マージン上0、背景に入れたい画像) ページプロパティから背景画像を指定した場合は表示されますが、 ページのTOPのみグラデーションのある画像にしたいため リピートするとグラデーションが何度も繰り返されてしまいます。 そのため「固定」を使うためにCSSを使用しなければならないと思い CSSで表示する方法を探しております。 初心者なので何か初歩的なミスをしているかもしれません。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • Dreamweaver で右にずっーと続く背景の設定(スライスで書き出したファイルを使って)

    どなたか助けてください。 Fireworksで画像をスライスしてDreamweaverに反映させたのですが、そこでスライスした一番右の画像(幅は5ピクセルくらいで縦に長いです)を使って「背景イメージ」にしたいのですが、どんなにやってもできません。 一応、自分でしらべたり友人に聞いたりしてできるかぎりはためしたのですが上手くいきません。 自分が試した方法は↓ ●画像を選び、インスペクタ(パレット)で「背景を選択」してから「幅を100%」に設定・・・これではダメでしょうか? いただいたサンプルデータを見るとこのような設定になっていて、しっかりと右にずっーと続いています。 画像全体にドロップシャドウなどを使っているようで、「ページプロパティ」の背景の設定ではどーしてもダメなのです。 お詳しい方、是非アドバイスをお願いします。

  • Dreamweaver Fireworks

    ビギナーです。ご助言お願いします。 (1)Fireworksで、写真のタテヨコをピクセル単位で指定して切り取る方法は (2)Dreamweaverに300×100ピクセルのレイアウトセルを作り、そこに Fireworksで加工した300×100ピクセルの画像を貼り付けたいけど、DreamweaverのファイルウィンドウのimageからD&Dしても、ペースとしようとしても、目的のセルに表示できません。 (3)Fireworksで軽くした画像を サイト用のimageファイルに保存し、Dreamweaverに貼り付けようとしたら、イメージプレビューに軽くする前の重たい画像が表示されていました。 アドバイスよろしくお願いします。

  • dreamweaver使用して、画像のプレビューが表示されない

    ホームページを制作していて困っているのですが、 現在ドリームウィバーを使用してホームページを作っています。 テーブルタグ内にレンタルカウンターの画像を配置すると、 プレビューで背景画像のみ表示されて、 テキストや他の配置した画像が全部表示されなくなります。 ですがサーバーにアップすると、 問題無くレンタルカウンターの画像も含めて表示されるのですが これはドリームウィバー上の設定の問題なのでしょうか? 作ったHTMLと同じフォルダー内に無いカウンターの画像のリンクを配置している事が原因なのでしょうか? 同じ経験をされた方や、お分かりになる方がいらっしゃったら教えてください。 よろしくお願いします!

  • Dreamweaverでテーブルを作ると

    Dreamweaver初心者なので初歩的な質問だとは思うのですが、よろしくお願いします。 ページを作成するときにテンプレートとしてテーブルを中央上に固定し、幅を700ピクセル、真ん中のセルを入れ子にして編集可能領域にしたいのですが。そこで問題があります。 〔1〕どうしてもテーブルの上と左に空白ができてしまいます。 〔2〕なにか微妙に縦の線(セルの幅)がずれているようです。 ■なにかよいページの設定やCSS、テーブルの設定方法があるのでしょうか? ■理想としては http://www.nikkansports.com/ のような感じにしたいのです。 ■上のページのようにテーブルの横に影のような背景をつけたいのですがどのようにすればよいでしょうか?

  • Dreamweaver CS4_影のつけ方

    お世話になります。 まず最初に、、HTMLどころかWeb全般についても、ど素人です。。 質問についてですが、どのように説明したらいいのかわからないので、まず参考URLをご確認いただけたら幸いです。 http://www.yokumoku.co.jp/index.html このような感じで白バック背景にうっすら影を入れたいと思っているのですが、CSSルール定義で背景に影つき白バック画像を配置しても、もちろんその他のページで縦の長さが変わってきますし.....ページのサイズに合わせてY軸に伸びる影など付けられるのでしょうか。。 文章を読んでお分かりと思いますが本当に素人で申し訳ございません。せめてHTMLの基本を覚えてから質問するべきなのですが、PCを唯一触れる私が急遽対応しなければいけない状態になってしまい、参考書片手に悪戦苦闘しております。。なんらかのヒントを頂けましたら本当に助かります。ちなみに関係ないかもしれませんがphotoshop、illustratorに関しては熟知しております。では、何卒よろしくお願い致します。

  • firefoxだとトップページのcss指定画像表示がずれる

    9枚の画像をトップページに表示します。 配置は 123 456 789 と言った形で、サイト全体の幅820ピクセルの、上と右10ピクセルずつ余白がある位置に3の画像が配置され、残りの8枚も隣接します。 イメージ ------------ │     123 │ │ 456 │ │ 789 │ │ │ │ │ ------------ 作成方法は 各々はh2タグのリンクです。 classのタグで名前をつけ (例えば1の画像は<h2 class="topleft><A href="###.html">###</a></h2>) スタイルシートで以下のように位置を指定しました。 .topleft { left: 369px; top: 10px;} ieでは問題なく表示されたのですが、firefoxの場合、 </body>の直前の文章の下に、下方向へ並んで表示されてしまいます。 firefoxでの配置イメージは ------------ │ │ │ │ │ │ │ │ │ │ ------------ 1111111111111 2222222222222 3333333333333 … という形で、サイトの幅いっぱいになるよう繰り返されています。 1111111111111 と 2222222222222 等、それぞれの画像の間は10ピクセルずつ間が空いています。 上記のような症状ですが、どのような原因、対処法が考えられますでしょうか? わかりにくい説明で恐縮ですが、よろしくお願いいたします。

  • IEでの画像表示がうまくいかない

    幅が3000ピクセル近くある大きな画像を(縦は630程) 背景にして、(Dream weaver3で作成)ブラウザでの表示を確認すると、 (そのままでは左3分の1しか表示されないため画像と同幅のテーブルを配置して画面がスクロールされるようにしています) ネスケではちゃんと表示されるのですが、 IE上では右側3分の1程が切れいて、かわりに左側3分の1の画像が表示されるという状態になってしまいます。 背景ではなく、ページ上に普通に配置した場合は、 こちらもIEのみ画像が横に1.5倍程拡大された表示になります。 IEでは大き過ぎる画像はうまく表示されないのでしょうか? アドバイスをお願いします!!!!

    • ベストアンサー
    • HTML
  • ホームページの背景画像をパソコン画面に合わせたい

    ホームページを閲覧しに来るユーザーに見せる背景画像をパソコンの画面の大きさに合わせて、画面枠と背景画像の大きさを揃えたいのですが、どのようなタグにすればいいのかわかりません。 1024×768ピクセルの画面でも 1280×1024ピクセルの画面でも 1920×1200ピクセルの画面でも 同じような背景画像として映るようにしたいです。縦と横の画像の比率は多少変化しても構いません。  どうか、ソースの記述をお願い申し上げます。お手数かけて誠に申し訳ありません。どうか、どうか、ご教授願います。

    • ベストアンサー
    • HTML
  • 画像に影付画像を背景に設定、影を上手に表現するコツ

    ホームページに影付きの画像を使用したく、 下記サイトを参考に作成しました。 All About form「画像を加工せず、複数の画像に「影」を付加」 http://allabout.co.jp/gm/gc/23995/ イラストレーターで影を作り、 フォトショップで画像化しました。 質問したいことは下記(1)~(3)です。 (1) サンプルの画像ですが、 左側の影のみが背景用に使用した画像で 右側がFirefoxで実際に表示した結果です。 左側のピンク色は、影の周りの余白の多さを 見せたかったから付けました。 かなり余白が多い気がします。 それを切り取ろうとしても 影がどこで終わっているのか分からず、 下手に手を出せませんでした。 この余白は気にする必要はないですか? (2) サンプル画像を見て頂くと、左側=右側、 とはならず影の形も濃さも変わってしまっています。 =にするコツがあれば教えて頂きたいです。 (3) 上記の参考サイト内で 「影の部分は、右側が幅7ピクセル、下側が高さ8ピクセル」 と、正確に寸法を把握しているのですが、 どのようにすれば分かるのでしょうか? 自分は、1px単位で何度も何度も微調整しましたが、 把握する方法があればとても助かります。 お願いします。 ~~~ 入力したソース ~~~ <style type="text/css"><!-- #shadow{ margin-left: 100px; margin-top: 100px; } #shadow img{ background-image: url("shadow_image.jpg"); background-repeat: no-repeat; background-position: right bottom; padding: 0px 60px 60px 0px; } --></style> <div id="shadow"><img src="sample.jpg" width="600" height="399"></div>

    • ベストアンサー
    • HTML

専門家に質問してみよう