問題タブ [liquid-layout]

フレックスを使い始めて最初の1か月が終わりました。これまでの私のプロジェクトはすべて、アプリケーション内のすべてが絶対位置にある非常に小さな固定サイズのコンテナーです。

次の今後のプロジェクトでは、より動的なレイアウトが必要になり、アドバイスが必要になります。

アプリは3つのコンテナで構成されます（どのコンテナを使用するかはまだわかりません）

コンテナ1

アプリの幅全体と高さの4分の1になります。

コンテナ2 はコンテナ1の下にあります。これは、アプリの幅の半分、高さの3クォーターになります。

コンテナ3はコンテナ2と同じになります。

各コンテナを折りたたんで、他のコンテナがこれに対応できるようにしたいと思います。

たとえば、コンテナ1を折りたたんで、コンテナ2と3が3クォーターの高さから100％の高さになるようにします。

コンテナー2を折りたたむと、コンテナー1は同じままですが、コンテナー3はアプリの幅の半分から幅の100％になります。

この種のことをするのは難しいでしょうか。これを調べ始めるのに良い場所はどこですか。

チュートリアルへのリンクは素晴らしいか、ちょっとしたアドバイスの提供です。すべきこと/すべきでないことも大きな助けになります。

みんなありがとう、

ダブ

私の問題は、ページがスクロールしても常に下部にあるフッターが必要なことですが、コンテンツをフッターに追従させる方法がわかりません。

与えられた例を見てください。これは非常によく似たレイアウトです。サイドバーもありますが、firebug などで、bodydiv がフッターに従っていないことがわかります。

例: クリックしてデモを表示

タイトルはそれを言います。次のような2列のCSSレイアウトが必要です。

• 中央揃え-メインコンテンツはページの中央揃え
• 固定（ピクセル）右列幅
• 左の列が流動的です-使用可能なすべてのスペースから右の列の幅を差し引いたものを使い果たします
• ソース順-左側の列のコンテンツは、HTMLソースの右側の列のコンテンツの前にあります
• 最小幅を考慮します-私の例では760px
• 最大幅を考慮します-私の例では1024px

ウィンドウが最大幅よりも大きい場合、コンテンツはページの最大値の中央に配置されます。ウィンドウが最大幅よりも小さい場合、水平スクロールバーが表示される最小幅よりも小さい場合を除いて、コンテンツはページの100％を占めます。

これらのプロパティをサポートしていないブラウザーの最小/最大幅を処理するためにいくつかのマイナーなJavaScriptを使用するつもりですが（私はあなたのIE6を見ています）、レイアウトのその部分を劣化させるのと同じように喜んでいます。

それはテーブルでシンプルなドロップデッドです。私は文字通り何百ものサンプルレイアウトを調べましたが、近いものがいくつかありますが、私が求めているすべてのことを実行できるものはありません。問題は、同じスタイルで流動的な左列とソースの順序を取得することであるようです。私は、適切なソース順序を持つ固定左/流体右（私が望むものの反対）、またはソース順序なしの流体左/固定右のいくつかの例を見つけましたが、両方ではありません。

フロートを使用するか負のマージンを使用するかは関係ありませんが、絶対的なポジショニングは避けたいと思います。

だから私はこのレイアウトを作成しようとしています。

これは、ページを構成する 3 つの「ボックス」の写真です: https://dl.dropbox.com/u/9699560/layout.jpg

そして、ここに私の試みがあります: https://dl.dropbox.com/u/9699560/map.html

赤いボックスは Google マップなので、高さが指定されていない場合は縮小されてゼロになります。私がやろうとしていることは次のとおりです。

緑色のボックスは固定幅、固定高です。青いボックスはページの垂直方向の高さの 20% を占める必要があり、最大高さは 100 ピクセルです。赤いボックスは、残りの垂直方向のスペースをすべて占有する必要があります。

誰かがそれを理解できる場合は、ブラウザウィンドウを垂直に拡大し、青いボックスの上部が緑のボックスの下部のレベルに達すると、左に拡大してページの 100% を占めるように、もう少し進めたいと思います。幅。

浮動小数点数、絶対位置、相対位置を試しましたが、これを純粋な CSS で動作させることはできません。やむを得ない場合は JavaScript を使用しますが、それが唯一の選択肢でない限り、それは避けたいと思います。

