- ベストアンサー
position:relative で Dreamweaver の表示が崩れる
webブラウザでの表示は問題が無いのに、 Dreamweaverで見ると、表示が崩れます。。 ごく普通のブログデザインで、 #container の中に #main,#sub,#bottomがあり、 #main,#subのみfloat:leftを指定する段組み。 #bottomにはclear:leftが指定してあります。 この#bottomに、position:relativeを指定した途端に、 dwで見ると、#main,#subに続いて右に回り込んでしまうのです。 ちなみにposition指定をしたのは#bottomが最初の要素で、 試しに#containerにもposition指定してみたのですが、 状況は変わりません。 これを、Macのfirefox、safari、IE5.2…でチェックすると、 どのブラウザでも正常に表示されます。 崩れるのはdwのみ。。 とても気持ちが悪いです。 思い当たる状況、ないでしょうか？ よろしくお願いします！
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
Mac MX2004ではANo.1の回答に書かれたソースで ［main（青］［sub（黄］ ［ 赤 ］ ［bottom（緑］ このように表示されます。 CSSスタイルインスペクタとタグインスペクタを使ってposition:relativeを入れたり消したりしても、 デザインビューの表示は変わりませんでした。 ファイルを一度閉じて、開き直してみるとか、OSごと再起動してみてはいかがでしょうか。 （あ、日にちが経ってるのでもうされてますよね(^^;） もしくは、 #bottomにfloat:leftや、 #container { width:780px; } などのwidthを別の数字に変えるような指定がどこかに入ってませんか？ 同じファイルの別の場所や別のファイルで#bottom{float:left}と書かれていれば、それも適用されます。 必要ならfloat:none;で上書きしてみて下さい。 > …作業的には、デザイン表示モードでの確認がほぼ無意味でちとツライのですた＾＾； もともとDreamweaverはテーブルレイアウト+スタイルシートで個々のパーツのデザイン、というスタイルを取っているので、 スタイルシートでレイアウトしようとすると、結構崩れますね。 私もあきらめてます。 おそらくCS3（2007年7月現在の最新バージョン）で良くなっていると思いますが、 それ以外のバージョンではどうしようもないと思います。
その他の回答 (5)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
追記。自分の持ってる環境でサンプルの表示状態を確認したところ特に異常はありませんでした。
お礼
ありがとうございます。 ＞Dreamweaverで使ってるPrestoのバージョン その辺、また当たってみます。 とりあえずは、各種ブラウザで正常表示されてくれれば、気にしないことにします。 …作業的には、デザイン表示モードでの確認がほぼ無意味でちとツライのですた＾＾；
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
SeaMonkeyもFirefoxも同じGeckoなので表示にたいした違いはないです。拡張使ってる場合は別だけどね。 で、私はFirefoxよりもSeaMonkeyベースのSyleraが好きだからSyleraで確認を行いました、と言ってるわけです。 あんまり難しい理屈じゃない。 原因についてはDreamweaverで使ってるPrestoのバージョンなどに絡む気がしないでもないけど、もう少し詳しい人とかの手を借りて確かめたほうがいいのかも？ （Dreamweaverのバージョンとかが確かめられると何か手がかりが得られる？）
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
himajin100000さんのソースで実験したところ、Opera 9.20でもSeaMonkey(というか実際はSylera)でも問題なしです。 Operaを8とか7とかに変えれば問題が出るかもしれないけどそこまでやる気力はなし…。 DOCTYPE変えると表示が変わることはあるけど、問題現象には行き当たってない感じがするし、IE6で表示が違ってるのはこの場合論外だろうし…。 宜しければ具体的なソースを提示して欲しいです。
補足
わたしなんか全然持ってないブラウザで確認していただいて、、 ありがとうございます。 No.1さんの所にサンプル出しましたので、どうぞよろしくお願いします！
- himajin100000
- ベストアンサー率54% (1660/3060)
すまん、div#clearにposition:relativeだったね。 加えてもやっぱりOperaで再現しない
- himajin100000
- ベストアンサー率54% (1660/3060)
えーっと、念のためサンプルソースください 確かDreamWeaverのレンダリングエンジンはPresto，つまりOperaと同じなのでそれで確認してみたいと思うので。 Opera 9.22 Build 8796で再現しなかったソース↓ <!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" xml:lang="ja" lang="ja"> <head> <title>Q3153588 サンプル1</title> <style type="text/css"> div#container{ background-color:pink; } div#main{ float:left; background-color:yellow; } div#sub{ float:left; background-color:red; } div#clear{ clear:left; background-color:green; } </style> </head> <body> <div id="container"> <div id="main"> <p>メイン</p> </div> <div id="sub"> <p>サブ</p> </div> <div id="clear"> <p>クリア</p> </div> </div> </body> </html>
補足
反応が遅れて、ごめんなさい！！ サンプル下に載せます。よろしくお願いします。 うちの各種ブラウザで見ると、（横幅を無視して図示） ［main（青］［sub（黄］ ［ 赤 ］ ［bottom（緑］ と段組みされてます。 でもやっぱり、Dreamweaver（バージョンは８です）のデザイン表示モードで見ると、 ［main（青］［sub（黄］［bottom（緑］ ［ 赤 ］ と、３つ横並びになってます。。 こんなに単純なソースでもなっちゃった！と、落ち込むより何だか興奮したりして＾＾； ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!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=UTF-8" /> <style type="text/css"><!-- * { margin:0; padding:0; background-color:transparent; } body { text-align: center; } #container { width:780px; margin:0 auto; background-color:red; text-align:left; } #main { width:540px; height:200px; float:left; margin-bottom:50px; background-color:blue; } #side { width:240px; height:200px; float:left; margin-bottom:50px; background-color:yellow; } .bottom { clear:both; position:relative; width:780px; height:200px; background-color:green; } --></style> </head> <body> <div id="container"> <div id="main"> <p>main</p> </div> <div id="side"> <p>sub</p> </div> <div class="bottom"> <p>bottom</p> </div> </div> </body> </html>
お礼
お礼が遅くなり、申し訳有りません！ MX2004では、想定通りに表示されるとは… 何だか狐につままれた気分ですが、あれからも色々なブラウザで見て、 「おかしいのは私のDWだけ」と判明したので、 もうあきらめようと思います。 もろもろのアドバイスありがとうございました！