2009.04.05

理由を忘れた

ここ数日、一つのページに嵌ってました。
本サイトのLinksページ。
過去のサイトからhtmlとバナー画像を流用し、ローカルでプレビューする限りは問題なし。
アップロードするとバナー画像も見えないわ、リンクも効かないわで、苦労してました。
問題は画像データの方にあったようで、ImageReady で書き出しし直した所、表示されるようになりました。原因は判らずです。
流用したデータはOS9に保存してたgifとかjpegとか。なんかLinksページに疲れすぎて、原因が探れません…。

第二の嵌りもありますて。第三くらいまではまってるんですが。
最初、段組をpositionで組んでたのを項目が増えると不便だなということで、floatで組み直しました。
前にどっかの賢いサイトからお借りしてきたんですよ。(不覚にもlinkを見失ってしまいました。)
ネガティブマージンを使ったカラム落ちしない段組の方法。
愛用してたのですが、ネガティブマージンを使うとどうして落ちないのか、その理由を今ひとつ理解していない。改めて学習しようとサイト巡りをしたところ、秀逸なサイトが豊富で理解はばっちり?出来ました。

今回使ったCSSは固定幅の二段組み

#center_columの左マージン辺をがっちりwidth分取って、右マージン辺に重なってる状態。

#center_columの右に行った左マージン辺は前のfloatさせたボックスの#side_columの右マージン辺に沿おうとするので、widthが同じ二つのボックスはぴったり重なります。

現時点であ、左の#side_columの内容上に#center_columの内容がごしゃごしゃにかさなってます。
んで、#center_columの中の#r_cont にmargin-left:370px;を与えると、ちゃっかり30px分の余白を左にはさんで表示されるのです。

が!ここで、理解の範疇を超えるwというか、混乱しますた。
親ボックスから子であるボックスが飛び出てる状態なわけで。普段使わないから、なんか違和感が…
…まあ、text-indentでh1とかを背景画像を表示して文字すっ飛ばしたりするし、そのテクニックと同じでしょうか。
ただ、IE6で表示されないらしい…まあ、時間のあるときにでも新たな道を探りたいと思います。
リキッドではなく両方固定幅なんで、別にネガティブマージンを使わなくても、二つの子ボックスを囲う親ボックスを作ってwidthを指定してやればいいのですが、外に一つ背景画像の為の親ボックスがあるし、大体、#center_columの内容をまとめてmargin与える為に#r_contとか余計なdivがあるし、また囲うのもなぁと言うことで、この方法は便利なのですが…。
一つ問題があります。
ずばり、リンクが目的なのに#side_columのリンクがクリックできないw
center_columのボックスが被ってるせいです。うぉ嵌った。
簡単な記述でクリアできました。小粋空間さん、ありがとうございます。
リンクさせる要素にこの指定でばっちり解決。

ネガティブマージンについて、お勉強させて頂いたのは、ここのサイト。
てんぽさん
Tech de Goさん

コメントをどうぞ



PageTop