問題タブ [fluid]

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 に答える
1052 参照

jquery - Fluid DIV 内でインライン画像を拡大縮小および中央揃えするにはどうすればよいですか?

流動的なレイアウトがあり、ブラウザーのサイズが変更された場合でも、常にブラウザー ウィンドウの高さと幅に一致する div があります。つまり、ブラウザ ウィンドウの高さ 100%、幅 100% の div です。

この div 内に、親の幅と高さの 100% に収まる画像があります。したがって、理論的には、この画像はフルスクリーンになります。現在、ブラウザウィンドウを大きくすると、画像サイズが親よりも大きくなり、画像の右側と下部が切り取られます。

ブラウザ ウィンドウを拡大したときに画像のすべての端を切り取るにはどうすればよいですか? したがって、画像をその親内で垂直方向に中央揃えにしたいと思います。

すべての画像/div の幅は、パーセンテージを使用して計算されます。

これが私の既存のコードへのリンクです: http://jsfiddle.net/PfzQ8/4/

編集:そのjsfiddleは問題のコードではなく、現在持っているコードであり、それを拡張したいと考えています。

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

css - 可変レイアウトの画像が元の幅に戻らない (Webkit のみ)

私のウェブサイトはレスポンシブです。ポートフォリオセクションの画像を除いて、うまく機能します. ページが最初にロードされると、それらは本来あるべき姿で表示されます。ブラウザ ウィンドウを縮小すると、すべてが適切に動作します。ただし、ブラウザーを元の幅に戻しても (「通常の」ブラウザー ウィンドウ幅のデスクトップで開始したと仮定すると)、親コンテナーの幅に関連して画像のサイズは増加しません。

URL: http ://designintellion.com/portfolio/

関連する CSS は次のとおりです: http://pastebin.com/7YvQD4Hp

これは、Safari と Chrome でのみ発生します。Firefox と Opera で問題なく動作します。

何か案は?

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

css - css-画像編集ページの設定方法

モックアップをcssのあるページに変換しようとしていますが、経験不足のために見逃しているトリックがあるかどうかはわかりません。下の画像は私が欲しいものです。charメニューの幅を固定したいのですが、ブラウザウィンドウのサイズが変更されたときに編集メニューを拡大したいのです。

画像編集ページ

チャットボックスの下にオーバーフローするか、チャットボックスの間に空白ができるため、流体パーツのサイズをパーセンテージで使用できないようです。

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

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

css - 流動的なグリッドの作成-パーセンテージが台無しになっているようです

Skeletonフレームワーク(getskeleton.com)を見ていましたが、流体グリッドシステムが必要でした。これらのグリッドの内部動作にも興味があるので、自分でロールすることにしました。

しかし、two.columnsパーセンテージに問題があります。他のすべての列幅は正常に機能します。まず、何が起こっているのか:

ここに画像の説明を入力してください

2行目には明らかに何か問題があり、それが何であるかを本当に理解することはできません。

このレイアウトの私のコードは次のとおりです。

これが私が使用したミックスイン/関数ですが、それが重要かどうかはわかりません:

HTMLファイルのコードは次のとおりです。

パーセンテージの計算に問題があるとしたら、すべての行が何らかの形で混乱するだろうと思いました。しかし、それは2番目のものにすぎません。誰かがここで何が起こっているのか見たら、私に教えてください。

処理されたCSSをpastebinに置きます:http://pastebin.com/bxq1a5Ge

前もって感謝します。

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

javascript - Fluid ブラウザ (mac) で JavaScript を使用して印刷する

js コード window.print() を使用して印刷機能を実行しています。しかし、これは MAC OS の Fluid ブラウザでは機能しません。他のすべてのブラウザで動作します。これに対する解決策を教えてください。

thnx

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

validation - 検証通知から、typo3 のテクニカル検証エラー メッセージを抑制します。

こんにちは、フォームの検証後に素敵なエラー メッセージを取得しようとしています。extbasefluidを使用して、文字列を入力する必要がある名前と電子メール フィールドを持つ単純なエンティティを生成します。私は何も変えませんでした。拡張機能ビルダーから生成されたコードを使用しているだけです。

フィールドを空のままにすると、次の検証エラー通知が表示されます。

2 番目の 2 行は問題ありませんが、最初の行の技術的な通知を取り除くことはできません。これは、ユーザーに表示したいものではありません。

ご協力ありがとうございました!

付録:「フラッシュメッセージ」であることがわかりました。しかし、私は削除したくありませんこれは、「アドレスが正常に保存されました」のように、ユーザーにとって肯定的なフィードバック ソースとしても有益な場合があるためです。

付録:テストするために生成され、使用されたコード:

New.html テンプレート

AddressController.phpコントローラー:

Address.phpモデル:

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

css - 親の li | よりも幅の広い Fluid サブ サブ メニュー。wp_nav_menu

