横並びのメニューを作成したいと思っています。
text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。
ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。
よろしくお願いします。
#header h1 {
margin: 5px 0 0 20px;
padding: 0;
width: 248px;
height: 143px;
float: left;
text-indent: -9999px;
font-size: 130px;
background: url(../images/logo.jpg) no-repeat #FFFFFF;
background-position: center;
}
ul {
margin: 0;
padding: 0;
width: 635px;
height: 54px;
}
li{
float: left;
list-style: none;
margin: 0;
padding: 5px;
font-size: 50px;
text-indent:-999px;
}
li#top {
background: url(../images/menu/top.jpg) no-repeat;
}
No.1ベストアンサー
- 回答日時:
こんばんわ。
>背景画像のみを表示
text-indent -999pxする目的が良くわかりませんが・・・・
その背景画像(../images/menu/top.jpg)が、メニュー項目なのでしょうか?「背景」画像ですから、要素liの中身がない or 文字があっても text-indent -999px ならば、表示するモノがないという事になります。モノがなければ、実際のUA上では幅がありません。「背景」画像も表示されませんね。ただし、IE6の場合は全くないですが、IE7, Firefox, Opera, Safari だと、ほんのわずか、10pxくらいでしょうか、表示されます(4.01の場合)。
ulには、width, height と指定なさってらっしゃいますから、liに、画像メニューの幅と高さを指定すれば表示されるはずです。htmlソースのli/liの中身になにもなくても、です。
h1の場合は、width,height を指定なさってますから、当然h1は中身があってもなくてもそのサイズは確保されてます。ですから、背景画像も表示されますね。
横並びメニューをliで実現するのは、さほど難しいことではありません。しかし、margin, padding, をUA毎に細かく指定するか、最大公約数的に指定しないと、IE,Firefox,Opera,Safari等々、それぞれ異なる隙間が表示され、当然、横並びメニュー全体の幅も変わって来ます。ulに指定した幅を越える、または足りなくて右が広くあいてしまう、などの状態になったりします。
また、画像が下にずれこむ状態とのことですが、background: ;で指定するばあいは、その画像などのポジションは2つあります。水平方向と垂直方向です。要素の width, height が その要素の背景画像より大きい場合、ポジションを指定すれば解決です。center も使えますし、%も使えます。50% 50% = center center ですね。0% 50% = 要素左端の真ん中。50% 0% = 要素中央の上端、という状態です。
ありがとうございます。
text-indentは、SEOを意識してのことで、本に載ってあったものを使用していました。
お教えいただいたようにliにwitdhを指定し、ulのwitdhを消すとうまくいきました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
LightBoxの矢印の出し方
-
画像とその下にあるテキストの...
-
WEB上でディレクトリ内の画像を...
-
CSSで画像を均等配置
-
CSSだけでサムネイルから拡大画...
-
画像をリンクボタンにして文字...
-
background-sizeの背景で最小値...
-
画像の中にインラインフレーム...
-
Googleマップの埋め込みで上部...
-
背景画像を前面に表示させる方法
-
widthが可変のブロック要素で、...
-
画面サイズに合わせて背景の写...
-
background-sizeでcontainする...
-
自分で壁紙を作成して、ホーム...
-
数か月ぶりにCSSを再開しました...
-
イメージ(gif)の影
-
横幅100%指定でも崩れないボッ...
-
[HTML][CSS] 画像の高さを揃え...
-
jQueryでCSSの背景画像を切り替...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
lightbox2で画像を天地左右中央...
-
background-sizeの背景で最小値...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報