0

画面上のさまざまな解像度サイズで見たときに移動しないように、Wordpress の右側のサイドバーを修正するのに助けが必要ですか?

右サイドバーの CSS

#socialsidebar { 
   float: right; 
   position: relative; 
   overflow: hidden; 
   margin-right: 200px; 
   margin-top: 200px; 
   height: auto; 
   width: 194px; 
}

コンテナ/ページの CSS

body { 
   min-width: 960px; 
}
.container_12 { 
   background: #fdfdfd; 
   margin-left: auto; 
   margin-right: auto; 
   width: 960px; 
}
4

1 に答える 1

1

positionCSSのプロパティについて学ぶ必要があります。

あなたが世話をしなければならないいくつかの経験則があります。

  1. 不必要な水平スクロールを避けます。
  2. 静的な高さを与えないようにしてください。常に無限の高さを自由に使用できるためです。height:autoより大きなコンテナに使用します。
  3. ほとんどの解像度に対応できることがわかっているコンテナに静的な寸法を与えます。
  4. インライン css を避ける - できるだけ一般的な css を定義するようにしてください。
  5. アプリの使用で可能な解像度の範囲を決定します。そしてCSSを書き始めます。
  6. そして最も重要なことは、常に IE で CSS を (書いたときに) 相互検証することです (最大の課題)。

ほとんどの場合、これを実行する最善の方法は、単純で簡単に変更できるようにすることです。

画面全体を、原点が左上隅、Y 軸が下向きの座標系として見る必要があることを確認してください。

これは、CSS-Position プロパティに関する最高の記事の 1 つです。それを通過してください。左、右、上、下がどのように機能するかを理解するのに役立ちます。

今、私はあなたのニーズをカバーする非常に単純なサンプルを作りました. つまり、正しいナビゲーションであり、どの解像度でも安定しています。

サンプルフィドル

このサンプルで注目すべき点は、幅、高さ、上、左のパーセンテージが広範囲に使用されていることです。および位置属性。

それに応じて変更できます。またはそこから参照してください。もう1つ、あなたがする必要はありませposition:absoluteんposition:relative.

于 2013-03-04T08:58:52.620 に答える