メインコンテンツにかっけーランキングパーツを作りたい。
とりあえず、
背景画像ってわけだから、フレームの下ってことになる。なので、これはだめ。やっぱ img で画像を移動させる必要がある。
わっ!フレームの高さがなくなった。それはそうか、div で、実態を隠している。さて、どうしよう。
最初ので高さが発生していたのは、img の下に文字がきていたからだな。
じつは、この中に説明文を書きたいとおもっているので・・・ でも、それは、色抜きフレームの中。
とりあえず、色抜きフレームをこの中に書いてみよう。
ふむ、いい感じ・・・だけど、クラウン+商品名と説明文の間が空きすぎだな。
なんでだろう? こういうときは、ファイヤーフォックスでCSSの影響範囲を確認すればいいのだな。
なるほど、クラウンのボックスの高さがでかくなってる。divブロックを移動させたとおもってたけど違うのか。
頭が伸びるってかんがえるのが正解か。クラウンのボックスに高さを指定してためしてみよう。
変化なし・・・ top:-30 で頭が伸びた? あら? bottom の位置はかわってないってことか? bottomも-30にしてみよう
ふむ、だめだな。イメージで移動させてるからかな? position:relative;top:-30px;bottom:-30px; を div に対してかけてみよう。
 
DIVのブロックサイズは、小さくなった。。。回り込みクリアの <br clear=”all”><div style=”clear:both;”></div> が、なぜその位置から始まるのかって問題なのか。一応、div のheight:67px;は、外したけど変わらず。なんでだ?
ん?試しに商品名の </div> の後ろに文字をいれてみたら・・・ くっつく。つまり float:left が効いているってことだな。 もしかして、 <br clear=”all”><div style=”clear:both;”></div> が大きく改行してるってことか?
あらあら、いい感じじゃん。説明文の<div> をmarginでやや下に移動させる。ついでに最後のところに回り込みクリアを入れてみる。
ん?・・・そか、回り込みが効いているからマージンが効かないのか。。。さて、どうしたものか。
そしたら、商品名のブロックに高さを与えてみるか。
相対位置指定の画像と商品名を一塊のブロックにして・・・ そすると実態がなくなるので、説明文は、ぎゅいんと上に上がる。
それを margin を使ってぐぐぐと下へ移動させる。。。
最後に、クリアブロックをいれているので、下の行間がやや広い感じはするけど、そこはあきらめてこれを原型としよう。
そのソースがこれだ。
なして、変換が逆向きなんだろう? これ時々起るんだよね。わけわかんね。
自作するのが一番かな?・・・ とりあえず、こっちで。
<div style="margin:30px 0 0 0;background-color:#ffffcc;padding:2px 10px 0px 10px;border:solid 2px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;"> <div>
<div style="float:left;position:relative;top:-30px;bottom:-30px;"><img src="<?php echo home_url(); ?>/img/clown_01.png"></div>
<div style="float:left;font-size:24px;text-decoration:bold;position:relative;top:10px;">なんちゃらかんちゃら商品名</div>
</div>
<div style="margin:40px 10px 0px 10px;padding:20px;background-color:#ffffff;border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">説明文がはいるよていでごわす</div>
<br clear="all"><div style="clear:both;"></div>
</div>
あれ? syntaxhilighter 動いてるじゃん・・・ わけわからんプラグインだ。
⇒次へ(2/3)
イメージの表示位置をスタイルでフレームの外に出す。
なんちゃらかんちゃら
バックグラウンドでやってみる。
なんちゃらかんちゃら
画像と文字を横に並べる
なんちゃらかんちゃら
わっ!フレームの高さがなくなった。それはそうか、div で、実態を隠している。さて、どうしよう。
最初ので高さが発生していたのは、img の下に文字がきていたからだな。
じつは、この中に説明文を書きたいとおもっているので・・・ でも、それは、色抜きフレームの中。
とりあえず、色抜きフレームをこの中に書いてみよう。
色抜きフレームを中に入れる
なんちゃらかんちゃら商品名
説明文がはいるよていでごわす
なんでだろう? こういうときは、ファイヤーフォックスでCSSの影響範囲を確認すればいいのだな。
なるほど、クラウンのボックスの高さがでかくなってる。divブロックを移動させたとおもってたけど違うのか。
頭が伸びるってかんがえるのが正解か。クラウンのボックスに高さを指定してためしてみよう。
クラウンのDIVに高さを与えてみる(クラウン画像のサイズ80×67)
なんちゃらかんちゃら商品名
説明文がはいるよていでごわす
クラウンのDIVで底の位置も移動させる
なんちゃらかんちゃら商品名
説明文がはいるよていでごわす
 
クラウンの位置移動を div 側にかけてみる
なんちゃらかんちゃら商品名
説明文がはいるよていでごわす
ん?試しに商品名の </div> の後ろに文字をいれてみたら・・・ くっつく。つまり float:left が効いているってことだな。 もしかして、 <br clear=”all”><div style=”clear:both;”></div> が大きく改行してるってことか?
商品名の</div>の後ろに文字を書いてみた。
なんちゃらかんちゃら商品名
もじもじ
説明文がはいるよていでごわす
<br clear=”all”><div style=”clear:both;”></div>をとっぱらった
なんちゃらかんちゃら商品名
もじもじ
説明文がはいるよていでごわす
位置調性と回り込みクリアをいれる
なんちゃらかんちゃら商品名
説明文がはいるよていでごわす
そしたら、商品名のブロックに高さを与えてみるか。
位置調性と回り込みクリアをいれる
なんちゃらかんちゃら商品名
説明文がはいるよていでごわす
それを margin を使ってぐぐぐと下へ移動させる。。。
最後に、クリアブロックをいれているので、下の行間がやや広い感じはするけど、そこはあきらめてこれを原型としよう。
そのソースがこれだ。
<div style="margin:30px 0 0 0;background-color:#ffffcc;padding:2px 10px 0px 10px;border:solid 2px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;"> <div> <div style="float:left;position:relative;top:-30px;bottom:-30px;"><img src="<?php echo home_url(); ?>/img/clown_01.png"></div> <div style="float:left;font-size:24px;text-decoration:bold;position:relative;top:10px;">なんちゃらかんちゃら商品名</div> </div> <div style="margin:40px 10px 0px 10px;padding:20px;background-color:#ffffff;border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">説明文がはいるよていでごわす</div> <br clear="all"><div style="clear:both;"></div> </div>・・・ あの~・・・ systaxhilighter 役に立たないんですけど~・・・(--;
なして、変換が逆向きなんだろう? これ時々起るんだよね。わけわかんね。
自作するのが一番かな?・・・ とりあえず、こっちで。
<div style="margin:30px 0 0 0;background-color:#ffffcc;padding:2px 10px 0px 10px;border:solid 2px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;"> <div>
<div style="float:left;position:relative;top:-30px;bottom:-30px;"><img src="<?php echo home_url(); ?>/img/clown_01.png"></div>
<div style="float:left;font-size:24px;text-decoration:bold;position:relative;top:10px;">なんちゃらかんちゃら商品名</div>
</div>
<div style="margin:40px 10px 0px 10px;padding:20px;background-color:#ffffff;border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">説明文がはいるよていでごわす</div>
<br clear="all"><div style="clear:both;"></div>
</div>
⇒次へ(2/3)
スポンサーリンク