問題タブ [fluid-layout]
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.
height - グリッドが折りたたまれた状態から表示された状態にアニメーション化されない
私は現在、折りたたみからアニメーション化するグリッドを作成しようとしています - >保存が完了したことをユーザーに通知するために表示されます。Blend 4 でプロジェクトを開き、SaveNotifier のユーザー コントロールを作成して、このプロジェクトの他の領域や他の領域で使用できるようにしました。デフォルトを折りたたむように作成し、「完了」と呼ばれる別の状態を作成しました。これは、可視性が表示に設定され、デフォルト状態に戻す 3 秒のタイムトリガーがあります。トランジションは 1 秒以上トランジションするように設定されており、fluidlayout を使用して状態間のアニメーションを表示しますが、状態間のアニメーションは表示されません。代わりに、fluidlayout や遷移時間がないかのように表示されます。
これをしようとして問題があるかどうかを教えてくれるか、またはこれを行う方法を教えてくれるほど親切な人がいたら、それは素晴らしいことです
css - このレイアウトで div 全体で画像をテキストに揃えるにはどうすればよいですか?
だから私は自分のウェブサイトの再設計のためのレイアウトを持っていて、左側の画像を右側のテキストのベースラインに揃える方法を見つけようとしています. 左側の画像は実際にはテキストであるため、ベースラインに合わせる必要がありますが、@font-face として統合する代わりにタイトルとして質素に使用されています。@font-face を使用したとしても、それらを div 間で整列させる方法はありますか? 助けてくれてどうもありがとう!ここで画像を見つけることができます: http://personal.justgooddesign.net/stuff/Home.jpg
このホームページの例では、「自己紹介」を「私の名前はジャスティンです」というベースラインに合わせたいと考えています。「FALL BLOSSOM」に合わせて「my work」を配置し、他のページなどでこれを実行できるようにします。
css - em ベースのレイアウトの問題
すべての寸法が em で指定されている css を使用してレイアウトを構築しようとしています。これにより、さまざまなフォント サイズ/ズーム レベルでページを同じように表示できるようになるという印象を受けました。ただし、サイズ/ズームが変更されると、テキストの折り返しが異なることに気付きました。
たとえば、この jsfiddleでは、テキストはネイティブ ズームと 1em のフォント サイズで 1 行にすべて表示されますが、2em のフォント サイズで折り返されます。コンテナーの幅が全角であるため、一貫してラップする/ラップしないことが予想されるため、フォントサイズに比例して増加するはずです。
私は何か間違ったことをしていますか、それとも em 測定の有用性を誤解しているだけですか?
html - レスポンシブ CSS、モバイル div スタック
善良な人々 - 少し助けが必要です。私はレスポンシブになるサイトを作っています。css メディア クエリで縮小されます。私の問題は、2 つの div が隣り合っており、モバイル版では青の上に赤が必要なことです: http://barebente.com/test/responsive/
ブラウザ ウィンドウのサイズを約 400 に変更して、意味を確認してください。何らかの理由で、それらを逆にスタックすることはできません。これにより、メイン メニューの下にコンテンツが表示され、その下にセカンダリ メニュー (サイドバー) が表示されます。提案と助けをいただければ幸いです。
css - レスポンシブ デザインの CSS パディングのトラブルシューティング
この単純な HTML5 レイアウトは、左側にナビゲーション バーを配置し、その横に本文テキストを配置することを目的としています (流動的でレスポンシブなデザインのために、ピクセルではなくパーセンテージを使用します。計算は CSS 内のコメントにあります)。
http://www.wturrell.co.uk/stackoverflow/20110615-01.html
「ページ」div 内の要素の幅は、正確に 100% になります。特定の要素 (この場合は nav) にパディングを追加したいと考えています。すべてのパディングを削除すると、それらは正しくフロートしますが、1 または 2 ピクセルを超えるパディング (指定されている単位に関係なく) が壊れます。これがパディングであるため、レイアウトが壊れている理由がわかりません。ブロックの全体的なサイズを変更してはいけませんか?
私は何を逃したのですか?
更新 - 解決策: http://www.wturrell.co.uk/stackoverflow/20110615-02.html
(要素の表示幅 = 幅+境界線+パディング。ナビゲーションは公称合計 200 ピクセルで、右側に 20 ピクセルのパディングがあるため、流動的なデザインの場合、幅 = 180/900*100 または 20%、パディング = 20/900*100 または 2.222 % で、本文は 700/900*100 または 77.777% のままです。)
html - 流動的なレイアウトに「最小マージン」を適用する
かなり高い解像度で最適に動作するサイトを構築しようとしていますが、解像度が低くなると可能な限り左にスライドします。
ここにコピーするコードすらわからないので、リンクは次のとおりです。
私が必要としているのは、の左側がプラス数ピクセル#page
の右側で左にスライドするのを止めることです。#logo
ページの13.25em
左側からです。
の左マージンをに設定しました#page
。13.25em
これは正しいように見えますが、解像度が高くなると、ページが中央に配置されていないため、ページが奇妙に見えます。センタリングを維持しながら、ある時点でスライドを停止したい。
だから私は左側がこれよりも左に行かないようにしたい:
ここで説明した2つの要素で純粋なCSSを使用してこれを実行できれば、私は非常に好むでしょうが、必要に応じてHTMLを追加できます。
私は長い間、この質問をする方法にさえ苦労してきました。質問をするか、この質問を編集して、質問の明確さを向上させてください。
アップデート:
これは、現在2つの解像度でどのように見えるかの画像です。
1920年
1280
これは、おおよそ以下の解像度でどのように見えるかを示す画像です1540
。
〜より高い解像度1540
は、現在のように右にスムーズにスライドします。
jquery - JQuery Fluid CSS FloatedDIVRowsトラバーサル
コンテナdivがあり、その中にクラス'icon'のdivコンテナがあるとします。
例えば
アイコンの幅は100%で、流動的な幅のコンテナに配置されます。'icon'コンテナの固定値は100pxです(例として、他の何かである可能性があります)。
div.icon要素を表す要素がある場合、ブラウザーまたはコンテナーのサイズ変更を考慮しながら、要素が現在どの行のどの位置にあるかをどのように判断しますか?最初の行の最初のアイテム?5行目の2番目のアイテム??
css - 流動的な CSS レイアウトの質問
公開される映画のウェブサイトをデザインしている最中ですが、すべてのブラウザ ウィンドウ サイズと画面サイズに収まるようにするのに問題があります。基本的に、たとえばスプラッシュ ページのマークアップには、ページの上部に映画のロゴがあり、その下にビデオ (映画の予告編) があり、ユーザーをホームページに移動させる入力ボタンがあります。これらはすべて、すべてのブラウザ ウィンドウ サイズの中央に配置する必要があります。ただし、さまざまなサイズなどを試すと、コンテンツが中央に配置されず、ビデオが背景画像から外れます。CSSでそれをどのように修正しますか?
他にもいくつかのページがあります。つまり、概要、ビデオ、そしてプロジェクトに寄付するためのページです。すべてのサイズでコンテンツが正しく機能するように、これらが同じように機能することを望みます。ありがとう!
これを見て私の言いたいことを理解したい場合は、リンクはhttp://rescuedthemovie.com/new/homeです。これは開発ページで、基本的に最終的なデザインがないため、多少乱雑ですが、私が話していることがわかります。
ジウィントン
css - フロートdivと非フロートdivの順序が重要な場合があるのはなぜですか?
CSS Auto Marginが他の要素を押し下げるのと同様の問題があります。右側のフローティングサイドバーが、メインの非フローティングコンテンツdivの下に押し下げられます。提案された答えは機能します。マークアップの順序を逆にして、非フロートdivの前にフロートdivを書き出します。
たとえば、これは次のとおりです。
次のように厄介に再注文する必要があります:
では、なぜこれも並べ替えなしで機能するのでしょうか。グリッドベースの設計を使用した最大幅と最小幅の弾性レイアウトですか。ライブデモをご覧ください。マークアップの順序は依然として賢明です。floatdivは非floatdivの後に書き出されます。それでも、フロートはページに押し下げられません。
適切なスタイルを設定するために、テーマPHPをハックする必要がない(divを並べ替える)必要がないためです。
解決策は「divを並べ替える」ことであると述べている他の投稿: