2009.04.05
理由を忘れた
ここ数日、一つのページに嵌ってました。
本サイトのLinksページ。
過去のサイトからhtmlとバナー画像を流用し、ローカルでプレビューする限りは問題なし。
アップロードするとバナー画像も見えないわ、リンクも効かないわで、苦労してました。
問題は画像データの方にあったようで、ImageReady で書き出しし直した所、表示されるようになりました。原因は判らずです。
流用したデータはOS9に保存してたgifとかjpegとか。なんかLinksページに疲れすぎて、原因が探れません…。
第二の嵌りもありますて。第三くらいまではまってるんですが。
最初、段組をpositionで組んでたのを項目が増えると不便だなということで、floatで組み直しました。
前にどっかの賢いサイトからお借りしてきたんですよ。(不覚にもlinkを見失ってしまいました。)
ネガティブマージンを使ったカラム落ちしない段組の方法。
愛用してたのですが、ネガティブマージンを使うとどうして落ちないのか、その理由を今ひとつ理解していない。改めて学習しようとサイト巡りをしたところ、秀逸なサイトが豊富で理解はばっちり?出来ました。
今回使ったCSSは固定幅の二段組み
1 2 3 4 |
<div id="#side_colum">左の行そのまま内容</div> <div id="center_colum"> <div id="r_cont">右の内容</div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#side_colum { width:340px; float: left; } #center_colum { width: 340px; float: left; margin-left: -340px; } #r_cont { margin-left:370px; margin-top: 530px; } |
#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のボックスが被ってるせいです。うぉ嵌った。
簡単な記述でクリアできました。小粋空間さん、ありがとうございます。
リンクさせる要素にこの指定でばっちり解決。
1 2 |
position: relative; z-index: 2; |
ネガティブマージンについて、お勉強させて頂いたのは、ここのサイト。
てんぽさん
Tech de Goさん
スポンサーリンク
コメントをどうぞ