メインコンテンツにかっけーランキングパーツを作りたい。
イメージの表示位置をスタイルでフレームの外に出す。
なんちゃらかんちゃら
わっ!フレームの高さがなくなった。それはそうか、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)
スポンサーリンク