2009.04.05

理由を忘れた2改

さてネガティブマージンを使った2カラムについての続きでございます。
現行

先行float:left(#side_colum)の左ボックスにfloat:leftした340pxの右ボックス(#center_colum)を重ねた。
右ボックス(#center_colum)のmargin-leftに-340px(ネガティブ)のマージンを与え、内容の子boxのマージンで左スペースを確保。

問題点

  • IE6で「widthを明示した親ボックス」からはみ出した「ネガティブマージンを持つ子ボックス」のネガティブマージン分がレンダリングされない。
  • IE6にfloatさせた方向と同じ方向のmarginを2倍とるバグがあり、もしかしたら-680pxもマージンをとっていたりして、中のdivの内容のマージンにより、結局左ボックスの上に重なって、内容表示されているのではないかという危惧。

IE6環境が無いので、確認とれませんが。
家人のIE7環境もHDDすっとびにより、確認してません…(;e;)
 1年保証がちょうど切れたタイミングっす。ソニータイマーが入っていたようです。

さて、対策。
1.に関しては親ボックスにはwidth与えないことで対応。
そもそもfloatされたボックスはmarginが理由ではみ出さないし、内容の子boxは正マージンなんでとりあえずは問題なしみたいです。
まあ、すごくはみ出すので気になってしまったと言う気持ち的な問題は、このへんで解決。「その位置は決して包含ブロックの内部だけに制限されるものではなく、外にはみ出しても構わない。」参考

次は、問題点2.のfloatと同じ方向のmarginを考察。
IE6の「floatした方向と同じ方向のマージンが二倍」のバグを危惧しましたが、後続のボックスがfloatである場合、そのボックスのマージンは正常にとられるようです。
でも一つ目にfloatしたボックスのマージンはやはり二倍
だがしかし、一つ目のfloatにマイナスマージンを設定しなければ無問題。

使える方法であることはわかりましたが、後で忘れると思うので汎用性を持たせたいと思います。
今まで、後続の右ボックスfloat:leftに対して、margin-left:のmarginを取っていたので、
反対方向のmarginをとることに。
しかし、右ボックスの右マージン辺を移動したところで、先行floatボックスの右マージン辺に対して、後続floatボックスの左マージン辺が追随するので、意味がありません。
でも、float:leftなんで、右マージン辺を移動したい。
と言うわけで、
左ボックスの右marginにネガティブになってもらおうと思います。

左ボックスの右マージンが左端にあれば、右ボックスの左マージン辺が追っかけてきてボックスが重なります。


内の人の位置をmargin:leftで調整。ここは前のcssと同じです。
以前は、リンクさせる要素(h4)に対して下記の指定をしてますたが、

cssが煩雑になるのと、IEのマイナスマージンの不審行動対策で左ボックス(#side_colum)のcss自体に記述。
IE6でどうなるか判りませんが…とりあえず。
変更はハイライトの部分だけです。便利ねー。

2009.04.05

連絡事項

以前お世話になっていた趣味のサボテン多肉系サイトさまをリンクをupしました。
長い月日が流れ去り、見失ってしまったサイトさまのリンクを寂しくはずしました。
アドレス変わってますなどありましたらご連絡ください。
そして、当方にはまだサボテン多肉系のコンテンツがございません。
リンクするに内容がそぐわないと思われますので、相互リンクとなっておりましても、ご遠慮なくリンクをお外し下さいますよう。
そのうち復活しますんで、待って頂けるのであれば、尚有り難いです。
そんで、あのーまことに言いにくいことなのですが、IE6、それ以前のブラウザをお使いの皆様、
右側の列が表示されていない可能性がございます。
リンクの並びは二列ありますて、ぐるっとした蛇の絵の下にもリンクがございます。
じゃあ、おまいのサイトは何でなら見られるんだと言う話になるんですが
Firefoxなら見られるものになっております。ダウンロードはこちら
IE6でも、デザイン崩れしてたとしてもなるべく内容はお伝えしたいと思いますので、少々お待ち下さい。ただ今方法を模索しとります。

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さん

2009.03.28

Filterばっかり

ABC NewsとUGOのサイトにリチャードのインタビューがアップされてました。
が、いかんせん英語力がないだすので見た目についてだけ。うう。ジーノに付いて言ってたのかな。
それともI’m Not The Only Oneの中の人の事かな。
リチャード、顔が昔に戻ってきたような。 なんかみなぎった絶好調な顔しとりますた。
Anthems For The Damnedの時は痩せすぎだったのか、年取ったらこういう顔になるんだろうなという予想を覆す感じの線の細い顔つきになっててびびったもんです。まあ、細いんですが。
液体金属T-1000でお馴染みの兄ロバート・パトリックとは全然似てないけど、インタビューのお顔がやっぱ兄弟だなぁと。
笑っていても、無表情w、T-1000ぽいww
瞳の部分が大きいのか、なんかガラス玉っぽいんだよなぁ。兄貴の方は碧眼ですか。
それにしても、T-1000はかっこよかったですよね。ロバートの端正な顔がマシーン然としていて本当にはまり役でした。
Trip Like I Do のビデオクリップのリチャードのマネキンぶりも凄いです。なんて人間っぽくない兄弟だ。

で、兄貴の代表作といえばもう一作、X-fileがございますが、ベストに収録の「One」もX Files The Movieのサントラに使われており(この頃はまだディビット・ドゥカプニーのモルダー捜査官)とてもシャウトの気持ち良い名曲だす。
X-fileのサントラ以外にも「One」というタイトルのミニアルバムに収録されてまふ。でも既に入手がめんどくさくなってるんですよね、中古とかしか…。ジャケットにヒビのあるの買いましたが。
今回のベストには、映画提供曲の「One」「Trip Like I Do」「Jurrassitol」と各サントラに散逸していた曲が全て入っているので嬉しいだす。

そんでもう一つ、日本のiTunesストアはいい加減にするように。
やっぱ、日本では知名度が…今ひとつか(泣)中華トラッシュメタルがあるというのに(号泣)、一体どんな大人の事情が。

2009.03.26

Painterブラシ探し

昨日、Painterでも実際の画材のように、ペインティングオイル(だった)だけで既に塗った所を伸ばしたり、混合したいと悩みを打ち明けましたが
見事にありましたよ。
アーティストオイル:ウェットオイリーナイフ
が、まさにそれでした(;´ДA
色が乗るのかと思ってたっすw

ブラシの数、膨大ですなぁ。マニュアルにもブラシの詳細はないし、描いてみないとわからない。
穂先のあるブラシで同じことしたいなぁ。
ブラシクリエーターも今ひとつ理解が及ばないっすわ。

今日の書きかけ

ほうふぁ〜

PageTop