スタイルシートで見出しの先頭に画像を表示

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： あべし ： 2004/12/12 14:49
そのまんまなのですが・・・

たとえば

＜ｈ１＞みだし＜／ｈ１＞

と書けば大きく　みだし　ってでますよね。

その　みだし　と書いてある前に

スタイルシートで画像を表示させたいのです。要するに

（画像）みだし

ってな感じなのですがどうすればよいのでしょうか

どなたか教えてください＿.(。。;).＿
1   名前： みや ： 2004/12/12 15:10
h1 要素の背景にすると良いかと思います。padding-left を広げて内容を右に寄せ、背景画像を左側に表示させるようにします。たとえば

h1 {
background: url('logo.png') no-repeat left center;
padding-left: 80px; /* 画像の幅＋α */
}

あとは、適当に padding-top、padding-bottom などで縦位置も調節すれば良いでしょう。

ただ、この場合なら普通に img 要素を使って

<h1><img src="logo.png" alt="☆" id="logo" />私のページ</h1>

でも良いのではないでしょうか。このロゴ画像を position: absolute で好きな位置に飛ばしてしまうというテクニックもあります。
2   名前： あべし ： 2004/12/12 15:20
できました　ありがとうございました

欲を言ってしまうとベースカラーの上に

（ロゴ）みだし

としたいのですができますか？
3   名前： みや ： 2004/12/12 15:32
「ベースカラー」とは何のことでしょうか。

できましたら、「実際にこう書いてみた」「でもここが気に入らない」というコードを一緒に提示してもらえると、いろいろな方から具体的なアドバイスが得られると思います。
4   名前： あべし ： 2004/12/12 16:23
すみません

h1{
font-size:16pt;
font-style:normal;
font-weight:bold;
line-height: 1.5em;
color:#000099;
background-color:#ffffff;←この部分です
border:1px solid #999966;
background: url('tri.gif') no-repeat left center;
padding-left:20px;
}

上のように書いたのですが

background-color:#ffffff

の一文が意味を成していません

ということです。アドバイスをよろしくお願いします。

〜追加〜
background: url('tri.gif') no-repeat left center;

この部分を抜けば

背景の色はきちんとなります。
5   名前： みや ： 2004/12/12 16:40
プロパティが上書きされていますので、

background: #fff url('tri.gif') no-repeat left center;

のように一括指定するか、

background-color: #fff;
background-image: url("tri.gif");
background-repeat: no-repeat;
background-position: left center;

のように個別指定するかのどちらかにして下さい。

# なお，色指定の #aabbcc は #abc のように簡略表記できます。
6   名前： あべし ： 2004/12/12 16:56
解決しました。

早いレスありがとうございました。
一覧へ戻る