2008年11月20日木曜日

blogger 3 コラム レイアウト 2 コラムをそろえてみる

前にレイアウトを3コラムにすることを考えましたが、さらに今はやっているコラムの長さをそろえるというのをこちらを見てやってみました。

下の記事でもできるのですが…こっちの方がなるほどシンプルでいいと思います(2013年追記)

日本語の解説はここにあります

この日本語の解説を読むと3つのコラム
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を設定している。

なんでかわからんが。なんとかなりました…。

なんか、表示が遅いのでアマゾンのアフェリの欲しいものウジェットをはずしました。ウジェットをつけすぎると表示が遅くなる…当たり前ですね。






お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索