• ベストアンサー

dreamweaverにて、ブラウザによる拡大・縮小でレイアウトが崩れないようにするには?

こんにちは。 dreamweaver初心者です。 質問させて頂きます。 Dreamweaverを使用して、ホームページを作成しているのですが、 絶対配置(スタイルシート)で、ある画像を配置して、IE(version7)で拡大を行うと、 表示位置が若干ずれてしまいます。 拡大を行っても表示位置がずれないようにするには、 どうしたらいいでしょうか? ※説明不足でしたら、是非突っ込みを!

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

  • ベストアンサー
  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.1

ソースを見ないと分からないけどIE7のズーム機能のバグに起因する問題のようにも見える。 右側に絶対配置を行うとIE7で拡大を行ったとき無駄な横スクロールが発生します。 110%、120%と拡大していくとページの横幅も110%、120%と拡大して計算されてしまう。 あと、a:hoverにposition:relative;を指定するとズーム時にカーソルを合わせたときおかしくなるってのも見たことありますね。 ま、結局のところはよく分からないんでソースコードが見たい。それが結論どぇす。

someinosimin
質問者

補足

ご回答有難うございます。 ソースはこんな感じです↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>GREEN * SPACE</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="haikei">    <div id="top">      <h1>green space</h1>      <h2 class="hajimete">初めての方へ</h2>      <h2 class="toiawase">お問い合わせ</h2>      <h2 class="kaisha">会社概要</h2>    </div> ・・・・・・・・・・・・・・・・・・・・・・・・・・・ CSSは↓ #haikei { background-image: url(../images/haikei.gif); background-repeat: no-repeat; margin: 0px auto; padding: 0px; height: 1000px; width: 780px; } body { margin: 0px; padding: 0px; } #top { height: 171px; width: 780px; } #top h1 { background-image: url(../images/title_hana.gif); background-repeat: no-repeat; text-indent: -9999pt; height: 170px; width: 780px; margin: 0px; padding: 0px; } #top .hajimete { background-image:url(../images/button_hajimete.gif); background-repeat: no-repeat; height: 25px; width: 119px; margin: 0px auto; padding: 0px; text-indent: -9999pt; position: relative; bottom: 70px; left: 40px; } #top .toiawase { background-image:url(../images/button_toiawase.gif); background-repeat: no-repeat; height: 25px; width: 120px; text-indent: -9999pt; position: relative; margin-top: 2px; margin-right: auto; margin-bottom: 0px; margin-left: auto; left: 180px; bottom: 97px; } #top .kaisha { background-image:url(../images/button_kaisha.gif); background-repeat: no-repeat; height: 25px; width: 120px; text-indent: -9999pt; margin-right: auto; margin-left: auto; position: relative; left: 317px; bottom: 143px; margin-top: 21px; } こんな感じです。 すみません、質問では絶対配置としていましたが、 実際は相対配置でした。

