別冊はてな話 このページをアンテナに追加 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-01ピエール瀧・光臨

脳内ヘビーローテ

プリキュッアッ プリキュッアッ プリキュッアッ プリキュッアッ

プリティでっ キュアキュアッ

ア〜ッ アッア〜〜!!

(ジャカジャカジャカジャカジャカジャカジャカジャカ)

ナローッ ナローッ アスナローッ

ナローッ ナローッ アスナローッ

ナローッ ナローッ アスナローッ

明日は檜の木にナローッ!!

sasadasasada2004/10/01 22:28壊れる。壊れてくぅー。あぁぁ・・・。

sugiosugio2004/10/01 22:39ガリガリミサイル・発射っ。

sasadasasada2004/10/01 22:54あ、そんなに激走したら、ミサイルに追いついて自爆を (どっかーん!!

sugiosugio2004/10/01 23:03ヒーホーヒーホー(20分休みのようなバカ騒ぎでお送りしています)

sasadasasada2004/10/01 23:27おおぅ、ヒーホーヒーホー、ヒィホォヒィホォ(ドップラー効果)
ウォーーン、ヒー―ホー―!! (病院に着いた)
そういえば、ER-8は10月2日(土)深夜【=日曜午前】0:45から放送スタートです!!(NHK総合だ!!)

sugiosugio2004/10/01 23:38番宣禁止!!

sasadasasada2004/10/02 00:05がはぁ!! NHKでも規約違反っすかっっっ!! (驚愕)
うぅ、ずびばぜん。心を入れ替えるための旅に出ます。
あー、だから今夜だけはー(略 < JASRACも禁止!!

sugiosugio2004/10/02 00:09うそうそ。ささぴょぽんにはお世話になってますから。

sasadasasada2004/10/02 00:32あ、ありがとうございます。人の情けが身に染みます。
暖かいお心遣いを糧にして、イチローのように強く生きていこうと誓った、夏の終わりのハーモニー。
メジャー記録まで、あと一本!! (もう眠くてナニ書いてるか分かりません)

sugiosugio2004/10/02 00:58なんでもいいのよ、なんでも(デカダン)。最近“萌え絵シャンドン”というダジャレを思いついたのですが、使いどころがないまま忘れてしまいそう。

sugiosugio2004/10/02 01:06反省。ここからはもっと「もてなしの心」でコメントします。えっと、sasadaさん……どうぞおからだお大事に。かえって辛辣なレスになってしまうな。

nobodynobody2004/10/02 01:50出世魚 「ささぴょんぼん」に なりにけり 神無朔日 めでたや めでた! (5-7-5−7-7)
ref. →http://d.hatena.ne.jp/sasada/20041001#c

sugiosugio2004/10/02 02:31出世魚 ボラのつまりは トドなれど ささぴょんぽんに とどまりはなし!(やんややんや)

sasadasasada2004/10/02 08:29出世? うぉっ!? ささぴょんぽんに 縁はなし つまりにつまった ToDoリスト

昨夜は、誘惑に耐え切れず眠ってしまいました。ごめんなさい。てへ(かわいく

sugiosugio2004/10/02 19:35いいのよ、元気なときにまた来てね(スナックバーおすぎ)

nobodynobody2004/10/02 20:03来たよー。(´ー`)y-~~

sugiosugio2004/10/02 20:08悪いnobodyさんが来たっぽい。

nobodynobody2004/10/02 20:35いつもすみません。連れて帰ります。ほらっ。すぎおさんは、いま禁煙中なんだから。ばぅ。

sugiosugio2004/10/02 20:45ああ、紫煙の香りが遠のく……ニコチン風呂に浸かりたい。ニコチンごはんが食べたい。

トラックバック - http://beta.g.hatena.ne.jp/sugio/20041001
 | 
日記内検索
カレンダー
<< 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
画像置き場