問題タブ [liquid-layout]

わかりました。まず、IE7 までサポートしているので、ボックスのサイズ変更はありません。

ウィンドウの上部と下部にそれぞれ固定サイズのヘッダーとフッター (それぞれ 80px など) を配置しました。

ウィンドウのサイズに関係なく、間にあるすべてのスペースを div で占めたいと思います。JavaScript で簡単ですが、CSS だけでそれを行う方法はありますか?

私が構築している Rails アプリケーションでは、ユーザーがページ テンプレートを編集できるようにする必要があります。

主な懸念事項は、顧客がテンプレートを編集できるようにすることがどれほど安全かということです。そのため、erb テンプレートは方程式から除外されます。

Liquid マークアップと Handlebars.js を見てきました。https://github.com/jamesarosen/handlebars-railsには、ハンドルバーの優れた Rails 統合があります。

ハンドルバーを使用することをお勧めします。ハンドルバーのテンプレートを顧客に編集させても安全かどうか、誰か確認できますか?

私は CSS を初めて使用し、これまでレイアウトを作成したことがなく、Internet Explorer での最初のレイアウトでいくつかの問題が発生しています。でも、Firefox では見栄えが良いと思います。レイアウトを開始する前に HTML と CSS について多くのことを読んだので、IE にいくつかのバグがあることはわかっていましたが、レイアウトを作成して問題を調査した後でも、どの解決策も機能していないようです。ここの誰かが助けてくれることを願っています。

TL;DR: IE で新しいレイアウトが機能しない、助けが必要 (調査した)

問題 1: IE では、2 つの右側のサイドバーが Firefox に比べて広すぎます。問題 2: ウィンドウの幅が 1024 未満の場合、container1.css から container2.css に切り替えて、より小さな解像度でより適切に表示されるようにコンテナーのプロパティを効果的に変更する必要があります。 . Firefox では問題なく動作しますが、IE ではコンテナ期間が削除され、コンテンツがウィンドウ全体に流れるように見えます。

主な CSS は次のとおりです。

誰かが IE でこれらの問題を解決するためのアドバイスを提供していただければ幸いです! 改善のための提案も大歓迎です

部分的に流動的なレイアウトの作成に問題があります。レイアウトの幅と高さは 100% である必要がありますが、スクロールバー (overflow: hidden;) を含めることはできません。

上の画像は、私が達成しようとしていることを示しています。ご覧のように：

1. ヘッダーは固定する必要があります - 幅 100% の 110px。
2. コンテナ div を介してラップされた 2 つの div。青いものは幅 130 ピクセル、高さ 100% で固定する必要があり、緑のものは液体の幅と高さ 100% である必要があります。

これが私の現在のコードです：

このコードにはいくつかの問題があります。

1. さまざまな解像度 (800x600、1024x768、1280x1024 など) では機能しません。
2. 「コンテンツ」div は常にページを最後まで埋めるとは限りません。
3. ページのサイズを変更して解像度を下げると、緑の div が青の div の下に表示されます。

私はここでひどく間違ったことをしているかもしれないと思いますが、私はデザイナーではないので、この問題を解決するための「正しい方法」を教えてくれる人はいますか?

だから、これはstackoverflowでの私の最初のQであり、最終的にアカウントを「作成」すると、自分自身と「類似した」質問タイトルのかなり大きなリストが表示されます...しかし、私は答えを見つけるためにGoogleをほとんど悪用してきました.無駄に; それで、ここに行きます。

私は html と css にかなり慣れていませんが、過去 2 か月未満の間に、猛烈なペースで、積極的かつ強迫観念的に、可能な限り多くの知識を急速に獲得してきました。

しかし、自分のレイアウトでやりたいことに気付いたのですが、達成できないようです。

おそらく、誰もが「リキッド」レイアウトと、信じられないほど人気のある「聖杯」の 3 カラム レイアウトについて知っていると思います。

このタイプのレイアウトを使用したいのは、私の意見では、それが最も美的に楽しいからです...しかし、私は意味的に自分自身を書きたいので、誰かを「コピー」しないので、私自身のフレームワークと個人的なつながりがあり、自分のマークアップを見たときに他の誰かが考えていたことを理解する必要はありません。

目標は次のとおりです。

メイン コンテンツを中央に配置し、2 つの「サイド バー」列で囲み、フル解像度から幅 320px までの「リキッド」全体を配置します。

ただし、SEO の目的で、「メイン コンテンツ」列 (中央の列) を DOM ツリーの 1 番目にし、サイド バーを次のようにします。

