2012-03-11 4 views
-1

私のウェブページ上の特定のアイテムの私の位置付けは、大きなスクリーンでそれらを展開し、小さなスクリーン上に表示するときにわずかに動いています。ウェブサイトでのポジショニングを扱う最良の方法

これは前に私に起こったことはありませんが、これはページをデザインしながら、最高のポジショニングのようなものはありませんまた、私はasp.netで開発しています最初のサイトここに私のCSSだ

#backb{ 
    position:absolute; 
    left :22%; 
    bottom:10%; 
} 

#backf{ 
    position:absolute; 
    left :12%; 
    bottom:0%; 
} 

#avatar{ 
    position:absolute; 
    left :55%; 
    bottom:45%; 
} 
+1

オーバーフローyを追加してみてください:本文にスクロール – jacktheripper

+0

なぜ絶対位置を使用していますか? – sandeep

+1

*これは私の前に起こったことはありません* - それはしばらくの間誰もが起こります、心配しない、バディー... *笑い* – vzwick

答えて

0

です。ブラウザーや異なるシステム間で相互互換性のある技術を使用する必要があります。要素がその最初の位置付け祖先要素に対して配置され、このスタイルを使用している間、あなたのCSSで

、あなたは

position: absolute; 

を使用しています。したがって、デフォルトでは、その位置は<body>の相対位置になります。

次に、percentage(%)の要素の異なる位置を割り当てる値を使用しています。この値は、相対的な位置にある最初の祖先(デフォルトでは<body>)に対するブラウザによって計算されるため、解像度が変わるたびにテンプレートがそれに応じて移動します。


今、私からのいくつかのポインタ。

  1. 絶対に必要でない限り、position:absoluteを使用しないでください。
  2. パーセンテージ%の値を使用すると、常に流体の結果につながります。したがって、どのように処理するのかわからない場合は、使用しないでください。
+0

問題を解決するための正しい方向を教えてください。 – user1173371

+0

@ user1173371、そのアップロードのために必要な結果の画像(レイアウトのみ、内部のものは除外してください)とレイアウトマークアップ。私はそれが絶対的で狂った立場になくてもできることを示します。 – Starx

0

CSSの問題は、パーセンテージを使用することです。 X%ofを取っているコンテナが実際にその数で割り切れることが分かっている場合にのみパーセンテージを使用してください。たぶん、固定幅を使用しようとする可能性があります。私はまた、前に置かれたコメントに同意します:位置を避けるようにしてください:特にあなたのレイアウトの主要なコンポーネントについては絶対的です。

何年もの間CSSを書いた後、私と私の同僚が何度も何度も車輪を再開発していたことが分かりました。そして、すべてのブラウザでメインレイアウトをテストするのはお尻の痛みでした。コミュニティを信頼し、フレームワークを標準化する方がずっと簡単だと結論づけました。それはあなたのサイトの100%で動作しませんが、多くの異なるクライアントのためにCSSを書くならば、時間の90%以上で十分です。私は数種類のフレームワークを見て、35人以上の私の会社が新しいバージョンのYAML(http://www.yaml.de/)を標準化しました。それは何度も開発を加速しましたが、私の言葉をそれに取りません。優れたチュートリアルをチェックしてください。私は本当に素晴らしいです。乾杯。