その３の原型

ここまでできたけど、クラウン+商品名ブロックと商品画像+商品説明のブロックの間を制御できない。さて・・
 
いちろう先生に言われたようにブロックの区切りをいれる。

ブロックに区切り枠をつける

 
結局力づくでもちあげるしかないのか？
 
あれ？ソース見てて気が付いた・・・
商品画像+商品説明ブロックの上マージン４０になってるやないか？

<!-- 外側 -->
<div style="
     margin:30px 0 0 0;
     background-color:#ffffcc;
     padding:2px 10px 20px 10px;
     border:solid 2px #D48D00;
     line-height:-50%;
     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:5px;
         padding:10px 0 0 0;">
      なんちゃらかんちゃら商品名
    </div>
    <!-- /商品タイトルブロック -->
  </div>

<br />

  <!-- 商品画像+商品説明ブロック -->
  <div style="
       position:relative;
       top:-10px;
       margin:40px 10px 0px 10px; <----- ここ
       padding:20px 0px 20px 0px;
       background-color:#ffffff;
       height:157px;
       border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">

    <!-- 商品画像ブロック -->
    <div style="
         margin:0 0 0 20px;
         float:left;
         border-right:
         dashed 1px #ccc;">
      <a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2252541&pid=883222491" target="_blank" >
        <img src="https://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2015/01/2108576.gif" style="padding: 0 20px 10px 0;">
      </a>
    </div>
    <!-- /商品画像ブロック -->

    <!-- 商品説明ブロック -->
    <div style="
         float:left;
         padding:0 0 0 20px;">
      説明文がはいるよていでごわす。<br />
      ごわごわごわす。
    </div>
    <!-- /商品説明ブロック -->

  </div>
  <!-- /商品画像+商品説明ブロック -->
  <br clear="all"><div style="clear:both;"></div>
</div>

syntaxheightline まただよ（－－；
 
どうなると化けるんだ？・・・　とりあえず、マージンをゼロにしてみた。

商品画像+商品説明ブロックの上マージンを調整

 
ここで、問題が２つ解決した。
・syntaxheightline の文字化けは、記事を更新しないでプレビューで見たときに化ける。
・上マージンつっこんでいたので商品画像+商品説明のブロックが下がってた。
ボーダーでもファイヤーフォックスでも気が付けなかったのは、CSSのブロックの構成のせい。
 
つまり、CSSのブロックは、その側から・・・
マージン、罫線、パディング、本体　ってなってる。
 
ボーダーは、罫線部分ね？　そしてファイヤーフォックスのデバッガー？も罫線をむりやり突っ込んでアウトラインを表示させてるってことだ。つまり、マージンの分は、線よりも外側ってことね？
 

新たなる問題

商品画像+商品説明のブロックの下の空白でかすぎるぅ～～～～！！！！
 
原因は、float のクリアをしている div 。全体ブロックの下にもってくればいいんだけどね。
この後に続く人に迷惑かかるな・・・　（－－；　ま、仕方ないか。
 

下のブロックの人ごめん

前のソースから直したのは以下の2箇所。

　　　　　　　：
       top:-10px; 
       margin:40px 10px 0px 10px; <----- ここ 
       padding:20px 0px 20px 0px; 
　　　　　　　：
  <!-- /商品画像+商品説明ブロック -->
<br clear="all"><div style="clear:both;"></div>
</div>

を

　　　　　　　：
       top:-10px; 
       margin:30px 10px 0px 10px; <----- ここ 
       padding:20px 0px 20px 0px; 
　　　　　　　：
  <!-- /商品画像+商品説明ブロック -->
</div>
<br clear="all"><div style="clear:both;"></div>

に直した結果
 

σ（－－；　←下の人　  
 
 
⇒次へ(結果)・・・３ぺーじじゃねーのかよ！＞自分)

スポンサーリンク