プロが教えるわが家の防犯対策術！

position:relative で Dreamweaver の表示が崩れる

解決済

  • 質問者：asummer
  • 質問日時：
  • 回答数：6件

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のみ。。

とても気持ちが悪いです。
思い当たる状況、ないでしょうか？

よろしくお願いします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.1

えーっと、念のためサンプルソースください



確か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.dt …
<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-transitio …
<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>

補足日時：2007/07/10 17:48
通報する
    • good
    • 0
    • 件
通報する

No.2

すまん、div#clearにposition:relativeだったね。


加えてもやっぱりOperaで再現しない
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： MAN_MA_RUI
  • 回答日時：

himajin100000さんのソースで実験したところ、Opera 9.20でもSeaMonkey(というか実際はSylera)でも問題なしです。


Operaを8とか7とかに変えれば問題が出るかもしれないけどそこまでやる気力はなし…。

DOCTYPE変えると表示が変わることはあるけど、問題現象には行き当たってない感じがするし、IE6で表示が違ってるのはこの場合論外だろうし…。
宜しければ具体的なソースを提示して欲しいです。

この回答への補足

わたしなんか全然持ってないブラウザで確認していただいて、、
ありがとうございます。

No.1さんの所にサンプル出しましたので、どうぞよろしくお願いします！

補足日時：2007/07/10 18:00
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： MAN_MA_RUI
  • 回答日時：

SeaMonkeyもFirefoxも同じGeckoなので表示にたいした違いはないです。

拡張使ってる場合は別だけどね。
で、私はFirefoxよりもSeaMonkeyベースのSyleraが好きだからSyleraで確認を行いました、と言ってるわけです。
あんまり難しい理屈じゃない。

原因についてはDreamweaverで使ってるPrestoのバージョンなどに絡む気がしないでもないけど、もう少し詳しい人とかの手を借りて確かめたほうがいいのかも？
（Dreamweaverのバージョンとかが確かめられると何か手がかりが得られる？）
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： MAN_MA_RUI
  • 回答日時：

追記。

自分の持ってる環境でサンプルの表示状態を確認したところ特に異常はありませんでした。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
＞Dreamweaverで使ってるPrestoのバージョン
その辺、また当たってみます。

とりあえずは、各種ブラウザで正常表示されてくれれば、気にしないことにします。
…作業的には、デザイン表示モードでの確認がほぼ無意味でちとツライのですた＾＾；

通報する
お礼日時：2007/07/11 13:00

No.6ベストアンサー

  • 回答者： taloo
  • 回答日時：

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月現在の最新バージョン）で良くなっていると思いますが、
それ以外のバージョンではどうしようもないと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなり、申し訳有りません！

MX2004では、想定通りに表示されるとは…
何だか狐につままれた気分ですが、あれからも色々なブラウザで見て、
「おかしいのは私のDWだけ」と判明したので、
もうあきらめようと思います。

もろもろのアドバイスありがとうございました！

通報する
お礼日時：2007/07/24 12:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報