HTML、CSSについて。テーブル背景がズレる。

質問

こんにちは。よろしくお願いします。

HTMLとCSS、2つのファイルを作成しています。

HTMLでテーブルを作成し、<td><div=名前></div></td>
として、テーブルの中身はCSSにまかせています。
複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。

CSSでは、
div#名前 {
width: 20px;
height: 20px;
margin: 0px;
padding: 0px;
background: url(画像名.gif);
}
　　・
　　・
　　・

htmlを表示させてはcssのpxを調節し、
きれいな背景画像付きのテーブルが完成した！と思ったのですが、

ブラウザの文字サイズを最大に変更すると崩れてしまいました。

pxではなくて%で指定してみても崩れます。

解決策をご存知の方、教えてくださると有難いです。
よろしくお願いします。

回答No.3

ORUKA1951

たぶん、
<td><div=名前></div></td>
ではなくて、
<td><div id=名前></div></td>
だと思いますが、idにはルールがあります。
・使える文字は半角英数字と、いくつかの記号
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
IDトークンとNAMEトークンは、アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字、([0-9])、ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述する必要がある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Basic HTML data types (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-name )］より
　よって、id="name" のように書きます。また、常に""で括るようにしましょう。

☆これは、そんなことよりもっともっと大事なことなのですが、HTMLで文書構造を、CSSでプレゼンテーションを記述する。すなわち、文書構造とプレゼンテーションを切り離すには重要な理由があるのです。
　あなたのtableは、仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html#h-14.1 )で、名指しで批判されている
「# ページレイアウトの目的で表を用いる。」ではないのですか？？

　なら、
≫HTMLとCSS、2つのファイルを作成しています。
・・・【中略】・・・
≫きれいな背景画像付きのテーブルが完成した！と思ったのですが、

　は、出発点から間違っていることになります。

まず、このあたりから学び始めましょう。
【参考サイト】
はじめてのWebドキュメントづくり
　 http://www.asahi-net.or.jp/%7Esd5a-ucd/www/

回答No.2

abril

それぞれの「div#名前」に表示させたい背景画像が、内包するテキストの量に応じて常にセルの中一杯にリピートしてレンダリングされればいいだけなら、「<td><div=名前></div></td>」という入れ子構造にするのではなく、それぞれのtdにidをふって背景画像を指定すれば可能です。

<table summary="サンプル">
<tbody>
<tr>
<th>見出しセル1</th><td id="data01">データセル1</td>
</tr>
<tr>
<th>見出しセル2</th><td id="data02">データセル2</td>
</tr>
</tbody>
</table>

td {
width: 20px;
padding: 0px;
background-repeat: repeat;
}
td#data01 {
background-image: url(画像パス/data01.gif);
}
td#data02 {
background-image: url(画像パス/data02.gif);
}

なお、tdにheightプロパティを指定しても無駄です。tdやthにおけるheightプロパティは、min-heightの様に「指定された最低限の高さを確保する」という性質のものであり、内包するデータ量（セル中に入れるテキストなり画像なり）が相対的に指定した高さを超えれば、自動的にセルの高さを伸ばします。なので固定はできません。

divの場合はheightで与えた高さに対して内包するデータ量がその高さを超えた場合は、overflowプロパティを併用する事で、
(1)（枠を）はみ出して表示（枠自体は伸びないので続く要素に重なります）
(2)はみ出した分を隠す
(3)はみ出す分は（枠内で）スクロールして表示
の3種類のいずれかの表示にできます。

Web上のコンテンツは印刷物と違って、閲覧者の「環境」及び「意思」によって、ある程度表示が「変更される／変更できる」事が当たり前のものです。スクリーンは、紙とは全く性質の異なるメディアです。ですので、(X)HTMLを作成する場合の大原則として「ブラウザの文字サイズを最大に変更すると崩れてしま」うレイアウトというのは推奨されません。また仮に崩れたとしても必要な情報が取得できる様な（常識的な範囲で文字サイズを変更しても、文字や画像が重なって判読できなくなるなどという事がない）状態を保てる構成・スタイルである事が必至です。
つまり、テキストデータの幅や高さを印刷物の様にガチガチに絶対値で固定する事は、どんな手段を使ってもできないと思って下さい。そしてそうしなければ情報を提供できない様なデザイン自体、(X)HTML向きではないという事も認識されておく方が良いでしょう。

回答No.1

adobe_san

divにcssを指示するのでなくその上のテーブルかボディにcssで指示しましょう。
今の指示の仕方ではタグとタグの間でのみcssが動きます。
それも不数個存在してるのでしょ。
なら崩れるの当然です。
まずcssで全体を固めてその中でdivを動かしましょう！