[CSS]セミリキッドレイアウトの両端に背景画像を配置するスタイルシート
Post on:2009年4月1日
sponsors
セミリキッドレイアウトの両端にドロップシャドウの背景画像を配置するスタイルシートをSoh Tanakaから紹介します。
Tips for Developing Semi-Liquid Layouts
demo
デモでは、入れ子にしたdiv要素にそれぞれ背景画像を設置。
親は中央配置にし、min-width, max-widthを設定。
子はoverflow:hidden;を指定し、paddingなどを設定します。
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <div id="content_wrap"> <div class="content"> <!--Content--> </div> </div> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<textarea name="code" class="css" cols="60" rows="5"> #content_wrap { background: #fff url(body_shadow_L.gif) repeat-y left top; /*--Left drop shadow--*/ margin: 0 auto; padding: 0; min-width: 780px; /*--Minimum Width--*/ max-width: 1200px; /*--Maximum Width--*/ } .content { background: url(body_shadow_R.gif) repeat-y right top; /*--Right drop shadow--*/ margin: 0; padding: 25px 40px; /*--Padding inside of the main content--*/ overflow: hidden; font-size: 1.2em; } </textarea> |
IE6対策としては、スクリプト（JSizes）の使用やIE6のみ固定幅に指定する対応が紹介されています。
応用として、固定サイズのバナーの配置、%指定のカラム、固定＋可変のカラムのデモもあります。
sponsors
