人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSテーブルの高さを指定してpaddingを指定するとたかさテーブルが伸びる

CSSでテーブルの高さ・幅を指定し、背景画像(高さ・幅はテーブルサイズと一緒)を設定。
文字が左下あたりに来るので、paddingを指定。文字位置を左上に指定。
こうすると、文字は希望位置に来るのですが、なぜかテーブルが伸びてしまいます。(多分paddingの長さ分)
これをどうにか止めることはできませんか?
以下CSSです。

.mo_00_1{
background-image : url(images/mo/01/02.png);
width : 940px;
height: 860px;
padding:632px 0px 0px 57px;
text-align: left;
vertical-align: top;
}

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答1号

ちょっと質問がよく分からないんですけど、mo_00_1 はtableについているクラスですか?


匿名質問者さんのコメント
説明がうまく出来ずにすみません。 このようになっています。 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="mo_00_1">ここに文字</td> </tr><tr> <td class="mo_00_2">次の説明</td> </tr> </table> 画像の一部にテキストデータを置きたいので画像を背景にしました。

匿名回答1号さんのコメント
ごめんなさい、まだよく分からないんですが、そうするとこのセルは 横幅が940+52=992ピクセル 縦幅が860+632=1492ピクセル に設定していると思うんですが、「なぜかテーブルが伸びてしまいます」というのは、これ以上に大きくなるということですか?

匿名質問者さんのコメント
返答ありがとうございます。 もしかしてですけど、私が根本的に間違っているのでしょうか? width・heightとpaddingの関係はwidth(またはheight)の全体幅から内側にpadding分入り込む(?)のではなく、width(またはheight)プラスpadding分が全体サイズになる(paddingを利用したければ、全体サイズはpaddingを引いた数値を指定しないといけない)、ということでしょうか? もしそうなら、逆に、背景画像のサイズ=width x heightにして、その内側にテキストなどを配置するにはどのようにしたら良いのでしょうか?

匿名回答1号さんのコメント
パディング部分には背景画像が表示されるはずですので、おっしゃるとおり引き算すればいいと思います。

匿名回答2号さんのコメント
width : 883px;/*width+padding-left=940px(=画像横幅)*/ height: 248px;/*height+padding-top=860px(=画像縦幅)*/ padding:632px 0px 0px 57px; これでお望みのレイアウトになるかと思いますが、そもそもthは使用せずtdのみ、かつ1列のみ使用するのであれば外枠が必要な場合はdiv、コンテンツ部分はp等で作成すると良いかと思います。

匿名回答1号さんのコメント
>|| height: 228px;/*height+padding-top=860px(=画像縦幅)*/ ||<
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