1197783970 css初心者です。

花<div></div>とタイトル<h2></h2>はどちらも外部cssの背景画像で呼び出しています。
図のように両方を横並びに配置し、さらにタイトルの上に重なっているテキストを表示させたくない場合、

①まず花とタイトルの両方にfloat:left;
②次にタイトルにtext-indent:-9999;

が方法として挙げられると思いますが、なぜか①と②は両立できないようで、イメージもろとも画面外に追い出してしまいます。
このような状況は割とよくあると思うのですが、もっとも望ましい方法を教えてください。

回答の条件
  • 1人2回まで
  • 登録:2007/12/16 14:46:12
  • 終了:2007/12/23 14:50:02

回答(4件)

id:kou32rr No.1

kou32rr回答回数197ベストアンサー獲得回数82007/12/16 19:57:13

ポイント23pt

<h2>テキスト</h2>

って感じにし、

.flower{

padding-left:30px;

background-image:url(../images/back.gif);

}

.flower h2{

text-indent: -9999px;

display: none;

}

そして、背景画像は花と文字を一緒にすればよいと思います。

花という飾りのものを要素として分離する必要はないと思います。

id:retla No.2

retla回答回数16ベストアンサー獲得回数12007/12/16 22:34:22

ポイント23pt

text-indentを使わずに、

<H2><span class="hoge">テキスト</span></H2>

と書いて

.hoge { display:none; }

ではどうでしょうか。

id:tsukis No.3

tsukis回答回数15ベストアンサー獲得回数22007/12/17 15:24:55

ポイント22pt

タイトルのh2に幅を設定していないのではないでしょうか?

h2にその背景画像の幅、高さを設定すれば背景は出てくると思います。

id:edo_m18 No.4

えど回答回数2ベストアンサー獲得回数02007/12/20 11:22:27

ポイント22pt

ちょっと状況がつかみきれていませんが、

もしかしてタイトル部分のテキストをテキスト情報としてではなく

画像で表示したい、ということでしょうか。

ということであれば、以下の方法なんかどうでしょう。

過去に書いたエントリーですが、フォントを画像のようにきれいな状態で、

かつ更新性も持ちながら使用する方法の紹介をしています。

▼SEO対策をしたままきれいなフォントを使う

http://css-eblog.com/seo/seo.html

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません