別冊はてな話 このページをアンテナに追加 RSSフィード

 | 

2004-10-10

[]absolute;を使わずに3段カラム

position:absolute;を使わずに、3段カラムにする方法の模索中です。

<左カラム>

<.main>

<右カラム>

と書いていって、float:left;していけばいいと思ったのですが、.mainからあふれた英文があるとき、IEはそれを回り込んで右カラムを表示しようとするので、右カラムが画面の外にいっちゃったり下にいっちゃったりしてうまくいかないようです。(考え中)←思いつかなかった

(追記)

「左サイドバー&main」が右サイドバーを回り込むというアイディアで成功されました。

http://d.hatena.ne.jp/Yuichirou/20041011にまとめていただけてます。助かります。

さらに汎用性をもたせるためにdiv.sidebarをかませておきつつabsolute→staticという形で、テーマの.sidebarクラスに関する指定(.sidebar pとか)を活かすことはできないかと考え中です(とりあえず後回しですが)。各テーマを試してみればわかりやすいかな。(追々記:汎用化計画いきなり挫折。テーマを活かせるテンプレ作りはかなり難しそう。かなりカスタマイズできる人向けのテクニックと認識しました。)

YuichirouYuichirou2004/10/10 19:38やりました! 何とかIE・Operaで期待通りに表示できるようになりました。何をどうしたかを日記に書いたので、残りの問題の参考にしてください。

sugiosugio2004/10/10 20:49そっかあ、最初のやつはきっとwidth解釈の違いで、ぜんぜんダメだったんですね。WinIEで見れないのでわからなかったんです。

YuichirouYuichirou2004/10/11 18:13テーマの.sidebarクラスに関する指定>…自分Hatenaテーマなので無視していました(hatena.cssには.sidebarの子孫セレクタは無いのです・汗)

sugiosugio2004/10/11 18:23あ、いえいえ、うまいテンプレ作ろうなんて無理ですよねっ。すみません思いついたあとテーマみてみましたら、やっとわかりました。他のテーマ利用時にはまたそれに合わせて対策が必要だと。
.sidebarに関しては、そこに必要だった指定があれば、新クラスに移し替えていけということになりますね。

YuichirouYuichirou2004/10/11 18:29…ソースのdiv.l(r)-sideberの中にdiv.sideberを入れれば、一応移し変えなしで適応できますが…うまくいくか…?

sugiosugio2004/10/11 19:14width指定が二重になってうまくいかないのでは。

sugiosugio2004/10/11 19:21div.sidebar {
position: static;
width: 100%;
margin: 0;
}
のようなものを追加すればある程度対応するかも。でもそもそも3カラムの表示が崩れるテーマが多数あるみたいなんですよね。

sugiosugio2004/10/11 19:32横幅が100%から溢れるらしいケースと、それ以外で理由のわからないものがありました。それぞれには対処法があると思うのですが、これで大丈夫と言うテンプレを作るのは難しいだろうなと、感じています。あとMacIE/OSXが意外とひどい結果があって(Safariがあるからいいのですが)、フォローが難しそう。
でもシンプルな骨組みだけでまとまっているのもけっこうお役立ちだと思います。

YuichirouYuichirou2004/10/11 19:47横幅が100%から溢れる>その場合はwidthをちまちま微調整してください(汗) 自分も法則性に気づくまでそれで頑張っていました…
MacIE>…またWinIEの腹違いの兄弟か…(注1:MacIEはWinIEとは全く別物として独自に作られました)(注2:以前友人から(その人の)ホームページがMacIEで正常表示されないと助けを求められ苦労した経験が…MacIEは未知です…)

YuichirouYuichirou2004/10/11 19:49今気づきましたが、「width: auto;」を使ってみては。

sugiosugio2004/10/11 19:58MacIEといえばOS9のMacIE5.0だと思うんですが、MacIE5.2/OSXがまたまったく別物なんですよねー……。OS9から乗り換えられない人はもう、今頃読めない日記がいっぱいあると思います。
今ちょっとやって見た所ではdiv.sidebarでautoと100%は同じでした。でもautoのほうがいいのかな?

YuichirouYuichirou2004/10/11 20:54「widthの幅=左右のボーダーラインの間」と取る(「box-sizing:border-box」の場合)ので、「width:100%」の場合、左右のマージンがはみ出る可能性があるのです。

sugiosugio2004/10/11 21:04ははーっ、なるほど。そうなるんですか。ありがとうございます。

トラックバック - http://beta.g.hatena.ne.jp/sugio/20041010
 | 
日記内検索
カレンダー
<< 2004/10 >>
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。
画像置き場