問題タブ [positioning]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
3070 参照

css - CSSドロップダウン-オーバーフローが隠されたラッパー内のメニューの配置

あいまいなタイトルですが、私が欲しいものを一文で説明するのは難しいです。

私の問題は次のとおりです。jQueryによってアクティブ化されたいくつかのドロップダウンメニューを備えたテンプレートがあります。ドロップダウンリストは、次のように、第1レベルのリスト内に第2レベルのナビゲーションアイテムとして表示されます。

サブメニューはデフォルトで非表示になっており、サブメニューが属するリスト項目(この場合は「ツール」)をクリックすると表示できます。サブメニューは絶対位置に配置されているため、表示されるときは常にクリックされたリンクのすぐ下にあります。これはすべて完全に正常に機能します。

問題は、これらすべてがオーバーフローのあるdivにラップされていることです:非表示。サブメニューがこのdivの右側に近すぎて、リストアイテムが長すぎる場合、リストはラッパーの右側の境界線の下に表示され、部分的に非表示になります。オーバーフロー:autoはラッパーにスクロールバーを提供しますが、これは不要です。オーバーフロー:visibleは問題を解決しますが、ラッパーに高さがないようにするため、背景色と境界線が表示されなくなります。これは機能の一部であるため、どちらも役に立ちません。

大量のコードを引用する必要がないように、ライブの例をで見ることができますhttp://www.pkr.nl/template/forumdisplay.html

メニューをラッパーの外側に表示するか、適切な方法でメニューを適切に配置するソリューションを知っている人はいますか?

0 投票する
1 に答える
2047 参照

jquery - 複数のスライドショーとポップアップをアクティブ化するJquery

私が設定したこの現在のコードに少し問題があります。いろいろなプロジェクトのページを作っています。クリックすると、フルサイズの画像を含むポップアップが表示されます。一部のプロジェクトには複数の画像があるため、スライドショープロパティも追加しました。jqueryにimgの幅と高さを決定させてポップアップのサイズを変更し、各ウィンドウが最初の画像に基づいて一意のサイズになるようにします。これらの2つのスクリプトを単独で設定すると、正常に機能しますが、一緒に実装しているため、imgのサイズが読み取られていません。もう1つの問題は、スライドショーが画像のリストを処理するため、最初の画像を除くすべてが非表示になっていることです。ただし、このフィルターは他のプロジェクトの他のすべての画像も非表示にしています。

また、開いたポップアップを水平方向の中央に配置し、上から10%にします…コンテナウィンドウのコードがありますが、奇妙な位置になっているため、何らかの理由で機能しないようです。左から10%と25%に設定しました...

スライドショーのないポップアップに使用しているコードは次のとおりです。

スライドショーのポップアップに使用しているコードは次のとおりです。

これが私が使用しているJqueryです:

問題はここで見ることができます:http: //www.samuelfarfsing.com/test.php

ここでそれ自体で動作するスライドショー:http: //www.samuelfarfsing.com/slides.php

どんな助けでも大歓迎です!

0 投票する
2 に答える
668 参照

asp.net - Visual Studio 2008 で相対的に配置されたコントロールがブラウザーで正しく配置されない

Visual Studio 2008 を使用して aspx ページを開発しています。このページには、自分の国の地図の png 画像と、国の各州に 1 つずつある他の多くの png 画像があります。相対位置を使用して、これらの他の画像 (小さな点) をマップの画像の上に配置しようとしています。しかし、デザイン時にコントロールを必要な位置 (メニューの [書式] -> [位置...] の下) に配置し、任意のブラウザーでページを開くと、それらのコントロールの位置がまったく異なります。

私が説明していることを説明するために、2 つの写真を含めます。1 つは設計時の私のページで、もう 1 つは IE で開いたものです。

(おっと! 質問を投稿しているときに、新しいユーザーが画像タグを投稿できないことがわかったので、リンクだけを投稿しようとします、申し訳ありません)

VS の設計時

IE での実行時

なぜこれが起こっているのか、それを修正/対処する方法を知っている人はいますか?

よろしくお願いします。

はじめまして、R.

0 投票する
1 に答える
2180 参照

jquery - ビューポートに基づくdivの配置

