HOME > What's Newの破線やナビゲーションの「|」の端を消して、スマートにコーディングするの巻
よくあるこれ↓。一番下の破線はいらないんだよなーって場合。
親ボックスにoverflow: hidden;をかけて、<dd>にmargin-bottom: -1px;を設定。
hiddenは、箱から出るものは表示させない命令なので、-1pxで破線を表示外にするというテク。
そうすると、最後の<dd>にわざわざclassを付けてcssを設定する必要もなくスマートにできる。
HTML
<dl class="example02-list-after">
<dt>0000.00.00</dt>
<dd>あああああああああああああああああああああああ</dd>
<dt>0000.00.00</dt>
<dd>いいいいいいいいいいいいいいいいいいいいいいい</dd>
<dt>0000.00.00</dt>
<dd>ううううううううううううううううううううううう</dd>
<dt>0000.00.00</dt>
<dd>えええええええええええええええええええええええ</dd>
</dl>
CSS
.example02-list-after {
width: 500px;
overflow: hidden;
_zoom: 1; /*IE6バグ対策*/
}
.example02-list-after dt {
padding-top: 5px;
}
.example02-list-after dd {
margin-top: -1.5em;
margin-bottom: -1px;
background-image: url(../example/img/css_img02.png);
background-repeat: repeat-x;
background-position: left bottom;
padding-left: 100px;
padding-bottom: 5px;
}
同じようなやり方で、横並びのナビゲーションもこんなふうに、ムダなCSSを作らなくて済んじゃう。
HTML
<ul class="example02-list02 pd-t10">
<li>ナビ1</li>
<li>ナビ2</li>
<li>ナビ3</li>
<li>ナビ4</li>
</ul>
CSS
.example02-list02 {
overflow: hidden;
_zoom: 1; /*IE6バグ対策*/
}
.example02-list02 li {
float: left;
background-image: url(../example/img/css_img03.png);
background-repeat: no-repeat;
background-position: left center;
margin-left: -1px;
padding-right: 8px;
padding-left: 8px;
}
© netdehatch.com