下の記事でもできるのですが…こっちの方がなるほどシンプルでいいと思います（２０１３年追記）
日本語の解説はここにあります。
この日本語の解説を読むと３つのコラム
bloggerの場合は、
#main-wrapper
#sidebar-wrapper
#sidebar-wrapper2(自分で命名)
に padding-bottom:32768px;
margin-bottom:-32768px;
を入れたらいいだけのように見えますが、それだと延々と長くなるみたいで、適度に止めるためには、
#content-wrapper:{
width:100%;
margin: 0 auto;
overflow: hidden;
background-color: #fff;
}
#content-wrapper:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
を入れないといけないみたいです。
:after って何ですか？ こ
読んでもいまひとつわからないですけど。
れで全部のブラウザOKなんですか？
.がポチットある意味もわかりませんができました。
ちなみに真ん中のところはちゃんと
margin-bottom:-32768px;
color:$mainTextColor;
font-size: 85%;
position:relative *float:leftではwidthを設定しないといけないので、autoではfirefoxでコラム落ちします。
padding-top:0;
padding-left:15px;
padding-bottom:32768px;
padding-right:15px;
とか書かないと最後まで表示されなかった。
↑ただpositonをrelativeにすると上のようにデザイン要素がいじりにくくなるので、いじりたいときはここをfloat：leftにするといいです。素人向けではないですが…
ちなみに、今回真ん中のコラムのwidth をauto にしてみました。
なかなかいい感じ。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
マルチブラウザ対応じゃなかった＝。こっちにありました。疲れたからまた今度
padding-bottom:20px;
margin-bottom:-20px;
としてみたら 適当になりました。 これでいいんでしょうか？
#outer-wrapper が外枠だと思っていたのですが、#content-wrapper が外枠だったのでこれでよかったのですが…
またIE6,IE7ではなぜかコラム落ちしてしまうので、
*html #main-wrapper{
float:right;
}
これでいいんでしょうか？ クリボウ様のサイトをみてやってみようと思ったのですが、彼の場合はしっかりmarginを設定している。
なんでかわからんが。なんとかなりました…。
なんか、表示が遅いのでアマゾンのアフェリの欲しいものウジェットをはずしました。ウジェットをつけすぎると表示が遅くなる…当たり前ですね。
0 コメント :
コメントを投稿
コメントありがとうございます。