ブラウザ ウィンドウのビュー ポートに対して div を配置したいと思います。現在、ウィンドウ サイズに基づいて動的に配置されるいくつかの jquery を含むポップアップがありますが、それらは絶対配置されているため、ページの上部に基づいているため、下にスクロールして下のプロジェクトをクリックすると、ページ、ポップアップはビューポートの外のページの上部に配置されます…</p>

特に「Redcat」プロジェクトをクリックすると、ここで確認できます。 http://www.samuelfarfsing.com/test.php

ビューポートの現在の位置に対してこれらの div を配置する方法はありますか?

HTML:

Jクエリ:

0 投票する
2 に答える
208 参照

html - HTML CSS フラグメントの配置

#infoBardiv と#actualCoverdiv を div の右側 (隣)に配置する必要があります#coversが、何らかの理由で、カバー div が存在しないように動作し、他の div の上に浮かんでいます。

0 投票する
2 に答える
121 参照

html - ブラウザーと z-index の問題

ちょっと、そこ。絶対にポジショニングしているイメージがあります。Firefox ではあるべき場所にあるのに、Safari ではまったく問題ありません。何が起こっているのか、そしてそれがどこにあるのかを知る確実な方法は何ですか.

0 投票する
5 に答える
413 参照

html - css インデント

indesign や quark... 段落のインデント... for picure のように行うのが好きです

htmlとcssでそれを行う適切な方法は?

テキストが画像を一周したくない...左側全体を保護したい画像に余白を置くとうまくいく...しかし、10-20-30ピクセルの場合(固定量(悪い))

私は負のポジショニングを試しました..運が悪い!

ここに説明する小さな画像があります!

代替テキスト http://produits-lemieux.com/indent.jpg

0 投票する
3 に答える
2334 参照

html - オプションのサイドバーを備えた流体コンテンツdiv

私が見たさまざまなCSSレイアウトモデルで対処されていない質問があるので、ここに投稿しようと思いました。

基本的な流体/固定2列レイアウトを使用するサイトで作業しています。サイトのコンテンツは左側のdivにあり、サイドバーは右側にあります。サイドバーの幅は200ピクセル程度に固定されており、コンテンツは親の残りの幅を埋めるために拡張されます。

コードは次のようになります。

これはかなり標準的なアプローチであり、ほとんどの場合正常に機能しますが、問題は、サイトのデザインでサイドバーが特定の場合にのみ表示される必要があることです。すべてのHTMLはPHPを介して生成され、「get-content()」関数は「get-sidebar()」関数が呼び出されるかどうかを認識しません。

サイドバーが呼び出されたら、サイドバー用の十分なスペースを残しながら、コンテンツを拡張して親divを埋めたいと思います。サイドバーがない場合は、コンテンツが親の幅全体に広がるように拡張する必要があります。

PHP / JavaScriptに依存せずに、CSSでこれを行う方法はありますか(おそらくコンテンツマージンに「自動」を使用します)?

0 投票する
4 に答える
3081 参照

jquery - div の高さが変化したときに画像を div の下部に貼り付けるにはどうすればよいですか?

右下隅に貼り付ける必要がある画像を含む div があります。これは、次の方法で簡単に実行できます。

ただし、div の高さは、一連のネストされたリストの一部がホバー イベントで表示および非表示になると、動的に変化します。div の高さが変更されても、画像はページが読み込まれたときに配置された場所に残ります。画像が上下に移動するときに、div の下部で画像を移動するにはどうすればよいですか?

0 投票する
3 に答える
2805 参照

jquery - 2 つの流体 div 間の間隔を維持する方法は?

親の中に 2 つの子 div (1 つは左に、もう 1 つは右) を持つ親 div があります。

Web ページは 1024px の定義と 1620px の両方で動作する必要があるため、幅が拡大された場合に流動的である必要があります。左の div と右の div の間の垂直方向のスペースを除いて、すべてのマージンは問題なく表示されます。jquery を使用して、2 つの div の高さを等しく維持しています。div 間のスペースを固定するにはどうすればよいですか? div の幅にパーセンテージを使用しているため、画面の幅を広げると、div 間のスペースが大きくなり、左右のマージンよりもはるかに広くなります。

マークアップ:

そしてCSS: