ベストアンサー

ブラウザで確認するとレイアウトが崩れてしまいます。

2007/04/03 21:21

imac G5でdreamweaver8を使ってpageを作成中なのですが dreamweacer8で制作中のウィンドウでは問題なくレイアウトできているのですが、いざブラウザで確認すると段組みが崩れてしまいます。最近CSSに興味を持ち出し、少しずつ前進してた矢先、すっかり足踏み状態です。どなたかご享受いただけたら幸いです。よろしくお願いします。

lan_
お礼率16% (8/48)

CSS
回答数5
ありがとう数0

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

golive001
ベストアンサー率54% (20/37)

2007/04/04 11:40 回答No.4

まず、CSSの並び方が良くないと思いました。これは動作には影響しませんが、コードの可視性を保つために必要な処置だと思いますので合わせて修正、添削を行ってみました。また、レイアウトに不必要な記述も削除しました。 <style type="text/css">  </style> </head> <body> <div id="contents"> <p>MAKER</p>/*原則として、ラップ（#contentsの内部にはdiv以外の要素を入れないようにする） <div id="left"> <div id="car1"> <h1>DATA</h1> <h2>text</h2> </div> <div id="car2"> <h1>DATA</h1> <h2>text</h2> </div> </div> <div id="right"> <div id="car3"> <h1>DATA</h1> <h2>text</h2> </div> </div> </div> </body> 色々問題ありだと思いますが、なにが一番の間違いか？は、ずばり横幅の指定部分です。現状は #contents(400px)の内部に #left(400px)+#right(200px)+{その他ブロック要素のpaddingとmarginの合計値}が入っています。これでは横並びに指定できませんね？まずは、#contentsのwidthを上げてみてください。

その他の回答 (4)

leap_day
ベストアンサー率60% (338/561)

2007/04/04 12:13 回答No.5

こんにちは <p></p>を<div id="p"></div>にかえて p { } を #p { }に p { } のheight:15px; を削除 #contents { } の width:400px; を width:600px; に変えてくださいそれでとりあえずはすっきりする・・・と思ったらブラウザのpxの大きさが違うのかIEが変でした（＞＜）ので下記のようにしてみて下さい(IEではMAKERの横に少し黒線が出てしまってますけど・・・IE,Opera,Firefoxでほぼ同じ表示になってます) <style type="text/css">  </style> </head> <body> <div id="contents"> <div id="white"> </div> <div id="p">MAKER</div> <div id="left"> <div id="car1"> <h1>DATA</h1> <h2>text</h2> </div> <div id="car2"> <h1>DATA</h1> <h2>text</h2> </div> </div> <div id="right"> <div id="car3"> <h1>DATA</h1> <h2>text</h2> </div> </div> </div>

edge8040
ベストアンサー率46% (7/15)

2007/04/04 05:19 回答No.3

回り込み解除の問題とか？ http://redstar.skr.jp/mt/archives/2005/03/maciefloat.html 先に書かれている方々がおっしゃる様に、ソース見ないとわかりませんが・・・

質問者

補足 2007/04/04 10:15

すみません。ソースを記載したのでよろしくお願いします。 <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>usedcar</title> <style type="text/css">  </style> </head> <body> <div id="contents"> <p>MAKER</p> <div id="left"> <div id="car1"> <h1>DATA</h1> <h2>text</h2> </div> <div id="car2"> <h1>DATA</h1> <h2>text</h2> </div> </div> <div id="right"> <div id="car3"> <h1>DATA</h1> <h2>text</h2> </div> </div> </div> </body> </html>