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

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

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

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

1197783970
●拡大する

●質問者: funnywalk_5
●カテゴリ:ウェブ制作 学習・教育
✍キーワード:CSS イメージ タイトル テキスト 初心者
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kou32rr
●23ポイント

<h2>テキスト</h2>

って感じにし、

.flower{

padding-left:30px;

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

}

.flower h2{

text-indent: -9999px;

display: none;

}

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

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


2 ● retla
●23ポイント

text-indentを使わずに、

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

と書いて

.hoge { display:none; }

ではどうでしょうか。


3 ● tsukis
●22ポイント

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

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


4 ● えど
●22ポイント

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

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

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

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

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

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

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

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

関連質問


●質問をもっと探す●



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