clearプロパティーの記載方法について

[新着] Webテンプレートを仮オープンしました

0   名前： ためじろう ： 2006/05/21（日） 22:45  ID:nIpRHhE9
はじめまして。スタイルシート初心者です。
お知恵を貸していただけたらと思い書き込みしました。

現在floatを使用してレイアウトしているのですが、
clearプロパティの挿入方法で悩んでいます。

floatを解除したい最後に1pxの画像をいれて、そこにclearを指定して
floatを解除しているのですが、何故か下の方（画像とborderの間）に空白が入ってしまいます。

このボックスは、この後も続く為、なるべく空白を入れたくありません。
良い方法があれば、教えていただければと思います。

すいません。よろしくお願い致します。


【HTMLタグ】-------------------------------------------------------------

<div id="a">
<h3><img src="img/a.gif" width="264" height="26" border="0"></h3>
<div id="box">
<h4><img src="img/box.gif" width="100" height="100" border="0"></h4>
<div class="write">
<h5>テストテスト。</h5>
<p>テストテストテストです。</p>
</div>
<span class="floatend"><img src="img/sp.gif" width="1" height="1" border="0"></span>
</div>
</div>


【スタイルシート】------------------------------------------------------

*{
margin:0;
padding:0;
}

.floatend{
clear:both;
margin:0;
padding:0;
}

#a{
border:solid 1px #1E5E78;
background-color:#E9F2F6;
width:264px;
margin-top:10px;
}

#a h3{
border-bottom:solid 1px #1E5E78;
}

#box{
margin:10px;
border-bottom:solid 1px #1E5E78;
padding:0 0 10px;
}

#box h4{
float:left;
margin-right:5px;
display:block;
width:100px;
}

#box .write{
float:left;
width:139px;
}

#box h5{
font-size:13px;
padding-bottom:3px;
}

#box p{
font-size:12px;
color:#333333;
line-height:140%;
}
1   名前： ためじろう ： 2006/05/21（日） 22:45  ID:nIpRHhE9
追記：

ちなみにFirefoxでは、うまく表示されます。
IEだと、空間が空いてしまいます…。

お願い致します。
2   名前： Pid ◆byEkK9OALr ： 2006/05/21（日） 22:45
> 何故か下の方（画像とborderの間）に空白が入ってしまいます。

.floatend { vertical-align: bottom; } ではないでしょうか。
http://www.mozilla.gr.jp/standards/webtips0018.html

と言うか，float を clear するためだけに不要な構造（br や img）を文書に付与するのは，美しくないと思います。「まず文書のマークアップがあり，それに基づいてスタイルを規定する」という原則に従えば，たいてい clear を指定できるブロックがあると思うのですが。


余計なマークアップをせずに clear したければ，IE 以外なら
.write:after {
  content: "おわり";
  display: block;
  clear: left;
  visibility: hidden;
  height: 1em;
}

という手も無くはないです。

なお，IE でも，余計なマークアップをせずに clear する方法が
http://www.stuffandnonsense.co.uk/archives/clearing_floats_without_structural_markup_in_ie7.html
にあるそうです。私はまだ目を通していませんので，ぜひ読んで解説して下さい m(_ _)m。
3   名前： ためじろう ： 2006/05/21（日） 22:45  ID:6qNnU2Pi
Pid様

お返事が遅くなってしまい、申し訳ございませんでした。
ご指摘、ご回答、本当にありがとうございました。
意図するとおりに表示されるようになりました。

私にはまだ、
「まず文書のマークアップがあり，それに基づいてスタイルを規定する」
このマークアップがうまくできていないようです。
どうしてもデザインが先行してしまい、その後にマークアップしている感じです。

改善はされましたが、後々のためにもう一度構造からやってみたいと思います。

ありがとうございました。
また、宜しくお願い致します。


一覧へ戻る