DreamweaverCS6上とブラウザ上の表示違
- DreamweaverCS6でホームページを作成している際に、ブラウザ上とソフト上で表示が異なる問題が発生しています。
- 画像に吹き出しを付け、テキストを配置するコーディングを行っていますが、DreamweaverCS6上では画像が枠からはみ出てしまい、ブラウザ上では正しく表示されます。
- 相対位置や絶対位置の指定による問題かもしれませんが、解決策を探しています。ソフト上でも正しく表示する方法があるのか教えてください。
- ベストアンサー
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のソフト上でみると、左メニューの枠内に画像がはみ出ており、ブラウザ上ではきちんと表示できているのでいいのですが、なんだか気持ち悪くて、解決策がないかずっと考えています。 どうすれば、ソフト上でもきちんと表示できるのでしょうか？ それとも、相対位置や絶対位置を指定した場合は、ソフト上でバグのようなものがでることは仕方ないのでしょうか？ ご回答よろしくお願い致します。
- f2f2b22f2
- お礼率63% (133/210)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
デザインビューは効率よくコーディングするためツールで、確認用途のものではありません。 確認にはライブビューやブラウザ、スマートフォンを使います。 バグではありません。使い分けを。 デザインビューの基本的な使い方は、以下を参考にどうぞ ★デザインビューもできる子 http://oshare.jugem.cc/?eid=767 ★第1回：デザインビューは使えない？ http://www.atmarkit.co.jp/fwcr/design/tool/dw01/01.html 他にも、カスタマイズすることでもっともっと便利になります。
その他の回答 (1)
- kosukejlampnet
- ベストアンサー率44% (126/282)
http://help.adobe.com/ja_JP/dreamweaver/cs/using/WS753df6af718a350a-43cf1449133aea5253f-8000.html こちらを読んでください。 「ライブビュー」についての説明ですが、いきなり「デザインビューでは、ページが Web でどのように表示されるかプレビューできます。ただし、ブラウザーとまったく同じように表示することはできません。」と書かれていますね。 デザインビューでは正確に表示できないので「ライブビュー」が用意されています。 ※自分もDW使っていますが、実際にはどちらも使っていませんね。確認はもっぱら「F12」です。
関連するQ&A
- FireFox3.5.3でfont-familyが効きません
FireFox3.5.3で全くfont-familyが効かないのですが、 何か設定があるでしょうか。 使ったhtml --------------------------------------------------------------------------- <html> <head><title>書体テスト</title></head> <body> <div style="font-size:120%;padding:40px 10px 5px 10px;font-weight:bold;line-height:170%;font-family:'ＭＳ Ｐ明朝';"> フォントのテスト </div> <div style="font-size:120%;padding:40px 10px 5px 10px;font-weight:bold;line-height:170%;font-family:'ＭＳ 明朝';"> フォントのテスト </div> <div style="font-size:120%;padding:40px 10px 5px 10px;font-weight:bold;line-height:170%;font-family:serif;"> フォントのテスト </div> <div style="font-size:120%;padding:40px 10px 5px 10px;font-weight:bold;line-height:170%;"> フォントのテスト </div> </body> </html> --------------------------------------------------------------------------- 各種ブラウザで確認しましたが、FireFoxだけ全くfont-familyが効きません。テスト結果は添付のとおりです。 FireFoxの設定は、オプションのコンテンツ・フォントと配色は「メイリオ」で詳細設定は以下のとおり プロポーショナル：ゴシック 明朝体：MS P明朝 ゴシック体：メイリオ 等幅：メイリオ よろしく、お願いします。
- ベストアンサー
- HTML
- 囲み線の上線が表示されません
囲み線の上線が表示されません。 以下のタグのどの部分が悪いのかわかりませんので、教えていただけないでしょうか。 よろしくお願いします。 <div style=\"position:absolute; top:70px; left:400px; height:100px;\"> <font color=\"#ffffff\" size=\"2px\" style=\"border:solid 1px; padding:2px;\">アクセス</font></div>
- ベストアンサー
- その他（インターネット・Webサービス）
- IE6とFireFoxで表示が異なる。
以下のような単純な作りのWEBサイト（一部を抜粋してます）なのですがIE6とFireFoxでは表示位置が異なり、IE6に合わせるとFireFoxで表示されず、FireFoxで合わせるとIE6に表示されなくなってしまいます。 <DIV>の指定などが間違っているのでしょうか？ IE6とFireFoxどちらも同じように表示するためにはどうしたらよいでしょうか？ <TABLE border="0" STYLE="position:absolute;left:0;top:0;width:778;height:790;" cellpadding="0" cellspacing="0" > <TBODY> <TR> <TD valign="top" align="center" > <DIV CLASS="F12" STYLE="position:absolute;left:140;top:13;width:110;height:27;"> <P class=MsoNormal style="MARGIN: 0mm 0mm 0pt"><SPAN style="text-fit: 52.25pt; mso-text-fit-id: -1204070143"><B style="mso-bidi-font-weight: normal"><SPAN style="COLOR: #c5525c; FONT-FAMILY: 'ＭＳ ゴシック'; LETTER-SPACING: 1.65pt; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt"><FONT size=2>会社</FONT></SPAN></B></SPAN> </P> </DIV> <DIV CLASS="F12" STYLE="position:absolute;left:235;top:15;width:157;height:27;"> <SPAN style="text-fit: 52.25pt; mso-text-fit-id: -1204070143"><B style="mso-bidi-font-weight: normal"><SPAN style="COLOR: #c5525c; FONT-FAMILY: 'ＭＳ ゴシック'; LETTER-SPACING: 1.65pt; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt"><FONT size=3> <P class=MsoNormal style="MARGIN: 0mm 0mm 0pt"><SPAN style="text-fit: 105.4pt; mso-text-fit-id: -1204068352"><B style="mso-bidi-font-weight: normal"><SPAN style="FONT-SIZE: 14pt; COLOR: #c5525c; FONT-FAMILY: HG丸ゴシックM-PRO; LETTER-SPACING: 2.1pt; mso-font-kerning: 0pt; mso-hansi-font-family: 'ＭＳ ゴシック'">サンプル</SPAN></B></SPAN><B style="mso-bidi-font-weight: normal"><SPAN lang=EN-US style="FONT-SIZE: 14pt; COLOR: #c5525c; FONT-FAMILY: HG丸ゴシックM-PRO; mso-hansi-font-family: 'ＭＳ ゴシック'"><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></SPAN></B></P></FONT></SPAN></B></SPAN> </DIV> </TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- HTML
- ブラウザの中央へ表示させたいのですが教えてください。
こんにちは CSSを使ってサイトをブラウザの中央へ表示させたいのですが うまくいかなくて、困っています。 div.box3 { /* タイトルロゴ */ width: 820px; height: 152px; position: absolute; top: 10px; left: 180px; text-align: center; } </head> <body> <div class="box3">aaaa</div> など <body align="center"> などを使って試してみたのですが、うまくいきません。 text-align: center;を無効にしてしまう原因・理由など があれば教えて下さい。どうぞ宜しくお願いします。
- 締切済み
- HTML
- float: leftで横に並べたら、サファリだけ
float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 ＩＥやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？
- ベストアンサー
- HTML
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- ボタンタグを作っているのですが…
<input style="font-size:15; width:150px; height:30px; top: 200px; left: 150px; position: absolute;" type="button" value="Top" style="border-width:4"> 上のように書き、topの後ろの値とvalueの中身だけ変えて、ボタンの数だけ並べてみたのですが、もっとすっきりした書き方はありませんか。<div style …と書いてみたりいろいろやってみたのですが、うまくいきません。 また、font-sizeの後ろの15は何でしょうか。ptやpxなら単位が必要だと思うのですが。さらに、値を変えてもフォントの大きさが変わらないのですが、なぜでしょうか。 よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- CSSで左側の余白
CSS本を見ながら苦闘しています。 下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。 どうしてなのでしょうか。 また、どのようにしたら良いのでしょうか。 レイアウトは div#top div#top1 で２段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css"> <!-- body { font-size:10pt ; line-height:20px ; background-color:white; color : black ; } td { font-size:10pt; line-height:16px ;} div#top { position: absolute; top:0px; } div#top1 { position:absolute; top:95px ; } div#menu { float:left; } div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; } // --> </style>
- ベストアンサー
- HTML
- 画像を重ねて表示する方法を知りたいです。
おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <div style="position: relative;"> <img src="sideback.gif" width="182" height="812" alt="sideback"> <div style="position: absolute; top: 30px; left: 15px;"> <span style="position:absolute; top:10px; left:10px"><img src="sidemanu-canner.gif" alt="メニュー"> </span> </div> </div -------------------------------------------------- 画像を重ねたいんですが、firefoxでプレビューすると （IEでも同じです。） 下の画像（背景）の上に上の画像が表示されるはずだった場所に四角い3つぐらい色のついたマークがでて （IEは小さな資格に×マーク） 上に表示されるはずだった画像が表示できません どうしたらいいでしょうか？
- ベストアンサー
- HTML
- タグの修正に力をかしてください
ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線：「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線：「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>
- ベストアンサー
- HTML
