挑戦する
そのため、このようなデザインではWebサイトを開発する必要があり、メインページは暗い部分と明るい部分の2つのバンドに分かれています。 細い線といくつかの重要な要素は、黄金比に厳密に基づいています。 そして、それは私を覆いました...
複雑なhtml + cssコードで簡単なことを繰り返しますか？ 繰り返しますが、各ブラウザは独自の方法でページを表示しますか？ 再びクロスブラウザをいじくり回しますか？ ハッキングを書く？
そして、なぜデスクトッププログラミングにそのような問題がないのですか？ 式に従って要素のサイズを変更してください-お願いします。 ボタンを左に17ピクセル移動します-お願いします。 ウィンドウのサイズに厳密に依存して、基本的に異なる要素の配置を配置します-問題ありません！ そして、html + cssでのみこのような問題が発生します。 「ブロックをもう少し左上に移動する」タスクを遅らせたときに顧客を失いそうになりました...古い構造はそのようなブロックの移動用に設計されていないため、レイアウト全体を徹底的にやり直す必要がありました。 最終的にはブロックを押しただけなので、この作業は高く評価されませんでした。
これで十分です。今後は、レイアウトで可能な限りJavaScriptを使用することにしました。 はい、すべての人がjsを有効にしているわけではありません。 はい、私はそれを今やる人がほとんどいないことを知っています。 統計によると、JavaScriptをオフにしているユーザーは1％未満です。 それはたくさんですか、それとも少しですか？
jPutty
このアイデアは、新しいjQueryプラグインに実装されました。 JavaScriptをオフにしている人のために、接続された通常のcssスタイルで最も単純な組版を実装しています（そのようなユーザーは最大限のシンプルさを求めていますか？）。 JavaScriptを有効にしている場合、特別なイベントを実装するスクリプトが起動されます。
$(window).readyresize(function(width, height) { // using jPutty });
「readyresize」イベントは、ページの読み込みが完了すると、ブラウザウィンドウのサイズが変更されるたびに発生します。
プラグインWebサイトの詳細-jputty.ru/getting-started
ソリューションはどのように見えますか
時間-ページの上半分（暗い）のHTMLコードの断片。
各要素は個別のdivブロックです。 ラッパー、分割ブロック、またはその他のトリックは必要ありません。
<!-- () --> <div id="dark"> <!-- Sliderman Endegor's Degustation --> <div id="DegustationNavigation"></div> <div id="Degustation"> <img src="./img/Degustation/cognac.png" width="383" height="600" alt="Degustation cognac" /> <img src="./img/Degustation/riesling.png" width="383" height="600" alt="Degustation riesling" /> <img src="./img/Degustation/bourgogne.png" width="383" height="600" alt="Degustation bourgogne" /> <img src="./img/Degustation/bordeaux.png" width="383" height="600" alt="Degustation bordeaux" /> <img src="./img/Degustation/champagne.png" width="383" height="600" alt="Degustation champagne" /> <img src="./img/Degustation/martini.png" width="383" height="600" alt="Degustation martini" /> </div> <!-- /Sliderman Endegor's Degustation --> <div class="delivery_text"> </div> <a href="#"> <div class="shop_wine"></div> <div class="shop_wine_text"></div> </a> <a href="#"> <div class="shop_cognac"></div> <div class="shop_cognac_text"></div> </a> <a href="#"> <div class="shop_armagnac"></div> <div class="shop_armagnac_text"></div> </a> <div class="JJB"></div> <div class="line"></div> </div> <!-- / () -->
2-対応するCSSコード。
テキストのブロックにはフォントを設定し、画像のブロックには背景を設定します。
#dark { background-color: #000; color: #f0f0f0; z-index: -10; } #dark .delivery_text { text-align: right; font-size: 12pt; } #dark .shop_wine { background-image: url(../img/shop/wine.png); } #dark .shop_wine_text { text-align: center; } #dark .shop_cognac { background-image: url(../img/shop/cognac.png); } #dark .shop_cognac_text { text-align: center; } #dark .shop_armagnac { background-image: url(../img/shop/armagnac.png); } #dark .shop_armagnac_text { text-align: center; } #dark .JJB { background-image: url("../img/Jean Jacques Brissot.png"); } #dark .line { background-color: #fff; z-index: -10; }
そして3つ！ jsコードのスニペット。
ブラウザのサイズ（幅と高さ）に応じて、各ブロックの場所を指定します。
$(window).readyresize(function(width, height) { ... var dy = (height - 600) / 1.618 + 35; $('#dark').putty('xysize', 0, 0, width, height); $('#dark #Degustation').putty('xysize', 0, dy - 35 - 1, 383, 600); $('#dark #DegustationNavigation').putty('xysize', 0, dy - 35, 20, 600); $("#dark #DegustationNavigation a").each(function (i) { $(this).putty('xysize', 25, 10 + 25 * i, 11, 11); }); $('#dark .delivery_text').putty('xysize', 0, 5, width - 50, 30); $('#dark .shop_wine').putty('xysize', (width - width / 1.618) - 48 / 2, dy, 48, 174); $('#dark .shop_wine_text').putty('xysize', (width - width / 1.618) - 100, dy + 174, 200, 36); $('#dark .shop_cognac').putty('xysize', (width / 1.618) - 68 / 2, dy + 174 - 139, 68, 139); $('#dark .shop_cognac_text').putty('xysize', (width / 1.618) - 100, dy + 174, 200, 36); $('#dark .shop_armagnac').putty('xysize', (3*width / 1.618 - width) - 36 / 2, dy + 174 - 172, 36, 172); $('#dark .shop_armagnac_text').putty('xysize', (3*width / 1.618 - width) - 100, dy + 174, 200, 36); $('#dark .JJB').putty('xysize', 383, height / 1.618 - 76, 768, 76); $('#dark .line').putty('xysize', 0, height / 1.618, width, 1); ... });
putty（）関数は、x、y、幅、および高さのパラメーターを取り、cssプロパティを介してブロックに設定します。 したがって、ブロックの位置は、JavaScript言語のすべての機能を使用して動的に設定できます。
リンクとソース
JPuttyプラグインサイト-jputty.ru
デモ： brissot.biz
デモサイトのソース： data.brissot.biz/jjb.rar