Clever Geek Handbook

サイトの背景にあるスケーラブルな画像

チャレンジ：

デザイナーは、背景に画像を含むページレイアウトを描きました。 最初は、これがモニターの解像度に応じて幅が広がる背景であると判断しました。

しかし、そこにはありませんでした。 デザイナーは、これはアプリケーションウィンドウの幅と高さの両方を変更すると縮小/拡大するスケーラブルな画像であると主張しました。

事前に顧客に警告しました-写真が読み込まれ1、最大解像度である-それは1600と識別され、動作し始めました。





理論：

この機能を実装するには、絶対位置mをいじる必要があります。 背景を拡大縮小できないので、比例して拡大縮小する画像を下のレイヤーに配置する必要があり、その上に既にサイトグリッドに依存します。



概略図を図に示します。





練習する



HTML：

< div id ="page" > <br> < div id ="left" > <br> <br> <br> </ div > <br> < div id ="right" > <br> <br> </ div > <br> </ div > <br><br> < div id ="main" > <br> < div class ="foot" > <br> < ul > <br> < li >< a href ="#" title =" " > </ a ></ li > <br> < li >< a href ="#" title ="" > </ a ></ li > <br> </ ul > <br> < div class ="contacts" > <br> < span class ="copy" > Copyright; © 2009 </ span > <br> </ div > <br> </ div > <br> <!-- --> <br> < div class ="img" >< img src ="img/back_001.jpg" width ="100%" alt ="" title ="" /></ div > <br> </ div > <br> <br> * This source code was highlighted with Source Code Highlighter .





CSS：

  1. html {
  2. 高さ ： 100 ％ ;
  3. }
  5. body {
  6. マージン ： 0; パディング ： 0;
  7. 高さ ： 100 ％ ;
  8. }
  10. {
  11. アウトライン ： なし ;
  12. }
  14. / *ラッパー画像* /
  15. #main {
  16. 位置 ： 相対 ;
  17. z-index ： 1 ;
  18. 高さ ： 100 ％ ;
  19. }
  20. / *画像のあるレイヤー自体* /
  21. #main div .img {
  22. 表示 ： ブロック ;
  23. 位置 ： 絶対 ;
  24. 下 ： 0; / *画像は常にページの下部にあります* /
  25. z-index ： 10 ;
  26. 最小幅 ： 1000px ;
  27. 幅 ： 100 ％ ;
  28. _width ： expression （ （ documentElement.clientWidth || document .body .clientWidth ） < 1004 ？ '1004px' ： '100％' ） ;
  29. }


  1. / *著作権と下のメニューのあるレイヤー* /
  2. #main div .foot {
  3. 位置 ： 絶対 ;
  4. 下 ： 80px ;
  5. z-index ： 20 ;
  6. 幅 ： 100 ％ ;
  7. 高さ ： 30px 。
  8. 最小幅 ： 1000px ;
  9. _width ： expression （ （ documentElement.clientWidth || document .body .clientWidth ） < 1004 ？ '1004px' ： '100％' ） ;
  10. }
  12. #main div .foot ul {
  13. リストスタイル ： なし 。
  14. フォント ： 通常の 12px Verdana;
  15. マージン ： 14px 0 0 75px ;
  16. パディング ： 0;
  17. }
  18. #main div .foot ul li {
  19. 表示 ： インライン ;
  20. マージン ： 0 120px 0 0;
  21. }
  23. #main div .foot ul li a 、 ＃main div .foot ul li a ： ビジット { color ： #faffcd ; }
  24. #main div .foot ul li a ： hover { color ： ＃163133 ; }
  26. #main div .contacts {
  27. 位置 ： 絶対 ;
  28. 右 ： 44px 。 top ： 14px ;
  29. 幅 ： 360px ;
  30. フォント ： 通常の 11px Verdana;
  31. 色 ： #faffcf ;
  32. }
  33. / * CAMサイト* /
  35. #page {
  36. 位置 ： 絶対 ;
  37. top ： 0; 左 ： 0;
  38. z-index ： 30 ;
  39. 幅 ： 100 ％ ;
  40. オーバーフロー ： 非表示 ;
  41. マージン ： 0 0 300px 0;
  42. 最小幅 ： 1000px ;
  43. _width ： expression （ （ documentElement.clientWidth || document .body .clientWidth ） < 1004 ？ '1004px' ： '100％' ） ;
  44. }
  46. #left {
  47. 幅 ： 290px ;
  48. フロート ： 左 ;
  49. }
  52. #right {
  53. マージン ： 0 48px 0 370px ;
  54. 位置 ： 相対 ;
  55. 色 ： ＃4c4f51 ;
  56. フォント ： 通常の 12px / 18px Verdana;
  57. }


ie6 "_"にxackを使用するか、条件付きコメントを使用するかは好みの問題です。<br />ホリバーを配置しないでください:)



すべて問題ないようですが、画像ラッパーブロックの高さ（div id = "main"）をデータdiv id = "page" + 400pxのレイヤーの高さに設定する必要があります-それ以外の場合は、サイトコンテンツと画像別の人生を生きる。 この目的のために、オンロード時にハングするJSを使用します

Js

  1. <スクリプト言語= "javascript" >
  2. 機能テスト（ ） {
  3. var h = 400 +ドキュメント。 getElementById （ 'page' ） 。 offsetHeight ;
  4. if （ h > 600 ） {
  5. ドキュメント。 getElementById （ 'main' ） 。 スタイル 。 高さ = h + 'px' ;
  6. }
  7. }
  8. </スクリプト>




例

FFのホスティングバナーのため、IEの白いバー:)



バグ修正

私はこれのために大きなモニターを忘れていました、我々は窓の高さを計算します

function test(){<br> var client = document .compatMode== 'CSS1Compat' && !window.opera? document .documentElement.clientHeight: document .body.clientHeight; ;<br> var h = 270 + document .getElementById( 'page' ).offsetHeight;<br> if (h > client) { <br> document .getElementById( 'main' ).style.height = h + 'px' ;<br> }<br> } <br><br> * This source code was highlighted with Source Code Highlighter .







CSSの変更

<br>#main {<br> position: absolute;<br> top:0; left:0; right:0; bottom:0;<br> z-index: 1;<br> height:100%;<br>} <br><br> * This source code was highlighted with Source Code Highlighter .







誰かが私にふさわしいなら嬉しいです。


More articles:


All Articles