1番目）ページ幅に合わせて流動的に縮小し、次に2番目）ページが非常に狭くなるため、「メインコンテンツ」（中央）の列を左に「スナップ」し、上に残し、幅100％にする必要があります.3番目) サイド バーがメイン コンテンツ列の「下」に「スナップ」し、それぞれが幅の 50% を占めます。

そのため、3 つの列すべてが常にページの全幅を占めており、サイド バーが「スナップ」すると、「中央」の列と同じ幅になります。

このようなもの：

または:スナップ(b)

私が何をしているのか分かりますか？

問題は次のとおりです。

私が考えたり検索したりできることはすべて試してみました...そして、cssが「DOM：1st / middle」列を真ん中と一番上にとどめる方法はないようです。また、両方のサイドバーを対称に保ち、スペースを確保し、3 つの柱すべてを常にすっきりとした箱に収めます。

私は中央の列をトップに保ち、DOM で 1 位にすることができましたが、そうすることでサイド列に混乱と無秩序がもたらされます。一番上ですが、その div に #3 を配置すると、すべてが台無しになります。

この1 つの小さな問題は、私にとって非常に苛立たしいものであり、今では何週間もそれに取り組んできました。(html と css の学習を始めたのはほぼ 2 か月前です。時間の半分は、この 1 つの問題に取り組むのに費やされています)

誰かが私が話していること、やろうとしていることを正確に知っていて、知っているなら:

A）これが可能かどうか

B）これを行う方法

私は絶対に知りたいと思っています...なぜなら私は本当にこの1つの小さな（読む：巨大な）問題を超えて、世界支配への道を歩み続けたいからです.

TL;DR:

「|213|」を作りたい なる：

これに変わることなく：

またはこれ：

最大画面と最小画面の間の任意の時点。

できる？それとも、（あきらめて）レイアウト戦略を調整して先に進むべきですか？

チュートリアルで作成する方法を見つけたこのメニューがありますが、問題が1つだけあります。ページのサイズを変更すると、すべてのレイアウトが新しいウィンドウサイズに収まるように変更されますが、テキストが画面に収まらない場合、メニューは新しい行を作成するように見えます。ウィンドウのサイズが小さすぎてすべてを表示できない場合でも、すべてのメニューを1行に残しておく必要があります。私はここで見つけたたくさんのハックを試しましたが、誰も私のために働いていないようです。これは私が使用しているCSSです。

メニュー構造のHTMLコードはこちらです。

必要なメニューです http://i.stack.imgur.com/wXLSw.png

これは私が http://i.stack.imgur.com/B01H9.pngで得た問題です

メニューが完全であるかどうかは関係ありませんが、同じ行に必要です。あなたが私を助けてくれることを願っています

私ができるようにしたいのは、700px の列の左側に 20% の幅の画像を配置し、右側にページの残りの部分を占める幅の画像を右側に配置することです。SO 基本的に左から右に 20% 幅の画像、次にサイトのコンテンツを含む 700px 幅の列、そしてページの残りの幅を占める右側の画像があります。これを行う方法に苦労しており、複雑にしすぎているように感じます。

私は流動的なレイアウトを持っており、CSS に Less.js を学習/使用しています。

ユーザー ビューボックスを考慮する必要がある div 'A' があり、別の div 'B' の高さ (% 単位) を減算し、最後にピクセル単位の別の div 'C' を減算します。

これは私がうまくいくと思ったものですが、うまくいきません：

CSS で均一なサイズとマージンを持つ要素のリキッド グリッドをどのように作成しますか?

私が抱えている主な問題はマージンです。明らかな解決策は、幅とマージンをパーセンテージに設定して、それで完了することだと思います。垂直マージンはコンテナーの幅のパーセンテージであるため、これは機能しません。コンテナーが水平方向にサイズ変更されると、垂直方向の間隔はオフになります。

私は2つの方法を試しました。1 つはパーセンテージ マージン、もう 1 つはマージン 'em'です。どちらも正しくスケーリングしません。私に何ができる？

私はすでにこの質問を読んでいますが、状況が少し異なり、CSS があまり得意ではないため、自分のニーズに合った解決策を頭で考えることができません。

私が持っているのは、他の 3 つの div を含む div です。

• 左のdiv1
• div2 中央揃え
• 右のdiv3

問題は、div2 が存在する場合と存在しない場合があることです。

これは私が現在持っているものです：

しかし、これは私が欲しいものです:

これが私のフィドルです

何か案は？ありがとう！