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のみ。。
とても気持ちが悪いです。
思い当たる状況、ないでしょうか?
よろしくお願いします!
No.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月現在の最新バージョン)で良くなっていると思いますが、
それ以外のバージョンではどうしようもないと思います。
お礼が遅くなり、申し訳有りません!
MX2004では、想定通りに表示されるとは…
何だか狐につままれた気分ですが、あれからも色々なブラウザで見て、
「おかしいのは私のDWだけ」と判明したので、
もうあきらめようと思います。
もろもろのアドバイスありがとうございました!
No.4
- 回答日時:
SeaMonkeyもFirefoxも同じGeckoなので表示にたいした違いはないです。
拡張使ってる場合は別だけどね。で、私はFirefoxよりもSeaMonkeyベースのSyleraが好きだからSyleraで確認を行いました、と言ってるわけです。
あんまり難しい理屈じゃない。
原因についてはDreamweaverで使ってるPrestoのバージョンなどに絡む気がしないでもないけど、もう少し詳しい人とかの手を借りて確かめたほうがいいのかも?
(Dreamweaverのバージョンとかが確かめられると何か手がかりが得られる?)
No.3
- 回答日時:
himajin100000さんのソースで実験したところ、Opera 9.20でもSeaMonkey(というか実際はSylera)でも問題なしです。
Operaを8とか7とかに変えれば問題が出るかもしれないけどそこまでやる気力はなし…。
DOCTYPE変えると表示が変わることはあるけど、問題現象には行き当たってない感じがするし、IE6で表示が違ってるのはこの場合論外だろうし…。
宜しければ具体的なソースを提示して欲しいです。
この回答への補足
わたしなんか全然持ってないブラウザで確認していただいて、、
ありがとうございます。
No.1さんの所にサンプル出しましたので、どうぞよろしくお願いします!
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(バージョンは8です)のデザイン表示モードで見ると、
[main(青][sub(黄][bottom(緑]
[ 赤 ]
と、3つ横並びになってます。。
こんなに単純なソースでもなっちゃった!と、落ち込むより何だか興奮したりして^^;
=========================
<!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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
<body id=~>の用途は?
-
ページによって表示位置がずれ...
-
ハイパーリンクに下線を表示す...
-
複数のiframeの読み込みについて
-
"mailtoでメールの【氏名】【性...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
html メールリンクにて自動ファ...
-
javascriptでalertの文字列をコ...
-
javascriptとApacheの設定
-
window.open()の複数の使用
-
iframeの中から親ページをスム...
-
javascriptでクリックしたリン...
-
JavaScriptでのEnterキーとAlt+...
-
submitボタンで他のフレームを...
-
SCRIPT5007: 未定義または NULL...
-
複数の外部jsをランダム表示さ...
-
スライド写真で2、3枚目をラ...
-
リンクのクリック数を把握したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
ハイパーリンクに下線を表示す...
-
(Javascript)印刷するファイル...
-
テキストボックス内にハイパー...
-
"mailtoでメールの【氏名】【性...
-
別ページのページ内リンクでの...
-
iframeのsrcにページ内リンク(...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
bodyタグって2重にしようするこ...
-
リンクをクリックすると文字が...
-
複数のiframeの読み込みについて
-
「overflow: hidden」ペー ジ内...
-
横スクロールを右から左へ・・・
-
HTML文でiframe srcで参照表示...
-
スクロールバーのスクロール量...
-
Chromeがiframe内の「#~」に釣...
-
テキストをクリックすると答え...
-
<HR>タグでつくる四角形につい...
-
日本語を半角英数字にすると画...
おすすめ情報