9

私は CSS の初心者で、現在やろうとしているのは、中小企業向けの非常にシンプルで基本的なスプラッシュ ページまたはランディング ページをデザインすることです。

サイトの URL は次のとおりです: My site

任意のブラウザーを使用すると、Google Chrome を使用してズームアウトまたはズームイン (ctrl -/+) すると、すべての div が移動し始めるという点で、Web サイトのレイアウトが「バラバラ」になり始めることに気付くでしょう。私は明らかにこれを望んでおらず、すべての優れたサイトとほぼ同じように、人々がズームインまたはズームアウトしてもサイトが同じままであることを望んでいます (笑)。

それがポジショニングに関係しているに違いないことは知っていますが、私たちの人生や私にとってそれを理解することはできません. 昨夜、私は同様の質問を閲覧するのに何時間も費やしましたが、それを理解することができます.

より多くのスペースを占有するようにコードを投稿しているわけではありません.URLを提供したので、そこからコードを取得できると思います.

さらにいくつかの小さな質問があります。

1) Chrome で私のサイトを開くと、つまり、ページの下部にある「利用規約」の後にサイトが終了することに気付くでしょう。ただし、Firefox を使用すると、「利用規約」の後、いわばバックグラウンドがしばらく続くことに気付くでしょう。これはなぜですか、どうすれば修正できますか?

2) 異なるブラウザーでは、要素の配置がわずかに異なることに気付くでしょう。最も顕著なのは、chrome/firefox を見てから Internet Explorer 9 を見ると、「利用規約」が chrome や ff よりもわずかに高く、メイン コンテンツ領域にわずかに触れていることに気付くでしょう。これを修正する方法はありますか？

3) div を中央に配置する効率的で効果的な方法は何ですか? たとえば、「サインアップ」ボタンをメイン コンテンツ領域の中央に完全に配置したいと考えています。私はほとんどそれを見て、相対的な位置を使用してそれを中央に置いていました. それを中心にするより正確な方法は何ですか？

ありがとうございます。これらの質問が少し冗長に思えたら申し訳ありません。何か明確にする必要がある場合は、この質問をタカのように監視します。

乾杯

4

3 に答える 3

13

  1. ズームインまたはズームアウトすると、丸めやテキストのレンダリングが原因で問題が発生します。レイアウトが崩れずに少し引き伸ばされても耐えられるようにすることをお勧めします。

  2. 相対位置は #1 で述べた問題の影響を受けるため、信頼できません。

  3. さまざまなブラウザーが適用するプロパティを削除するために何かを使用することを検討してください。リセットを使用して、より実行可能なものを提供するか、値を正規化して、ブラウザー間で値をより均等にすることができます。

  4. (水平) センタリングには、いくつかのオプションがあります。

    • 「text-align:center」を含むコンテナーがある場合、インライン ブロックまたはインラインであるすべての子要素が中央に配置されます。
    • ブロック要素を中央揃えにしたい場合は、「margin: 0 auto」を使用して水平方向に中央揃えし、垂直方向の余白を削除できます。
    • 絶対配置された要素を中央に配置したい場合は、「左: 50%、マージン左: -(要素の幅/2)」を使用できます。

相対的な配置を取り除こうとすることに加えて、body 要素の高さを明示的に設定しないことをお勧めします。一般に、要素が独自のサイズを管理するようにすると、要素がより堅牢になります。

「position: relative」を使用する場合は、「float: left」(または right) を使用するか、表示タイプ (display: inline-block) を変更することをお勧めします。それはあなたが正しい方向に始めるのを助けるかもしれません.

于 2012-07-15T19:16:44.250 に答える
1

あなたのポイント1と2についてはわかりませんが、3に関しては、私が使用するようになったのは次のとおりdivですwidth : some-percentage; margin-left : 100-(some_percentage)*0.5 ;。

于 2013-01-04T14:23:44.620 に答える
-2

ズームインとズームアウトの問題を修正する前に、いくつかの提案があります。

  1. <div>テキストを折り返すために使用しないでください。
  2. <h1>ヘッダーにタグを使用する
  3. CSS を別の css ファイルに保存します。
  4. すばらしいヘッダー セクションを定義しましたが、コンテナーとフッターにも同様に定義してください。
  5. コメント！そうすれば、あなたを助けようとする人々の仕事がずっと楽になります。
于 2012-07-14T23:23:13.560 に答える