DreamweaverCS6上とブラウザ上の表示違

質問

DreamweaverCS6でホームページを作成しております。

画像に吹き出しをつけて、そこにテキストを配置するように、
下記のようにコーディングしています。

<div style="position: relative;"><img src="../img/aaaa.gif" alt="aaaa"><br />
<div style="position: absolute; top: 150px; left: 60px; width: 120px; height: 30px; font-size: 9pt; font-weight: bold; color: white; line-height: 180%; text-align: center;">
<p>あいうえお</p>
</div>
<div style="position: absolute; top: 150px; left: 370px; width: 80px; height: 30px; font-size: 13pt; font-weight: bold; color: white; line-height: 180%;">
<p>あいうえお</p>
</div>
<p>あいうえお</p>
<p>あいうえお</p>
</div>

ホームページは、一般的な2カラムで、左にメニュー、右にコンテンツといった配置です。

上記コードをブラウザ上で表示させると、Firefox,IE,chromeいずれも、きちんと右のコンテンツに表示されます。

しかし、DreamweaverCS6のソフト上でみると、左メニューの枠内に画像がはみ出ており、ブラウザ上ではきちんと表示できているのでいいのですが、なんだか気持ち悪くて、解決策がないかずっと考えています。

どうすれば、ソフト上でもきちんと表示できるのでしょうか？
それとも、相対位置や絶対位置を指定した場合は、ソフト上でバグのようなものがでることは仕方ないのでしょうか？

ご回答よろしくお願い致します。

回答No.2

DrFell · ベストアンサー

デザインビューは効率よくコーディングするためツールで、確認用途のものではありません。
確認にはライブビューやブラウザ、スマートフォンを使います。

バグではありません。使い分けを。

デザインビューの基本的な使い方は、以下を参考にどうぞ
★デザインビューもできる子
http://oshare.jugem.cc/?eid=767
★第1回：デザインビューは使えない？
http://www.atmarkit.co.jp/fwcr/design/tool/dw01/01.html

他にも、カスタマイズすることでもっともっと便利になります。

回答No.1

kosukejlampnet

http://help.adobe.com/ja_JP/dreamweaver/cs/using/WS753df6af718a350a-43cf1449133aea5253f-8000.html

こちらを読んでください。

「ライブビュー」についての説明ですが、いきなり「デザインビューでは、ページが Web でどのように表示されるかプレビューできます。ただし、ブラウザーとまったく同じように表示することはできません。」と書かれていますね。

デザインビューでは正確に表示できないので「ライブビュー」が用意されています。

※自分もDW使っていますが、実際にはどちらも使っていませんね。確認はもっぱら「F12」です。