2011年4月アーカイブ

div内でfloatを使うときの注意点2

| コメント(0)
以前の記事、「div内でfloatを使うときの注意点」で書いた通り、
大枠の div の height を中身の要素(floatあり)に合わせて伸ばすには、
大枠の div に overflow:hidden; を指定するという方法があります。

しかし、これだけではIE6では上手くいかなことがあります。

前記事の例では自然に指定していましたが、
overflow の指定だけではなく、width の指定も必要だったようです。
(そうしないと、中身の要素が折り返される場合に計算ができないのだとか・・)

ということで、前記事の方法を使う場合は、

overflow:hidden;
width:○○○;

この2つを指定しましょう。

dlで表をつくる方法

| コメント(0)
110420.gif

上図のような表をdlで作成する場合、
今まではdt、ddにきっちりwidthを指定し、
それぞれにborder-bottomを指定。
dtにfloat:left;、ddにfloat:right;を指定するという方法でやっていました。
でも、「う」の段のように、ddのテキストの行数がdlよりも多いと
border-bottomがずれてしまいます。
ならborder-top指定すれば?と思いますが、
「え」の段のように、逆にdtのテキストの行数が多いと
「お」の段が回り込んでしまいます。
そうすると、一段ずつdlにするというような
何とも不細工なソースになってしまっていました。

調べてみると、下記の様にすればで崩れずソースもきれいなままです。
それは、dtにwidthとfloat:left;を指定border-bottomの指定はナシ。
ddには、dtのwidth分のpadding-leftとborder-bottomを指定、floatとwidthの指定はナシ。

具体的にはこんな感じです。

--------------

dl{
width:500px;
list-style:none;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
background:url(dtについている色を画像で指定) repeat-y left top;
overflow:auto;
}

dt{
clear:both;
width:100px;
float:left;
}

dd{
border-bottom: 1px solid #999999;
padding:0 0 0 100px(dtのwidth分);
}

--------------

リストなどで1行が長くなってしまうと、

|※テキストテキスト
|※テキストテキストテキストテキ
|ストテキスト
|※テキストテキストテキ

折り返されてこのようになってしまいます。
ですが、折り返されたあとは※ではなく文字の初め(テキストの"テ")に
合わせたいということが殆どかと思います。

今まではpaddingと背景画像を使って再現していたのですが、
もっとずっと楽な方法があること知ったのでメモしておきます。

上の例がリストであるとして、ソースはこのようになっていると思います。

<ul>
<li>※テキストテキスト</li>
<li>※テキストテキストテキストテキストテキスト</li>
<li>※テキストテキストテキ</li>
</ul>

まず、この<li>タグに左paddingを指定します。
1文字分、と指定するのがいいと思いますが、崩れる場合もあるようなので
そのときはピクセルで。

padding-left:1em; または padding-left:12px; など

これで一文字分、右にずれることになります。

| ※テキストテキスト
| ※テキストテキストテキストテ
| キストテキスト
| ※テキストテキストテキ


次に、行の先頭だけ左にずらします。
  • タグにtext-indentを指定します。

    text-indent:-1em;

    これで頭だけ左にずれ、改行後の先頭はテキストに揃う形になります。

    |※テキストテキスト
    |※テキストテキストテキストテキ
    | ストテキスト
    |※テキストテキストテキ


    それにしても、text-indentなんてまさにこういう用途のために
    用意されているようなクラスですよね・・
    もしくは先頭1文字下げるとか。

    普段、画像置き換えのために文字を吹っ飛ばすくらいしか
    使っていなかったので、目から鱗な気分です。
  • このアーカイブについて

    このページには、2011年4月に書かれたブログ記事が新しい順に公開されています。

    前のアーカイブは2010年3月です。

    次のアーカイブは2011年7月です。

    最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。