サイトにおいて、マーク付きのリストはよく目にします。
※こんな感じのやつ
上のテキストの部分が一行の場合はきれいに表示されますが、もしも2行になってしまうときれいに表示されなくなってしまいます。
※こんな感じに、テキストが
マークの下にまがたってしまう。
これを防ぐには下記
.sample { text-indent:-1px; padding-left:1px; zoom:1; }
これによって、テキストが改行されて二行になってもマークの下にはテキストが回りこまず、きれいに表示されます。
サイトにおいて、マーク付きのリストはよく目にします。
※こんな感じのやつ
上のテキストの部分が一行の場合はきれいに表示されますが、もしも2行になってしまうときれいに表示されなくなってしまいます。
※こんな感じに、テキストが
マークの下にまがたってしまう。
これを防ぐには下記
.sample { text-indent:-1px; padding-left:1px; zoom:1; }
これによって、テキストが改行されて二行になってもマークの下にはテキストが回りこまず、きれいに表示されます。
サイトの内容がパソコンの1画面に入りきらない場合、スクロールバーが表示されます。
もし縦に短いページと縦に長いページが混在しているサイトの場合、スクロールバーが表示される分だけコンテンツが左に移動し、ページを移動するたびにコンテンツがずれることになります。
これを防ぐには下記のCSSをhtml要素に追加します。
html { margin-bottom:1px; height:100%; }
html要素に1pxマージンを足し、必ずスクロールバーが表示されるようにすることでページごとのズレを防ぎます。
まぁ、極端に縦に短いページと長いページが混在していない限り、そんなに使うことはないと思います。
要素を親要素の上下中央に表示したい、ということはサイトを作っていてよくあると思います。
たとえば、テキストと画像が横並びになっていて、テキストの分量が増えても画像を上下中央に表示したい、という場合など。
そんなときの方法を紹介します。まずはHTMLから。
<div> <p>こちらの分量が増えても、buttonを中央に表示したい</p> <p><img src="button.gif" alt="ボタンの画像" ></p> </div>
次に、CSS
p{ display: table-cell; vertical-align: middle; display:inline; //IE6,7対策 zoom:1; //IE6,7対策 }
display:table-cellで自動的に横並びになるので、floatなどは不要です。
なお、上記のCSSでdisplay:inline;とzoom:1;の前に全角スペースがあるのは、IE6、IE7だけに反映させるためのCSSハックです。