dreamweaverで画像の右に文字を回り込ませると背景色も上にあがってしまいます

2023/08/08 07:44

このQ&Aのポイント

dreamweaverを使用して画像の右側にテキストを回り込ませる際、背景色が上に移動してしまう現象が起きます。
購入した「これからはじめるdreamweaverの本」に従って試したところ、問題は発生しませんでした。
画像の右側にテキストを表示させること自体は成功していますが、div要素の範囲もテキストと一緒に上に移動してしまい、背景色も一緒に移動してしまいます。なぜ背景色が表示されないのか、ご存知の方がいらっしゃいましたら教えてください。

ベストアンサー

dreamweaverで画像の右に文字を回り込ませると背景色も上にあがってしまいます。

2009/03/07 11:43

すみません。ちょっと分かりにくいのでタグを貼り付けます。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="contents"><img src="file:///C|/Documents and Settings/administrator.JITSUGYO/デスクトップ/佳山/dreamweavercs3 cd-rom/lesson01/images/item_02.jpg" width="250" height="200" class="photo" /> 作家さんがひとつひとつ丁寧に心をこめて作り上げた器は見ているだけでも心がなごみます。器をひとつ変えるだけで食卓の雰囲気ががらりと変わり、ちょっと贅沢な気分があじわえます。 </div> </body> </html> 「これからはじめるdreamweaverの本」を購入し、その通りにやったときは問題なかったんです。自分で画像を用意して、テキストを打ち、divを挿入。そしてdivにcssルールを設定（このときに背景色を設定）したまではよかったのですが、その次に「.photo」に対して回り込みの設定をしたら、おかしくなります。たしかに画像の右側にテキストが表示されるのですが、どうやらdivの範囲（？）もテキストと一緒に上にいってしまい、せっかく指定した背景色までテキストにくっついていってしまっている感じです。画像の右側にも背景色が表示されないのはどうしてなんでしょうか？どなたかお分かりの方いらっしゃいましたらよろしくお願いします。

riko421
お礼率75% (62/82)

HTML
回答数1
ありがとう数1

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

質問者が選んだベストアンサー

ベストアンサー

askaaska
ベストアンサー率35% (1455/4149)

2009/03/07 11:56 回答No.1

その画面はdreamweaverのプレビュー画面だと思うけど。 dreamweaverのプレビュー画面と実際にブラウザに表示されるものは結構違うわよ。正しく表示されないの。一度ブラウザで見てはどう？多分あなたの予定しているとおりに表示されると思うわ。

質問者

お礼 2009/03/07 12:55

ありがとうございます。おっしゃるとおりでした^^

関連するQ&A

CSSで文字が流れ込んでしまいます
CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>
- ベストアンサー
- HTML
ホームページの背景画像が途切れてしまう。
こんにちは。現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。ホームページの内容は <div></div>の中にinnerというclassを作ってスタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで途切れてしまいます。それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。原因を自分でも探してみたのですが、見つかりませんでした。もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？よろしくお願いします。ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------
- ベストアンサー
- デザイナー・クリエイティブ職
【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。やりたいことは例えば↓のページのように、背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。初歩的な質問ですみませが、「ここがおかしい」という点と、もし可能であれば「ふつうはこうする」というのがあれば教えてください。以下作りかけですがcssとhtmlです。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container">  <img src="img/img_main.jpg" alt="タイトル" />  <div id="map">  </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer">  </div> </body> </html>
- 締切済み
- CSS
ホームページの背景画像が表示されない。
ホームページ作成を行っておりますが、どうしても背景画像が表示しなくて困っております。構成としては、ものすごく単純な構成なのですが・・。構成は図に記載させていただきました。大枠を【Contents】というDiv要素で囲み、その中に【mainArea】【subArea】をDiv要素配置しております。【mainArea】はFloat：Left【subArea】はFloat:Rightを設定し左右に配置しております。【subArea】の中にさらに【6Support】というDiv要素を作り、その中に背景画像を設置したところブラウザにて表示されません。色々試してみたのですが、どうしても表示されずにお手上げ状態です。詳しい方にアドバイス・ご教授いただければ幸いです。 ※ちなみに、上記構成にて【subArea】に背景を設定すると問題なく表示されます。【HTML】 <div id="contents"> <div id="mainArea"> id "mainArea" の内容がここに入ります</div> <div id="sideArea"> <div class="6support"> 背景画像をおきたい。</div> </div> </div> 【CSS】 #contents { height: 1000px; width: 960px; margin-right: auto; margin-left: auto; } #mainArea { float: left; height: 800px; width: 700px; } #sideArea { float: right; height: 800px; width: 250px; } #sideArea .6support { height: 400px; width: 240px; background-repeat: no-repeat; margin-left: 7px; background-image: url(images/6supportBack.jpg); } 一応、原状を「 http://soltsuger.web.fc2.com/test.html 」にアップさせていただいております。参考になればご覧ください。ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************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=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を位置指定したいのですが、うまく反映されませんでした。「 background-position: center center; 」「 background-position: center center; 」がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが画面サイズを１０２４×７６８から１２８０×１０２４に変更すると中央から左寄りにずれてしまいます。下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたらアドバイスの程宜しくお願いいたします。－画面サイズを変更すると位置がずれてしまうソース－ @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- － HTML － <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" /> <img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- －検索でヒットした位置指定のソース－ @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- － HTMLは上記と同じ－
- ベストアンサー
- HTML
CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
firefoxで見るとdiv背景画像がスクロールで消えてしまいます
http://www.geocities.jp/testac2007/ bodyに「top_bg.gif」という背景画像指定をした上で更にdivを重ね、そのdiv内に「side_860.gif」という背景画像を指定しています。 ieだと意図した通りに表示されるのですが、 FirefoxやNetscapeで確認すると、表示されているページより下部のスクロール以下の背景画像が表示されません。何とか同症状についてネットで検索し試行錯誤してみたのですが、解決に至りませんでしたのでこちらでヘルプさせていただきました。皆さんのお知恵を拝借いただきたいです。 ■■■HTMLの概要■■■ <body> <div id="side_bg"> <div id="outline"> <div id="A01">○○○</div> <div id="A02"> <div class="A02_left">○○○</div> <div class="A02_right">○○○</div> <br class="c-both"> </div> <div id="B01">○○○</div> </div> </div> </body> ■■■CSSの概要■■■ body { margin:0px auto; background-image:url(images/top_bg.gif); } #side_bg { width:860px; height:100%; margin:0 auto; background:#ffffff url(images/side_860.gif); overflow:visible; } #outline { width:830px; margin:0 auto; background-color:#FFFFFF; } .c-both { clear:both;} #A01{ width:830px; margin:15px 0px 4px 0px; overflow: auto; } #A02{ width:830px; margin:0px 0px 4px 0px; overflow: auto; } .A02_left{ width:304px; float:left; } .A02_right{ width:526px; float:right; margin-top:4px; } #B01{ width:730px; margin:20px 50px; }
- ベストアンサー
- CSS
div入れ子の背景画像
【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout"> 　<div id="menu">メニュー</div> 　<div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、上記のCSSだとIEはOKなのですが、foxが表示されません。メニューidにはデザイン上背景画像は設定できません。また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。どうすれば良いでしょうか？知恵をお貸しいただけますでしょうか。宜しくお願い致します。
- ベストアンサー
- HTML