ワイド長すぎるのですが、このような勉強をしている方は、きっとワイド画面を使っているから勘弁してもらい３コラムにしてみました。
今回参考になったのは、とても明快なcss解説のところです。 要するにfloat right を使えと。
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
略
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
</div>
<div id='sidebar-wrapper2'>←作りました！
<b:section class='sidebar' id='sidebar2' preferred='yes'>
略
<b:widget id='HTML2' locked='false' title='アフェリエイト' type='HTML'/>
</b:section>
</div>
とわけて、
sidebar-wrapper
sidebar-wrapper2
main-wrapper
の順番にdiv に書く。
sidebar-wrapper は float が left
sidebar-wrapper2 は float が right
main-wrapper は margin を margin:0 248px 0 259px; と正確に設定する。
最初にこのサイトを見てしまい、
sidebarに
position:absolute; を共存させると表示されず、若干悩んだ。
main-wrapper にはposition:relative; があった方がfirefox で表示が早い気がする。
気のせいか？
後、全部 id で指定されているので、まったく同じに リンク指定をsidebar-wrapper2にも設定した。 わりと簡単で感激した。
めんどくさがって、画面でいじりすぎるとへんなものが入るみたいで壊れるので、必ずエディターで作らないといけないのも発見でした。
rightで指定した方が表示が早い気がする。
margin auto にしたらどんなになるかなと思ったけど、なんか表示が遅い気がする。
今回初めて真剣にブロガーのcssを見たけど、
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
とかいうのがあり、いったいこれは何でしょうと思ってしまいました。
まだまだcss 奥が深いです。
後日談
私の大人気？ブログもリンクしたいところ増えてきたので３コラムにしてみました。
別のテンプレートをベースにしたからか、
単純に #sidebar-wrapper1 を追加しただけでほとんどよく、
main-wrapper のfloat left 取るだけでよく、
margin をヘタに設定すると うまくいきませんでした。
もう。何が何やらわかりませんが、なんとなくできると。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
後日談
なんと
vista のfire fox だと右コラムがおもいっきりなかったです。
ちなみにvista のIE7では見えていました。
むちゃヘコミましたわ。
＊＊＊＊＊＊＊＊＊＊
後日談２
やっぱり マージンはいらん。
main-wrapper の 左右のマージンを コラムの幅で指定するのはまずいみたいでした。
Vista の firefox で見れないのよね。
で、左コラムの右マージンを設定して調整したが、なぜか微妙に見え方が違う。
もう疲れたから妥協。
たぶん、このブログ初期のころのブログなので、書き方が微妙に違うのじゃないかなとか。
でもまぁ。こうなってくるとですなぁ。 CSS４とやら早く来て欲しいような気がします。
vista でさらに検証するなんてめんどうすぎるし、vista の次のOSも出るとか？
戦国時代を終りにして欲しい。
0 コメント :
コメントを投稿
コメントありがとうございます。