※ ChatGPTを利用し、要約された質問です(原文:dreamweaverで画像の右に文字を回り込ませると背景色も上にあがってしまいます。)
dreamweaverで画像の右に文字を回り込ませると背景色も上にあがってしまいます
このQ&Aのポイント
dreamweaverを使用して画像の右側にテキストを回り込ませる際、背景色が上に移動してしまう現象が起きます。
購入した「これからはじめるdreamweaverの本」に従って試したところ、問題は発生しませんでした。
画像の右側にテキストを表示させること自体は成功していますが、div要素の範囲もテキストと一緒に上に移動してしまい、背景色も一緒に移動してしまいます。なぜ背景色が表示されないのか、ご存知の方がいらっしゃいましたら教えてください。
dreamweaverで画像の右に文字を回り込ませると背景色も上にあがってしまいます。
すみません。ちょっと分かりにくいのでタグを貼り付けます。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css">
<!--
#contents {
background-color: #FFC;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.photo {
display: block;
float: left;
}
-->
</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の範囲(?)もテキストと一緒に上にいってしまい、せっかく指定した背景色までテキストにくっついていってしまっている感じです。
画像の右側にも背景色が表示されないのはどうしてなんでしょうか?どなたかお分かりの方いらっしゃいましたらよろしくお願いします。
お礼
ありがとうございます。おっしゃるとおりでした^^