問題タブ [fluid]

簡単な質問。私は自分のサイトにタブ付きのインターフェースを持っていますが、サイトのすべての部分が互いに衝突しています。ディスプレイが小さいときにサイズを変更するだけの流動的なレイアウトを実現するにはどうすればよいですか。私は@alistapartでいくつかの記事を読み、ブラウザウィンドウに関連するdivと、dコンテナ内の他のすべてのdivを相対的にしましたが、まだ何もありません。他に何をしようとすべきかについての手がかりはありますか？

代替テキストhttp://www.thelawyerschronicle.com/images/siteprob.jpg

ソフトウェアを開発しました。このソフトウェアでは、さまざまな状況に応じて、さまざまな入力画面でいくつかのコントロールを表示および非表示にしています。

コントロールを非表示にすると、そのコントロールが占めていたスペースがそのまま残され、レイアウトが非常に悪く見えることがあります。コントロールの数が多い画面で。私たちのクライアントはこれを気に入らず、これについて何かをするように私たちに依頼しました.

私の質問: 流体レイアウトを作成して、コントロールが非表示のときに残りのコントロールが自動的に調整されて、非表示のコントロールによって残された空のスペースを埋め、コントロールが表示されているときに自動的に道を譲る方法はありますか?コントロールのために、それに応じて自分自身を調整します。

コーディングによってこれを達成できることはわかっていますが、レイアウトを調整するために各画面で多くのコードが必要になります。80 以上の画面があるため、各画面のコーディングを削減するものを探しています。

エラーが少なく、各入力画面で不要なコーディングを取り除くことができる方法を提案してください。

GoogleLabsのブラウザサイズ

私は常に流動的な幅のレイアウトよりも固定幅のレイアウトを好みました。主な理由の1つは、画面の解像度を気にすることなく、画像全体がどのようになるかをよりよく理解できることです。

しかし、今では「画像」が変更され、現在ほとんどのユーザーが使用している最低解像度と最高解像度の間に大きな差異があり、彼らはここにとどまっているようです。

800ピクセルまたは1024ピクセル幅しかサポートしていないネットブックがあります。また、 1650ピクセルをサポートする22インチのモニターがあり、 1920ピクセル以上をサポートする24インチのモニターがかなり一般的になっています。

私はしばらくの間800ピクセルのユーザーをほとんど「無視」しており、固定の950/960ピクセル幅で開発してきました。また、人気のあるサイト（ 1つはSO）がこのアプローチまたは流動的なアプローチを使用していることにも気付きました。

テキスト（ほとんど）のみのWebサイト（ウィキペディアなど）の場合、流動的なシステムを使用しても問題はありませんが、画像やビデオに依存して興味深いコンテンツを作成する他のすべてのWebサイトについてはどうでしょうか。ソーシャルネットワーク、求人広告など...この問題に対処するための彼らのアプローチは何ですか？

Seam Carvingは近い将来に良いオプションのように見えますが、十分に成熟していません（現時点では、ブラウザーもjQueryもネイティブにサポートしていません）。また、ユーザーはそれを理解できず、混乱し、結果はウェブサイトを放棄します。

ウェブ上のデファクトスタンダードはまだ1024ピクセル幅であり、24インチモニターで980ピクセルを未使用のままにしておくことは、間違いなく奇妙に思えます。では、私たちのオプションは何でしょうか。

これについてのあなたの考えと、流体システムと固定システムの両方での経験を聞いてみたいと思います。

PS：これらのシステムのいずれかを使用している人気のあるWebサイトも歓迎します。私は、流動的なシステムを使用している非テキストWebサイトを見ることに特に興味があります。

編集：私はちょうどこの答えを見ました、そして私は流体と液体のレイアウトの違いについて少し混乱しました、それらはまったく同じであるはずではありませんか？

私は流動的なレイアウトを作成するのが大好きですが、誰もが知っているように、その問題の 1 つは、大きな画面では、テキストが横方向に伸びて不快な長さになる可能性があることです。

私自身は適度な画面サイズしか持っていないので、これは気になります。巨大な画面を使用している人は通常、ウィンドウを元に戻して適度な幅に設定しますか (マルチタスク)、それとも最大化しますか?

デザインに関する限り、最大幅を設定することは大したことではありませんが、それでも知っておく必要があります。

ありがとう。

基本的な流体レイアウトをどのように設定するかについて簡単な質問があります。高さ40px、幅100％のヘッダーバーが上部にあります。これは見栄えがします。

次に、＃leftと#right divがあり、それぞれがフロートしています。これはかっこいいですね。どちらも高さが100％でうまく機能しますが、問題はページが40ピクセル下にスクロールすることです。これは、ヘッダーバーから40ピクセルあるためです。ヘッダーに流動的なレイアウトを使用すると、コンテンツボックスがひどく見えます。小さいまたは非常に大きい解像度で。

何か案は？

これが私のCSSです

そしてここに私のhtmlページがあります：

それは役に立ちますか:)

Liquidアプリスタイルの流体シミュレーションを実現するにはどうすればよいですか？LBMまたはSPHが必要ですか？SPHはiPhoneで使用するには重すぎると思います。しかし、液体中の水はSPHのように見えます。

ありがとうございました！

私は最近、「elastic css」フレームワークに出くわしました。これは、私には良いことのように見えます。私はすでに設計図を試しましたが、これは私にとってやり過ぎのようです（コンパスで試しました）。

それで、あなたへの私の質問は、rails / xhtml webdevelopersです：elastic cssフレームワークとrails（3）およびhaml / sassは良いことですか？;）

wwwを検索しましたが、elastic cssをsassやhamlと一緒に使用できるかどうかさえわかりませんでした。誰かがそれを経験したことがありますか？たぶん、そこに流体cssのような単純なものもありますか？何かお勧めはありますか？

ありがとう！

参考：http ：//elasticss.com

1 列レイアウトの HTML5 Web ページを作成しています。基本的には、個々の投稿を含むフォーラム スレッドです。

CSS ファイルで列の幅を 600px に指定し、margin: 0 auto;. ただし、個々の投稿にある一部の画像は 600px を超えており、列からはみ出しています。

大きな画像に合わせて個々の投稿を広げたいと思います。ただし、他のすべての投稿の幅は 600px のままにしたいと考えています。

今のところ、overflow:autoスクロール バーを作成するためだけに使用していますが、これは理想的とは言えません。これは、個々の投稿の幅をより大きなコンテンツに対して大きくし、通常のコンテンツに対して固定したままにすることは可能ですか? 純粋なCSSだけを使用してこれは可能ですか?

前もって感謝します！

このウェブサイトhttp://www.elkaniho.com/には、私が望む CSS レイアウトがあります。ご覧のとおり、正確なグリッドではなく、下部と側面に div が重なり合っています。

ブラウザのサイズを変更すると、すべてが完全に再調整されますか?

elkaniho.com のように同じレイアウトを取得する方法や、これがどのタイプのレイアウトと呼ばれているか知っている人はいますか?

最新のデザインのダミー レイアウトを作成しましたが、最小幅が機能することを確認するために ie7 でウィンドウのサイズを変更すると、コンテンツ領域がサイドバーの下に移動しますが、他のすべてのブラウザー (ie6 を含む) では動作します。まさにそうあるべきです。

デモリンク

それを開始するこのランダムなカップルの余分なピクセルを引き起こしている問題が何であるかを誰でも見ることができますか?