2008年8月31日日曜日

blogger 3 コラム レイアウト

これは私のメモ帳みたいなブログなので、サイドバーが延々と長くなりそうです。

ワイド長すぎるのですが、このような勉強をしている方は、きっとワイド画面を使っているから勘弁してもらい3コラムにしてみました。

今回参考になったのは、とても明快な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 奥が深いです。


後日談

私の大人気?ブログもリンクしたいところ増えてきたので3コラムにしてみました。
別のテンプレートをベースにしたからか、
単純に #sidebar-wrapper1 を追加しただけでほとんどよく、
main-wrapper のfloat left 取るだけでよく、
margin をヘタに設定すると うまくいきませんでした。

もう。何が何やらわかりませんが、なんとなくできると。

********************
後日談

なんと
vista のfire fox だと右コラムがおもいっきりなかったです。
ちなみにvista のIE7では見えていました。

むちゃヘコミましたわ。
**********
後日談2
やっぱり マージンはいらん。
main-wrapper の 左右のマージンを コラムの幅で指定するのはまずいみたいでした。
Vista の firefox で見れないのよね。
で、左コラムの右マージンを設定して調整したが、なぜか微妙に見え方が違う。

もう疲れたから妥協。
たぶん、このブログ初期のころのブログなので、書き方が微妙に違うのじゃないかなとか。


でもまぁ。こうなってくるとですなぁ。 CSS4とやら早く来て欲しいような気がします。

vista でさらに検証するなんてめんどうすぎるし、vista の次のOSも出るとか?

戦国時代を終りにして欲しい。

お問合せフォーム

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


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索

View My Stats