• ベストアンサー

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

edge8040の回答

  • edge8040
  • ベストアンサー率46% (7/15)
回答No.3

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

lan_
質問者

補足

すみません。ソースを記載したのでよろしくお願いします。 <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>usedcar</title> <style type="text/css"> <!-- p { width:577px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; font-weight: bold; padding-bottom: 3px; border-left-width: 20px; border-left-style: solid; border-left-color: #FFFFFF; padding-left: 3px; height: 15px; background-color: #0099CC; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; color: #FFFFFF; background-color: #FF0000; width: 35px; padding: 5px; height: 10px;} h2 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #FFFFFF;} #car1 { background-color: #666666; padding: 5px; height: 210px; width: 190px; float: left;} #car2 { background-color: #666666; padding: 5px; height: 210px; width: 190px; float: right;} #car3 { background-color: #666666; padding: 5px; height: 210px; width: 190px; float: right; } #contents { background-color: #000000; width: 400px; margin-right: 100px; margin-left: 100px; color: #000000; } #left { float:left; background-color: #0099FF; width: 400px;} body { background-color: #000000; width: 800px; } #right { float:right; background-color: #0099FF; width: 200px;} --> </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>

関連するQ&A

  • Dreamweaverのテンプレートから作成でブラウザでは大丈夫なのにデザインビューでレイアウトが崩れてしまいます(’’;)

    Dreamweaver8でHPをつくりはじめておりまして、 まずテンプレートをつくってそこからすべてのページをつくっていこうと思っています。 そこでテンプレートを作り編集可能領域を設定したので、 テンプレートから新しいページを作成したのですが、 保存した途端レイアウトが縦に並んでしまい、崩れてしまいます。 しかしブラウザでプレビューしてみても全く崩れていなく大丈夫です。 テンプレートはCSSを使っておりますので、 CSSがテンプレートにあるとレイアウトが崩れてしまうのでしょうか? どなたか同じような現象にあわれた方よろしくお願いいたしますm(_ _)m

  • 同じブラウザでレイアウトが崩れるのはなぜですか?

    同じブラウザ(IE8)を使用しているのに、CSSレイアウトが崩れます。 HTML、CSSをタグ打ちでホームページを作成したのですが、 2台のまったく同じパソコンで表示させたところ、同じブラウザ(IE8)を使用しているのにレイアウトが違っています。 自分のパソコンでは思い通りのレイアウトで表示されるのですが、もう一台の同じパソコンでは余白が広すぎたり、 2段で表示されたりしてしまいます。 ちなみにCSS検証サービスなどでは問題ありませんでした。 他のブラウザでも私のパソコンでは同じレイアウトで表示できます。 何がダメなのかまったくわかりません。 サーバーはFC2の無料サーバーを使用しています。 考えられることがあれば、何でもいいのでどなたか教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSによるレイアウトブロック(Dreamweaver)

    Dreamweaver8を使用しています。 参考書にそって、CSSによるレイアウトブロックで、 ページ全体のCSSを作成しました。(body) 次にコンテンツ全てを選択し、全体のCSSを作成しました。(div) ブラウザで表示させると、ページ全体が左に偏ってしまいます。 これを中央にするのにはどうすればよいでしょうか? よろしくお願いします。

  • ホームページレイアウト

    いつもお世話になっております。 ホームページ制作をしています。(が、未熟者です。) Illustrator8でデザイン・レイアウト作成→ある程度OKが出たらイラレデータを分解・画像化→Dreamweaver8でコーディングという流れです。 自分でイラレ上レイアウトをする場合はコーディングのことを考えて行うのですが、今回別の方がイラレデータをつくり、コーディングのみを行うことになりました。 あまりHPやDreamweaverに詳しくなく、イラレのプロな方なので、重なった画像を多用したりと、Dreamweaverでのレイアウトが難しいものを出されてしまいました。 具体的には複数の写真が重なり、その写真から吹き出し(イラスト)が出ているというものです。 それだけなら画像として扱えばいいのですが、吹き出しの中の文字はDreamweaverで打たないと読めないのです。 こういう場合は、まず吹き出し中の文字を消した画像データを用意→Dreamweaverでテーブルを作り背景画像にする→テーブルをうまく吹き出し部分に合わせ文字を打つ という方法しか思いつかないのですが、間違っているでしょうか? テーブルレイアウトはよくないと言われますが、この場合もCSSなどででいけるものでしょうか?(CSSレイアウトは勉強中で詳しくありません。) 恐れ入りますがご回答お待ちしております。 長文失礼致しました。

  • CSSのブラウザごとの表示の違い

    ホームページを作った時に、IEで見たときと、Firefoxで見たときに、同じように見えるようにしたいと思っています。 ですが、CSSの解釈がブラウザによって違うため、そう簡単にはいかないと思います。(当然レイアウトをすべてCSSで記述した場合の話) 現在は、CSSでページレイアウトは出来るのですが、複数のブラウザで完全に一致したデザイン(段組み)を作るのは私の実力ではまだ無理です。 IE6はCSS関連のバグも多いですし、HACKと呼ばれるバグ回避方法があるのは知っています。 という訳で、フルCSSレイアウトで複数のブラウザで崩れないデザインを作れるようになるために、バグ情報やHACKなどの必要な知識を解説した本またはサイトを教えて下さい。

  • Fireworksなどのスライスで、CSSレイアウトで書き出せるの?

    テーブルレイアウトで慣れてるためか、CSSレイアウトがどうしても馴染めません。 Dreamweaverで作ってますが、数倍も難しく感じます。 もしかして、やり方を間違ってるのかも知れません。 私は、Dreamweaverで一つずつ組んでいくため、Fireworksなどの「スライス」機能を使わないのですが、 ●質問1 もしかして、Fireworksでレイアウトしたら、 Fireworksのスライスで、CSSレイアウトで簡単に書き出せるのでしょうか? 多分、テーブルレイアウトでの書き出しだけだと思ったのですが・・・。 私の知識は古いので。 ●質問2 また、HP作成は、Dreamweaverで作るとして、 レイアウト作成や画像作成は、現在の主流は、 Fireworksでしょうか?Photoshopでしょうか? プロは普通どっちを使ってますか? 私はPhotoshopしか使った事ありません。 Fireworksに乗り換えるべきか、考えてます。 よろしくお願いします。

  • ブラウザによってCSSレイアウトが崩れる

    個人でサイトを運営しています。ビルダー等のソフトを使わず、HTMLタグ打ちで作っています(独学です)。テーブルでページをレイアウトするのは好ましくないと言われているので、最近になってCSSでレイアウトするようになりました。 普段ブラウザはIE6を使用していて、一つ一つレイアウトを確認しながら作り上げたのです。しかし、Fxを導入して確認してみると、レイアウトが無茶苦茶に崩れてしまいました。両方で崩れないように調整できたと思ったんですが、次にIE7を導入して確認すると、また大きく崩れるようになってしまいました。これは単に自分のミスなのか(widthやheight、margin、paddingなどで間違いがある)、それともブラウザによって微妙なズレが生じるのは仕方のないことなのか、よくわかりません。どなたかご教授お願いします。

  • ページの幅が変わってしまう問題について(CSS)

    CSSレイアウトついての質問です。 DreamWeaverで作ったサイトを、ブラウザでプレビューしてパッと見は問題ないのですが、 サイト内でページを切り替えたときに、 ページの横幅が微妙に狭くなったり広くなったりする現象が起きたときは どういった対処をすればいいのでしょうか? WEB制作に詳しい方、お知恵を貸してくださると嬉しいですm(_ _)m よろしくお願いします。

    • ベストアンサー
    • HTML
  • dreamweaverでCSSのレイアウトが勝手に崩れる・・・

    はじめまして。 実はdreamweaverでCSSスタイルでHPを作成しています。 なんとかレイアウトを整い、画像をはめ込んでいったのですが、ふとした瞬間にレイアウトが一気に崩れてしまいました。 もちろんCSSはいじっていません。それを証拠にindexとほかのページをテーブルにしてわけているんですが、インデックスだけ崩れています。 心当たりといえば、作業のウインドウのサイズをさわってしまったぐらいです・・・ 元に戻してもレイアウトは崩れたままです・・・ どうすれば元に戻るのでしょうか? ちなみにIEでチェックしてもレイアウトに問題はなかったのですが、どうも作業がやりづらいです。

  • CSSレイアウトってなぜこんなに難しいのか?

    個人事業で、WEBデザインの仕事をしています。 恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。 文字を整えたり、種類をまとめたりだけ、CSSを使ってました。 先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、 ダメだしを食らいました。 独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、 ちょっと恥ずかしい質問ですが、 CSSレイアウトってなぜ、こんなに難しいのでしょうか?? みなさん、テーブルレイアウトと比べて異常に難しく感じませんか? 今の調子ではHP作成の仕事が請けられなくなっています。(涙) 例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。 でも、CSSレイアウトって、コードで全部書き出しますので、 ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス?のタグにそれを指定したかとか、 複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。 ■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか? ■今まで2~3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、  いっこうに進歩しません。(ここに本の題名書き出すとマズイですよね?) ★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。 ■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか?  HPビルダーとかなら、もっと簡単に出来るのでしょうか? ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、 #header #side #main #footerを、#contentの中に入れて、 その中の各々の要素は、今までとおり、テーブルでレイアウトする。 (メニューや、商品スペック、写真並べなども、テーブルで。) それが精一杯ですが、これで通用するのでしょうか? HPデザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。