ありがとう！

これが試みです（使用する場合はコメントを削除してください）：

そしてHTML

私は現在、さまざまな解像度で動作するように構築しているサイトを取得しようとして、大きな頭痛の種になっています。主なナビゲーションは、ほとんどのビューポートを埋める必要があるイメージ マップによるものです。私はこれが完全に時代遅れであることを知っていますが、イメージ マップは、ポリゴン領域の区切りを許可する唯一の非 Flash ソリューションのようです。

最終的に、サイトのサイズを変更して、条件付きの jQuery と CSS を使用してメイン画像を小さなモニターに表示できるようにしましたが、スリックボックス内のテキストのサイズも変更されてしまい、見栄えが悪くなります。

サイト (ほとんど未完成) はこちらです。ナビゲーションがまだ完全に明確ではないことはわかっていますが (ペンキの色にカーソルを合わせてクリックします)、まずこの問題を整理したいと思います。

要約すると、私の質問：

1. イメージ マップを使用せずに、この多角形のホットスポット ロールオーバー イメージを作成する別の方法はありますか?
2. テキストを同じサイズに保ちながら、イメージマップとオーバーレイされたスリックボックスのサイズを変更する方法はありますか?

どうもありがとうございました - この週末ずっと髪を引っ張っていました!

私はこの Web サイトに取り組んでいます: http://www.justaddsolutions.com/SampleSite/

メイン領域は 1024 ピクセルの幅で、常に中央に配置されます。これは実現されています。ただし、私のクライアントは、ブラウザー ウィンドウが 1024px よりも広い場合、黄色と赤のストリップをブラウザー ウィンドウの尊重されたエッジ (左に黄色、右に赤) まで拡張したいと考えています。

CSSベースのLiquid-Fixed-Liquid Layoutで解決しようと考えました。これは、中央部分が中央にあり、側面部分が液体の幅が等しいというものです。しかし、私は自分でそれを理解することはできず、それを行う方法をどこにも見つけることができませんでした.

mathewjamestaylor Liquid Layouts Web サイトで Liquid-Fixed-Liquid Layout を見つけましたが、ブラウザーのウィンドウのサイズが小さいサイズに縮小されると、IE8 で機能しなくなります。

次に、ヘッダーに 3 列のテーブルを使用してこれを達成し、background-image と repeat-x を使用して td 要素のスタイルを設定することを考えましたが、Chrome と Safari ではうまく機能しないようです。

この問題に関するヘルプをいただければ幸いです。

左側に 1 つの固定列、中央に流動列、右側に別の固定列を持つ 3 列のレイアウトを構築しようとしています。

これを見た人いますか？

ここにも同様の問題がありますが、私が探していた解決策ではありません。 CSS レイアウト 2 列固定流体

リキッド レイアウトとボーダーに問題があり、要素がオーバーフローしています。

• これは、境界線のないページの例を含む jfiddle です (正常に動作します): http://jsfiddle.net/eRaB5/1/
• これが私がやりたいことの例ですが、壊れます。 http://jsfiddle.net/eRaB5/2/

構造は次のようになります。

左端と右端が揃うように、値を合計して 100% にする必要があります。入力の境界線のみが入力幅を効果的にしますwidth: 100% +2px;

CSSだけを使用してこの問題を回避する方法はありますか?

流動的な幅の jQuery 画像カルーセルを知っている人はいますか?

私はこれを見つけました: http://www.nikolakis.net/liquidcarousel/ ...しかし、速度を下げると恐ろしいように見えます。

さらに、マウスがある方向に移動したときにアクティブにしたいのですが、スライダーは反対方向に移動する必要があります。ところで、それは何と呼ばれていますか？

前もって感謝します。

私は現在、テーブルtable_aを作成するためにliquibase.xmlファイルに取り組んでいます。私の分野の1つは<column name="state" type="ENUM('yes','no')"> 、DBMSとしてpostgresqlを使用していることです。列挙型データ型のようなものはありますか？私はこれをhttp://wiki.postgresql.org/wiki/Enumのように読みました

そのpostgresqlにはそのようなデータ型はありません。このデータ型を作成するには、CREATETYPE関数を使用します。でも、liquibaseでそれを作る方法はまだわかりません。

助言がありますか？