- ベストアンサー
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）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
追記。自分の持ってる環境でサンプルの表示状態を確認したところ特に異常はありませんでした。
お礼
ありがとうございます。 ＞Dreamweaverで使ってるPrestoのバージョン その辺、また当たってみます。 とりあえずは、各種ブラウザで正常表示されてくれれば、気にしないことにします。 …作業的には、デザイン表示モードでの確認がほぼ無意味でちとツライのですた＾＾；
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
himajin100000さんのソースで実験したところ、Opera 9.20でもSeaMonkey(というか実際はSylera)でも問題なしです。 Operaを8とか7とかに変えれば問題が出るかもしれないけどそこまでやる気力はなし…。 DOCTYPE変えると表示が変わることはあるけど、問題現象には行き当たってない感じがするし、IE6で表示が違ってるのはこの場合論外だろうし…。 宜しければ具体的なソースを提示して欲しいです。
補足
わたしなんか全然持ってないブラウザで確認していただいて、、 ありがとうございます。 No.1さんの所にサンプル出しましたので、どうぞよろしくお願いします！
- himajin100000
- ベストアンサー率54% (1660/3060)
- 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>
関連するQ&A
- position:relativeについて教えてください
初めて質問します。 ２つの横にならんだセルをDIVによって表示しようと思い <DIV style="width:112px;height:20px;background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="width:112px;height:20px;background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> というスタイルシートを作成しようとしたのですが、実際にはテスト１０まであり、一行がいかんせん長いので次のようにしてみました。 <DIV style="width:112px;height:20px;"> <DIV style="background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> 同じように使われている記述でまとめることができるんだ、と思い、ポジションの記述もまとめてみたのですが、 <DIV style="width:112px;height:20px;position:relative;"> <DIV style="background-color:red;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow;left:112px;top:-20px;">テスト２</DIV> この記述だと、セルが下にくっついてしまい、うまく表示できません。 positionは必ず記述しないといけないのでしょうか。できたらもっと１行を短くしたいのですが… 解決方法がわかる方いらっしゃいましたら、宜しくお願いします。
- ベストアンサー
- HTML
- positionについて
positionについて教えてください box内にbox2をpositionで配置したいのですが子要素のboxに指定するpositionはrelativeとabsoluteどちらがいいですか？ また、子要素のboxにrelativeを指定した場合とabsoluteを指定した場合の表示の違いはありますか? #box { position: relative; } #box2 { position: relative; top :50px; left: 100px; width: 100px ; height: 100px ; background-color: #F90; }
- ベストアンサー
- CSS
- フルCSSでFirefoxでデザインが崩れてしまいます。
フルcssHPに挑戦しようと思っています。 cssでIEでは思ったような表示が可能ですが Firefox、Operaでは「contents」内のコンテンツが 「container」>を突き抜けて表示されてしまいます。 下記がhtml、cssソースになります。 【HTML】 <body> <div id="container"> <!--メインナビ--> <div id="contents"> <div id="subnavi"> <ul> <li>サブナビ1</li> <li>サブナビ2</li> <li>サブナビ3</li> <li>サブナビ4</li> </ul> </div> <div id="main"> メインコンテンツが入ります </div> </div> <!--フッター--> </div> </body> メインナビ、フッターアンカーリンクは文字数制限上削除しています。 【CSS】 body{ text-align:center; background-color:#ffffff; font-size:10px; color:#333333; } body div { text-align:left; margin: 0 auto; } #container{ text-align:left; width:724px; background-color:#ffffff; padding:15px 18px; position: relative; border:1px solid #666; } #contents{ width:724px; background-color:#ffffff; text-align:left; border-bottom:8px solid #666666; margin-bottom:10px; position: relative; clear:both; } #subnavi{ float:left; width:200px; } #main{ float:left; width:495px; padding-left:29px; } この突き抜けを防止するにはどうしたらよろしいのでしょうか。 「contents」 を削除して表示するとどのブラウザでも表示が可能ですので <div id="contents">の記述が何かおかしいのでしょうか。 それとも根本的にブラウザの問題なのでしょうか？ (ブラウザは最新版を使っています) 皆様、よろしくご回答お願いいたします。
- ベストアンサー
- CSS
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- CSSの応用がわかりません。
使用目的に合うCSSスタイルをダウンロードしてきました。 これはdivの高さを揃えられるcssです。 しかし、内容を理解していないので自分のホームページに適用できていません。 やりたいことは、col1が155px,col2が14px,col3が382px,col4が14px,col5が190pxにして使用したのですがこのcssを変更して使いたいのですがどのように変更すればよいでしょうか? /* Start of Column CSS */ #container5 { clear:left; float:left; width:100%; overflow:hidden; background:#eee; /* column 5 background colour */ } #container4 { clear:left; float:left; width:100%; position:relative; right:20%; background:#b2f0f9; /* column 4 background colour */ } #container3 { clear:left; float:left; width:100%; position:relative; right:20%; background:#89ffa2; /* column 3 background colour */ } #container2 { clear:left; float:left; width:100%; position:relative; right:20%; background:#ffa7a7; /* column 2 background colour */ } #container1 { float:left; width:100%; position:relative; right:20%; background:#fff689; /* column 1 background colour */ } #col1 { float:left; width:16%; position:relative; left:82%; overflow:hidden; } #col2 { float:left; width:16%; position:relative; left:84%; overflow:hidden; } #col3 { float:left; width:16%; position:relative; left:90%; overflow:hidden; } #col4 { float:left; width:16%; position:relative; left:94%; overflow:hidden; } #col5 { float:left; width:16%; position:relative; left:98%; overflow:hidden; } 以上がCSSです <body> <div id="container5"> <div id="container4"> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1"> <!-- col1 start --> <p>Each column is 20% percent wide with 2 percent padding on each side.</p> <!-- col1 end --> </div> <div id="col2"> <!-- col2 start --> <h2>No Images</h2> <!-- col2 end --> </div> <div id="col3"> <!-- col3 start --> <p>The HTML in this layout validates as XHTML 1.0 strict.</p> <!-- col3 end --> </div> <div id="col4"> <!-- col4 start --> <h2>This layout is FREE for anyone to use</h2> <!-- col4 end --> </div> <div id="col5"> <!-- col5 start --> <li>Opera 8 & 9</li> <!-- col5 end --> </div> </div> </div> </div> </div> </div> </body>
- 締切済み
- HTML
- DreamWeaver8でのフロートを使った時のレイアウト崩れについて
DreamWeaver8を使って、ホームページを作る練習をしているの ですが、たくさんの商品を並べるページで 商品写真を<div>タグでくくり フロートを使って一列に３つの商品が横並びになり 一ページに合計９つの商品を紹介するような段組を作ろうとしました。 #main div.goods { float: left; width: 160px; margin-right: 20px; margin-bottom: 20px; } というようなスタイルをDreamWeaver8を使って目的の<div>タグに 適応させてみたのですがレイアウトが崩れてしまいました。 一列目は綺麗に「商品写真」が３つ並べることができたのですが 二列目の最初に表示される「商品写真」が画面の右側によってしまい 写真が３つ並ぶはずが、２列目には一つしか表示されず それ以降のレイアウトが崩れてしまいました。 <div>タグとフロートを使って、レイアウトを崩さないように うまく商品を並べるにはどうすればいいのでしょうか？ 回答宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- positionについて下記の認識で正しいでしょう
positionについて下記の認識で正しいでしょうか？ ・relativeは動かしたい要素自体にpositionプロパティをつける。親要素にpositionプロパティはいらない。 { position: relative; top:100px; left:10px } ・absolute; 絶対。 親要素の背景 { width: 100%; position: relative; background: url(../img01.jpg) no-repeat left top; } 子要素の動かしたい要素 .box.box02 p{ position: absolute; left: 0; top: 0; } ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ・absoluteは、親要素も何も関係なしにブラウザ上の上から何PX左から何PXと指定して、要素を配置でできる。 ただし例外として、 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。 親ボックスにpositionプロパティのstatic（初期値）以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです） ・relativeは、親要素から、何PX左から何PXと指定して、要素を配置でできる 補足また、まとめて指定する方法はマージンのようにないのでしょうか？
- ベストアンサー
- CSS
- positionプロパティの設定について
下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。 div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。 なお、positionプロパティを使う方法のみのご回答でお願いします。 ----------------------------------------- div#footer { position: relative; width: 100%; height: 250px; margin: 0; padding: 0; background : url(images/footer_bg.gif) repeat-x 0 0; } div#inner { position: absolute; top: 0px; left: ?px; width: 800px; margin: 0px auto 0px auto; } -----------------------------------------
- ベストアンサー
- HTML
- 段組でfloat:leftとfloat:rightの違い
こんにちは！ 今スタイルシートで段組をやっているんですが 2カラムの右側がfloat:leftとfloat:rightでは微妙に表示が変わります 段組の間のスペースが広くなったり狭くなったりです firefoxで表示するのに左をfloat:left、右をfloat:rightにすると 右側の段組が実現されず下に落ちてしまいます。 通常2カラムの場合の段組はどのように指定するのが正しいのでしょうか？ 過去の質問や、googleで検索しましたがどちらも場合も正しいとか誤ってるという意見が半々で どうにも判断がつかず悩んでいます。 3カラムでもfloat:left float:left float:left とやっているのもあるので こちらが正しいのかな？とも思いましたが やはりそれは違って float:left float:right float:leftが正しいという方もいらっしゃいます 通常段組を組む際はどちらが規格に沿っているのか教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- IE6での表示がうまくいかず困っています
すみません！先ほど同様の質問をしたのですが、文字数オーバーで途中で切れてしまっていたので本当に恐縮ですが再度お願いいたします。 コーディングを勉強中なのですが、どうしてもIE6での表示がうまくいかず、大変困っています。色々ググって調べてみたのですが、決定的な原因がわからず本当にどうすればよいのかわかりません・・・。どなたかご教示いただけませんでしょうか。 他のFireFOX,Safari,IE8では多少のズレはあるものの普通に表示されました。IE6では背景画像とフッターのみしか表示されない。という状況です。 CSSは以下です。 /* generated by csscreator.com */ html{ height:100%; } body{ margin:0; padding:0; text-align:center; color: #fff; background: #000000 url("../images/back-right.gif") repeat-x; position: relative; text-decoration: none; height:100%; } body > #pagewidth { height: auto; } img { border-style:none; } ul{ margin:0; padding:0; text-align:left; } li{ list-style-type: none; line-height:100%; } p{ margin:0; padding:0; text-align:right; } #bg_wrap { height: 423px; width: 50%; top: 0px; background: url(../images/back-left.gif) repeat-x; position: absolute; } #pagewidth{ width: 918px; height: 100%; min-height: 100%; text-align:left; margin: 0px auto; position: relative; background: url(../images/left-col.gif) left repeat-y; } #left-container{ width: 130px; height: 100%; float:left; position:relative; padding-left: 23px; } #header{ width: 100%; height: 266px; color: #000; background-color: #fff; } #navigation{ width: 100%; color: #fff; padding-bottom: 5em; } #main-container{ width: 764px; float: right; display:inline; position: relative; } #maincontents{ padding-right: 21px; } #footer{ height: 50px; width: 100%; text-align:left; padding-left: 95px; clear: both; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} } 以上です、よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
お礼が遅くなり、申し訳有りません！ MX2004では、想定通りに表示されるとは… 何だか狐につままれた気分ですが、あれからも色々なブラウザで見て、 「おかしいのは私のDWだけ」と判明したので、 もうあきらめようと思います。 もろもろのアドバイスありがとうございました！