関連するQ&A

  • フォントの拡大縮小に関して

    現在ホームページを作成しておりますが、基本的なフォントサイズを2にしています。 よく他のページを見ていると、大・中・小のボタンがあり、フォントサイズを大きくしたり、 小さくしたりできるページを見ます。 初心者のため、現在は、全くスタイルシートとか使わずページを作成しているのですが、 上記のようなボタンでのフォントの拡大縮小はできないのでしょうか。 ユーザーにブラウザの操作(メニュー→表示→文字の大きさの拡大縮小)をさせることなく、文字の拡大縮小をさせたいと思っています。 やり方やコード等がわかる方、教えて下さい。

    • ベストアンサー
    • HTML
  • Dreamweaver、デザインとブラウザの違い

    Dreamweaverでページを作り、デザインで見ると思い通りに配置されているのですが、ブラウザで確認するとfierfox、ieともにずれてしまいます。 なぜデザインとブラウザでは違いが出るのでしょうか? ご存知の方いましたら、お願い致します。 バージョンはCS4です。

  • ホームページ レイアウトについて

    ホームページ作成について質問です。 複数ページのホームページの内、全ページ共通の罫線や画像(ヘッダー部、フッター部など)のレイアウト微調整を スタイルシートで設定したい、というのが目標ですが、そのレイアウト微調整を position:absolute; で行っていますが間違っているのでしょうか? 上記を設定したオブジェクトは確かに完全に任意の位置に配置できるのですが、 位置を指定していないHTMLだけに記述されたオブジェクトとレイアウトが重なったりしてしまいます。 全てのオブジェクトの位置をスタイルシートで指定すればそれも回避できると思うのですが、 そうするとひとつのHTMLファイルだけのスタイルシートになってしまうし、スタイルシートはそういう使い方するものではないんじゃないか、と思ってます。。 (そもそも共通設定ファイルにポジションの固定値を記述する事自体、 間違ってる気がしてます) スタイルシートの位置指定を使用しないで左寄せ、中央、右寄せ、以外の レイアウト調整って可能なのでしょうか? また、ホームページの完全な任意レイアウトの際のセオリー等が ありましたら教えていただきたいです。 以上、宜しくお願い致します。

  • Dreamweaver8のデザインビュー

    全くのウェブ初心者なのですが、最近、ホームページ作りを始めました。CSSと、フロートやリキッドといった設定を使い、3段組みのページを作りました。 はじめ手打ちで作成していて、途中からDreamweaver8で作成しようとしたのですが、ブラウザ(IE6.0)ではうまく表示されるものの、Dreamweaver8では、かなり表示が乱れます。 Dreamweaver8のデザインビュー表示とはそんなものなのでしょうか。それとも、Dreamweaverの設定やわたしのホームページの書き方などに問題があるのでしょうか。うまくDreamweaverのデザインビューを使いこなすコツのようなものはありますでしょうか。

  • ビルダーとdreamweaverについて

    ホームページ製作初心者です(というかこれから始めるのですが) なにかでホームページビルダーで作ったサイトはユーザーが見る環境によって、テキストや画像の配置が違ってみえる(ずれて見える?)と聞いたことがあるのですが、本当なのでしょうか? もし、そうであればdreamweaverのほうはそういう現象はおこったりしないのでしょうか?

  • 古いブラウザでのレイアウトの崩れ

    テーブルとCSSの組み合わせでレイアウトを作成していたのですが、お客さんから「Win/IE4,IE,Mac/IE5でレイアウトがめちゃくちゃじゃないか!」とクレームを受けてしまいました・・・。スタイルシートの使用を極力避け、テーブルの入れ子やspacer.gifの多様で作り直し、Mac/IE5での確認はできたのですが、Win/IE4,IE5での環境がととのわず、確認できてません。Mac/IE5で崩れずに表示されればほぼ問題はないのでしょうか?

    • ベストアンサー
    • CSS
  • Firefox javascript dreamweaver

    dreamweaver cs3でホームページを作っていてjavascriptのソースが載っているHPを見てまんまコピー・ペーストして作っています。 IEなら、ちゃんと表示されますが、Firefoxで表示してみたら、ちゃんと動作しません。 まだホームページ、インターネットにアップ前です 何が原因でしょうか? vistaでFirefoxは最新バージョンです。

  • Dreamweaverでこのデザインはどうやって作りますか?

    Dreamweaver初心者です。 http://www.q-jin.ne.jp/ 上記サイトの、「こんな会社で働こう!」という緑でグループ化されている部分のデザインはどうやって実現できますか? 4列x3行の部分をどうやっているのでしょうか? テーブルでしょうか?それともスタイルシートでしょうか? 4列に分ける方法がわかりません。 1列だけならスタイルシートで可能なのですが。 よろしくお願いします。

  • Dreamweaver レイヤーでページを作る

    ホームページビルダーのどこでも配置モードは、ブラウザーによって表示が崩れてしまい良くないといわれてますが、ドリームウィーバーでレイヤーを使用してページを作成するのは大丈夫ですか? スタイルシートは良く分からないので、レイヤーで作成希望です。

    • ベストアンサー
    • HTML
  • IE8では大丈夫なのに、IE7ではレイアウトが崩れる・・。

    ホームページ作成初心者です。以下のサイトをdreamweaver cs4で作成しました。 http://www.geocities.jp/de_chirico_1911/ IE7で見るとレイアウトが崩れてしまうようです。IE8や最新のfirefoxを使用するとちゃんと表示されます。 おそらく右側の緑の画像に対して回り込む設定がIE7では無視されているのかと思います。どこを直せば、きちんと表示されるのか教えていただけたら幸いです。 どうぞよろしくお願いいたします。

専門家に質問してみよう