問題タブ [css-position]

position: absolute を使用せずに、または画像を要素の背景にすることなく、画像の上にテキストを配置できるかどうかを確認しようとしています。
制約の理由は、HTML コードが電子メールに送信されるためであり、hotmail はどちらもサポートしていないことが判明しました。
CSS の勉強を始めたばかりの頃、画像の周りに浮かぶテキストをいじっていたときに、テキストが画像全体に楽しそうに広がってしまうことがよくあったことを覚えています。残念ながら、その動作を再現することはできません。

全文 (編集中):
グラフィック デザイナーから豪華なレイアウトを受け取りました。これは基本的に素敵な背景画像で、ウェブサイトにリンクするロゴと、基本的には「ここにテキストが入る」領域が中央にあります。
これらのケースではいつものように、テーブルを使用して、すべてが所定の位置にとどまり、クロスブラウザ + クロスメールクライアントが機能することを確認しています。
問題は、中央の「テキストがここに入る」領域が白い長方形ではなく、背景にグラフィックがあるという事実から発生します。
いくつかのテストを行った結果、Live Hotmail は絶対位置と背景画像のどちらの位置も好まないようです。相対的なマージンもレイアウトの残りの部分を台無しにするので良くありません。

現在のバージョンは、他のメール クライアント/ウェブサイトで動作します:

もちろん、「それは不可能です」は完全に受け入れられる答えかもしれませんが、そうではないことを願っています ;)

幅の広い (4000px) ページでアンカー タグにジャンプすると、アンカーされた画像が右に水平に配置されます。中央に揃えるにはどうすればよいですか？私はいくつかのことを試しましたが、どれもうまくいかないようです。私はここに来たばかりなので、コードを投稿することは許可されていません。

ご協力いただきありがとうございます、

ロバート C.

ユーザー (html/css の知識がない) が単純な静的 HTML ページをカスタム設計するサイトを構築しています。何年も前に、ドラッグ アンド ドロップによる絶対配置を使用して静的ページを設計する CMS を使用していましたが、それは誰にとっても非常に簡単に把握できる UI でした。

新しいサイトに実装できる JavaScript ソリューションがあるかどうか疑問に思っています。TinyMCE のようなもので利用可能な基本的なボールド、イタリック、フォント サイズ、画像のアップロードが必要ですが、ユーザーが要素を絶対に配置することも必要です。

そのような解決策を知っている人はいますか？

とにかくサイトでJQueryを使用しているので、JQueryソリューションは問題ありません。2 番目のフレームワークにロードする必要はありません。

私はこのサイトに取り組んでいます: http://waterwing.waterwing.ca/

右上隅のアニメーションは、配置された方法で水平スクロールバーを作成することを除いて完璧です.

絶対に上下 -120px に配置されています。スクロールバーがないように、本体を拡張せず、ページの端に当たると非表示になるようにするにはどうすればよいか疑問に思っています。

スクロールバーは Windows Firefox にはないようですが、Mac Firefox と Safari にはあります。

ありがとう、ウェイド

親の位置が相対的な子要素の幅を設定しようとしています。しかし、親の幅よりも大きい幅を子に与えると、FireFox の親の幅が変更されます。そして、IE6/IE7では、親の幅を変更する必要があり、その後、子の幅を変更できます。ここで、子の幅を変更する必要がありますが、親の幅は変更しません.Thx!

これを行う方法を考えていましたが、現在のマークアップは次のとおりです。

ここで、最後の の後に段落タグを作成する</div>と、タグのコンテンツがpブラウザーのこれらすべての div の下に表示されません。どうすればこれを行うことができますか？

みんなありがとう

IE で position : absolute を使用する必要がある position : fixed 要素があるため、html および body タグ内で overflow:auto を使用する必要があるページがあります (したがって、overflow:auto を使用して IE を削除します)。バグ）。

このビットはソートされています。

しかし今、私の問題は、ページ上の相対的な要素という別の位置にあることです。*html, body{ overflow : auto;} を配置した瞬間、これらの相対的に配置された要素は奇妙な動作をし、別の IE バグ (overflow:auto および position:relative) により IE で修正されます。

私が言われた一般的なケースでのこのバグの回避策は、「包含要素」に position:relative を含めることです。しかし、固定要素を機能させるには、含まれている要素に IE の position:absolute が必要なので、それは不可能です。

これを解決するにはどうすればよいですか？

助けてください

次のマークアップがあります。

しかし、「playArea」divの下にテキストの段落を置きたいのですが、playArea内のすべてのdivが絶対的であるため、テキストは最後の絶対配置divの下部に表示されません。

私はこれを調べて、float:left と clear:left を使用して代替手段を見つけましたが、最初の div でこのメソッドを使用した後、2 番目の div の開始点が最初の div ではなく最初の div の下にあるため、div を正しく配置できません。 (0,0)。これでどうやって手に入れることができるかについてのアイデア。

ありがとう

もうすぐ 2010 年ですが、私はまだ IE6 のバグに取り組んでいます。ため息。

それで、ここに私がグーグル経由で答えを見つけるのに苦労している（私にとって）新しいものがあります。内側の影で DIV を作成しています。div は、幅と高さを柔軟にする必要があります。これを実現するために、DIV に内側の影の背景イメージを与えています。次に、他の 3 つのコーナー (右上、右下、左下) に 3 つの絶対位置の div を追加し、それらが重なるようにそれぞれの高さを指定します。

これは、(当然のことながら) IE6 を除くすべてのブラウザーでうまく機能します。IE6 では、絶対位置の div には高さがありません。zoom: 1 to trigger has layout を使用してみましたが、うまくいきませんでした。これに対する修正を知っている人はいますか？

更新：問題を明確にするために（コーナーの問題は赤いニシンだと思うので）：相対的に配置されたdiv内に絶対的に配置されたDIVを持ち、ネストされたDIVをIE6のパーセンテージ高さ属性に準拠させるにはどうすればよいですか？

更新 2: 詳細情報: コンテナー div に明示的な高さが指定されている場合、これは機能します。問題は、コンテナ div の高さを相対的に配置された div の高さに基づいて設定する場合です。IE6はそれを理解できないようです。

position: fixed;動的な幅と高さで画面の中央にポップアップ ボックスを作成したいと思います。これに使いmargin: 5% auto;ました。それがなければposition: fixed;、水平方向にはきれいに中央揃えになりますが、垂直方向には中央揃えになりません。を追加position: fixed;した後、水平方向に中央揃えされていません。

完全なセットは次のとおりです。

このボックスを CSS で画面の中央に配置するにはどうすればよいですか?