問題タブ [positioning]

私はCSS smartyになれたらいいのに....

Web ページの左下隅に div コンテナを配置するにはどうすればよいですか。ユーザーのスクロール位置を考慮していますか?

HTML と CSS を使用して、横方向の 100% 積み上げ棒グラフを作成しようとしています。DIVsグラフにしたい値に応じて、背景色とパーセンテージ幅を使用してバーを作成したいと思います。また、グラフに沿って任意の位置をマークするグリッド線も必要です。

私の実験では、CSS プロパティを割り当てることで、バーを水平方向に積み重ねることができましたfloat: left。ただし、混乱を招くような方法でレイアウトを台無しにしているように見えるので、それは避けたいと思います。また、バーが浮いているときは、グリッド線がうまく機能していないようです。

CSS ポジショニングでこれを処理できるはずだと思いますが、その方法はまだわかりません。コンテナーの左上隅を基準にして、いくつかの要素の位置を指定できるようにしたいと考えています。私はこの種の問題に定期的に遭遇するので (この特定のグラフ プロジェクト以外でも)、次のような方法が必要です。

1. クロスブラウザー (理想的には、ブラウザーのハッキングが多すぎないこと)
2. Quirks モードで実行
3. カスタマイズを容易にするために、できるだけ明確でクリーンな
4. 可能であれば JavaScript なしで行います。

1年間私を悩ませてきた質問があります。根本的な問題は、要素のサイズをその親に対して相対的に設定して、すべてのエッジから N ピクセルだけ挿入されるようにするにはどうすればよいかということです。幅を設定するのはいいことですが、親の幅がわからず、ウィンドウに合わせて要素のサイズを変更したい場合。(特定のピクセル数が必要なため、パーセントは使用しません。)

編集 また、コンテンツ (またはコンテンツの欠如) が両方の要素を引き伸ばしたり縮小したりしないようにする必要があります。私が得た最初の答えは、親にパディングを使用することでした。これはうまく機能します。親の幅を正確に 25% にし、ブラウザーのクライアント領域とまったく同じ高さにし、子がそれを押してスクロール バーを取得できないようにします。/編集

{top:Npx;left:Npx;bottom:Npx;right:Npx;} を使用してこの問題を解決しようとしましたが、特定のブラウザーでのみ機能します。

ページのサイズが変更されるたびにすべての要素を修正するために、jquery を使用して JavaScript を記述できる可能性がありますが、その解決策には満足していません。(上部を 10px ずらして、下部を 5px だけオフセットしたい場合はどうすればよいでしょうか? 複雑になります。)

私が知りたいのは、これをクロスブラウザーの方法で解決する方法、または簡単な CSS ソリューションを可能にするブラウザーのリストです。誰かがこれを簡単にするトリックを持っているかもしれません。

CSSのみを使用してxhtml要素を中央に配置するための私のお気に入りの方程式は次のとおりです。

それをサポートするブラウザには、より単純なmargin：autoメソッドもあります。他の誰かがコンテンツをそのコンテナの中央に表示するように強制するトリッキーな方法を持っていますか？（垂直センタリングのボーナスポイント）

編集-おっと、マージン左の1つの「負の」部分を忘れました。修繕。

私はdivsでレイアウトされたサイトに取り組んでいます。特に問題が発生しているのは、トレーニング写真divです。

http://php.wmsgroup.com/eofd6.org/education.htmlにアクセスすると、左側のナビゲーションの下にドロップダウンした写真が表示されます。そのナビボックスのすぐ下にスナップしたい。その位置付けとメインコンテンツdivの位置付けでいくつかの異なることを試しましたが、うまくいきません。

どんな助けでも大歓迎です。スタイル シートへのリンクはhttp://php.wmsgroup.com/eofd6.org/in.cssです。

ありがとう！

今、

マージンがあります: 0; したがって、divの上部にあります。div の高さは 300px です。

ただし、テーブルをdivの下部に配置したいと思います。valign="bottom" ただし、テーブル全体。

親 div の左端と送信ボタンの左端の間のスペースに div#one を中央に配置したいと思います。

私は jQuery に比較的慣れていませんが、これまで見てきたことは気に入っています。私が望むのは、すべてのブラウザで「位置：固定」が機能しているかのように、div（または任意の要素）がページの上部にあることです。

複雑なことはしたくない。大規模な CSS ハックはしたくありません。jQuery (バージョン 1.2.6) を使用するだけで十分だと思いますが、jQuery-UI-core が必要な場合は、それも問題ありません。

$("#topBar").scrollFollow(); を試しました <--しかし、それは遅くなります...何かが本当に固定されているように見えたいです。

テーブル セルがあり、その中の div が常に左下隅にあるようにします。以下は IE と Safari では問題なく動作しますが、Firefox はdivセル内ではなくページ上に絶対に配置しています (ソリューション ソリューションに基づくコードはこちら)。Firefox を Quirks モードと Standards モードにする DTD を使用した場合と使用しない場合の両方をテストしましたが、どちらも正しく動作しませんでした。私は立ち往生しています - 何かアイデアはありますか?

シンプルである必要があります。これが私のCSSです。

ユーザーの操作に応じてパネル表示を切り替えます。

FireFoxでうまく機能しますが、Safariではページの上部に表示されます。

ps "vertical-align：middle;" どちらも機能しません。

pps設定「position：relative;」パネルの「position：relative;」を設定しても機能しません。パネル上と「position：absolute;」画像上でFFでそれを壊し、Safariでは何もしません

これはうまくいきました：