2005年03月08日

3カラム化 補足事項1


livedoor Blog でも3カラム化を採用するサイトが増えた。
しかし、3欄相互の表示が不安定なサイトを見かけます。
次の記事が改善の参考になると思います。

3カラム化は形式で2種類に分かれる。すなわち、
  • case-1) 両サイドが固定幅で、真ん中の記事本文欄が可変幅:両サイドバーの表示が優先され、画面の有効幅に応じて真中欄の幅が伸び縮みする。
  • case-2) 3欄共に固定幅: 画面左に「お気に入り」など表示して画面の有効幅が狭くなると右サイドバーの右端から表示が欠けて行く。
zzgamens

上図のBLOGの場合、CSSのキーポイントは次のとおりです。

case-1) 両サイドが固定幅で、真中が伸縮(可変)幅

 #links {
        position: absolute;
        top: ZZpx;
        left: 0px;
        width: XXpx;

        ........
     }
 .blog {
        margin:ZZpx YYpx 0px XXpx;
        width: auto;

        ........
     }
 #links2 {
        position: absolute;
        top: ZZpx;
        right: 0px;
        width: YYpx;

        ........
     }

case-2) 3欄共に固定幅

 #links {
        position: absolute;
        top: ZZpx;
        left: 0px;
        width: XXpx;

        ........
     }
 .blog {
        position: absolute;
        top: ZZpx;
        left: XXpx;
        width: WWpx;

        ........
     }
 #links2 {
        position: absolute;
        top: ZZpx;
        left: (XX+WW)px;
        width: YYpx;

        ........
     }

case-1 にするか、case-2 にするかは各人の好みです。
上の数値設定を基準にして、多少加減すれば良いと思います。

baysky at 23:07│Comments(0)TrackBack(0)weblog 

トラックバックURL

コメントする

名前
URL
 
  絵文字