はじめまして。はじめて質問させて頂きます。
スタイルシートに関する質問なのですが、例をあげて質問させて頂きます。
sample.html----------------------------
途中抜粋
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td id="key1">例</td>
</tr>
</table>
style.css--------------------------------
td#key1 {background-image: url(image/sample.gif); vertical-align: top; padding-top: 5px;}
以上のようにテーブルの中で"例"という文字を上から5px分下にずらしたいので、vertical-align: top; padding-top: 5px; と記述してあげたのですが、"例"という文字と同時に、背景である(sample.gif)も同時に下方向にずれてしまいます。背景がずれないようにするには vertical-align: top; padding-top: 5px; という記述以外に何か記述方法がありますでしょうか?
よろしくお願い致します。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
試しにやってみましたが、背景はずれず(同じ位置に表示される)に、
例という文字だけ下にずれました。
必然と、枠も下に広がります。
↓スタイルシートに分けるのが面倒だったのでhtmlファイル
一つにまとめました。
イメージファイル名は適当に。
質問は抜粋とあるので、他が影響しているか
ブラウザ(私はIE)が原因かもしれません。
html言語としては、ずれることは無いはずです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<style type="text/css">
td#key1 {background-image: url(xxx.gif); vertical-align: top; padding-top: 30px; font-size:40px}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" >
<tr>
<td id="key1">例</td>
</tr>
</table>
</body>
</html>
No.1
- 回答日時:
<td id="key1"><span id="aa">例</span></td>
#key1 {background-image: url(image/sample.gif); padding:0;}
#aa {vertical-align: top; padding-top: 5px;}
のようにするのはいけないのですか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
商品詳細を横並びに表示する方法
-
tableタグとformタグの組み合わせ
-
テーブルの枠線に色が付かない
-
divで囲んだ文字が消える
-
Tableタグで作成した表の縮小
-
td width="180" と固定してるの...
-
td要素内のdiv要素をセンタリン...
-
<img>タグにCSSのclass設定可能?
-
太字にするやり方
-
Firefoxを使ってるのですがズー...
-
商品一覧をtableタグで表示する
-
table タグで3列の表を作ると...
-
style=displayでの表示/非表示...
-
formのinputなどの幅100%指定
-
<TD div id="new">←こういうの...
-
テーブルの一部分のセルだけに...
-
リンクをクリック出来ない。
-
Tableタグ内のspan styleが適応...
-
ブラウザ上でのタブ・シフトタ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
ブラウザによってテーブルのセ...
-
cssで、テーブルのtdの中の文字...
-
td要素内のdiv要素をセンタリン...
-
vbscriptで時計を作りたい
-
formのinputなどの幅100%指定
-
Firefoxを使ってるのですがズー...
-
テーブルの枠線に色が付かない
-
divで囲んだ文字が消える
-
TDタグ内での均等割付の仕方
-
表とリスト(ulとtable)の違い...
-
firefoxで「height: 100%;」と...
-
<img>タグにCSSのclass設定可能?
おすすめ情報