11月
3
2007

サイドメニューの背景を最後まで表示する方法。

Movable Typeこれまで、僕がこのBLOGを確認するときは、大抵IE(6)かSleipnir
どちらかで閲覧していたのですが、ニューマシンの環境整備に伴い
色々なブラウザをインスコして閲覧してみたら、FirefoxNetscape 7.1
Operaでは、エントリが長い場合などにサイドメニュ-の背景が途中で
途切れてしまう事に気付きまして; 早速対応してみました。
 
【参考にさせて頂いたサイト】
》小粋空間 – サイドバーの背景を最後まで表示する
》CSS Happy Life – サイドの背景画像を本文にあわせてページの最後まで表示する
 

 
まず、BLOG全体の横幅分の背景画像を作ります。
本BLOGの全体幅は860pxなので、860×10のマッ白な
画像を「main_bg.jpg」という名前で作成し、アップロード。
(今回は「imagesディレクトリ」へアップロードしました。)

次に、スタイルシートの「#box」の箇所を下記の通り修正します。
(赤文字部分を削除、青文字部分を追加)

.layout-three-column #box {
width: 860px;
margin-right: auto;
margin-left: auto;
padding: 0 0 15px 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
text-align: left;
background-color: #ffffff;
overflow:auto;
background: url(images/main_bg.jpg) repeat-y;

}

 
 

 


コメントする

*

2017年7月
« 7月    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Archives

Recommended