wp_nav_menu を使用すると、Wordpress は維持しやすい優れたナビゲーションを作成します。現在、ナビゲーションにはサブメニューとサブサブメニューがあります。リンク 2 にカーソルを合わせると、5 つのサブメニューとその下のサブサブメニューを含む大きなサブメニューが開きます (このようにして、メニューの下にあるものを確認できます)。

JSFiddle オリジナルメニュー付き例 http://jsfiddle.net/tSLqV/1/

通常、.sub-menu は一部の要素にぶら下がる必要があるため、位置:絶対になります。しかし、何らかの理由で jsfiddle は .sub.menu をこのように正しく表示しません。したがって、この例では position:relative になりました。

=====

一部で動作するようになった JSFiddle の例 http://jsfiddle.net/HYBA7/5/

=====

どうしたの?サブサブメニューを含むサブメニューを表示することはできますが、流動的にしたいです。サブサブメニューが収まらない場合は、float:left; を使用して他のサブサブメニューに分類されます。サブメニューの高さが調整されます。

通常、私はこれを行います: max-width: 940px; 幅: 100%;

問題は、この ul がネストされていることです。100% を使用すると、li 親のためにすべての要素が 25% で表示されます。2番目のJSFiddleで動作する理由がわかりません...

次に、ul の幅を 400% にすることを考えました (4 x 25% で 100% になります)。しかし、これもうまくいきません。

=====

この ul li ul li ul li 混乱で 2 日間過ごした後、私は別のアプローチを探していました。これらのulliをすべて取り除くことができたらどうしますか?代わりに div を使用します (これが良い方法かどうかはわかりません)。そして、divは親の幅に問題はありませんか? Wordpress Codex を見ると、最初の ul を削除していくつかのクラスを変更できることがわかりましたが、それだけです。

メニュー項目に条件付きクラスを追加することによるパート 4.7 についてはわかりません。これにはまだ ul li があり、幅は親の ul li の内容に依存するためです。

ウォーカーについて読んだことがありますが、 ul.sub-menu を div 要素で変換することができませんでした。

=====

サブサブメニューを含む 5 つのサブメニューだけで追加のメニューをロードし、jQuery でスライドさせることができることはわかっていますが、JavaScript の助けを借りずにそれを使用し、css のみにするのが好きです。

誰でもこの問題で私を助けることができますか?

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

wordpress - メーソンリー ボックスの高さを固定サイズにする

ウェブサイトは次のとおりです。http://skingdesigners.com

ページの石積みビューに問題があります。

最近、テーマを新しいテーマに変更しましたが、以前のテーマでは、石積みに合わせて記事をトリミングするために、すべての記事に「more」タグが自動的に追加されていました。そのため、実際に「more」タグを追加したことはありません1200以上の記事。

私の新しいテーマは記事を奇妙に切り取っています。これにより、1 つのボックスの高さが 600 (画像を含む) で、他のボックスの高さが 450 で、見栄えがよくないため、ページが台無しになります。(問題のあるリンクhttp://skingdesigners.com/page/10/ )

高さ 575 の固定サイズのボックスを作成する方法はありますか?

ここに私の石積みのテーマコードがあります..

ここにFUNCTIONS.PHPファイルがあります。

---そして最後に MASONRY FLUID テーマ ファイル ---

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

html - 100%幅の水平グラデーション効果のためのHTML/CSSデザイン

水平方向のグラデーションでブラウザの幅全体を伸ばす効果を実現しようとしています。現在、私の考えは3つのセグメントを作成することです。1つは左側にあり、背景色はCSSで最初の色に設定されています。これに続いて、CSSで再び背景に設定された画像である実際のグラデーションが続きます。これは幅1000pxでコンテンツ領域として機能し、magin:autoでページの中央に配置されます。次に、その右側に3番目のセグメントがあります。これは、2番目の色を背景として、最初のセグメントと基本的に同じです。このように、左右のセグメントは伸びますが、中央のセグメント(実際にはグラデーションが含まれています)は同じままです。

この理論はここにグラフィカルに描かれています。

私の問題は、2つの側面に関するものです。前述のように、中央の画像は固定の1000pxですが、左右の領域を流動的な幅(固定の高さ)にする方法はありますが、左側がブラウザの左側から中央のdivまでである場合に限ります。 divの右側からブラウザの右側への右側?

問題を十分に明確に説明したことを願っています。そうでない場合は、言ってください。さらに情報を提供するよう努めます。

乾杯

0 投票する
0 に答える
91 参照

html - 3列(静的-流体-静的)レイアウト内の2列(流体-静的)

私が欲しいもの:

私が得るもの:

注:div_3とdiv_4は、それらの上下に他のコンテンツがあるため、個別のグループ化ラッパーに含まれています

私の問題は、(少なくとも私が信じていることですが)div_4のマージンが残っているために、div_3がdiv_4の下でずらされてしまうことです。

また、div_3とdiv_4はラッパー内にあるため、div_1に使用した負のマージン左トリックを使用することはできません。