• 締切済み

背景設定をするとグローバルナビ・テキストが消えてしまいます

ishibo_062の回答

回答No.2

表示の設定(CSS)を記入して頂いた方が回答も多く得られると思われます。 CSSでのナビ系は色々な方法がありますので一概にグローバルナビでは… との記載では答えきれない部分があります。 ちなみに私の場合は、横並びのナビゲーションですが下記のような感じで作ってます。 ■CSS div#head_navi { margin: 0; padding: 0; } div#head_navi ul, div#head_navi ul li { float: left; list-style-type: none; } div#head_navi ul { width: 690px; height: 60px; background: url(./img/head_navi_bg.jpg) no-repeat; margin: 0 0 10px 0; padding: 0; } div#head_navi ul li a { display: block; width: 115px; height: 60px; text-indent: -999px; font-size: 0; line-height: 0; } div#head_navi ul li.head_n01 a.active, div#head_navi ul li.head_n01 a:focus, div#head_navi ul li.head_n01 a:hover { background: url(./img/head_navi_bg.jpg); background-repeat: no-repeat; background-position: left bottom; } div#head_navi ul li.head_n02 a.active, div#head_navi ul li.head_n02 a:focus, div#head_navi ul li.head_n02 a:hover { background: url(./img/head_navi_bg.jpg); background-repeat:no-repeat; background-position: -115px -60px; } div#head_navi ul li.head_n03 a.active, div#head_navi ul li.head_n03 a:focus, div#head_navi ul li.head_n03 a:hover { background: url(./img/head_navi_bg.jpg); background-repeat:no-repeat; background-position: -230px -60px; } div#head_navi ul li.head_n04 a.active, div#head_navi ul li.head_n04 a:focus, div#head_navi ul li.head_n04 a:hover { background: url(./img/head_navi_bg.jpg); background-repeat:no-repeat; background-position: -345px -60px; } div#head_navi ul li.head_n05 a.active, div#head_navi ul li.head_n05 a:focus, div#head_navi ul li.head_n05 a:hover { background: url(./img/head_navi_bg.jpg); background-repeat:no-repeat; background-position: -460px -60px; } div#head_navi ul li.head_n06 a.active, div#head_navi ul li.head_n06 a:focus, div#head_navi ul li.head_n06 a:hover { background: url(./img/head_navi_bg.jpg); background-repeat:no-repeat; background-position: -575px -60px; } ■HTML <div id="head_navi"> <ul> <li class="head_n01"><a href="" title="SAM1">SAM1</a></li> <li class="head_n02"><a href="" title="SAM2">SAM2</a></li> <li class="head_n03"><a href="" title="SAM3">SAM3</a></li> <li class="head_n04"><a href="" title="SAM4">SAM4</a></li> <li class="head_n05"><a href="" title="SAM5">SAM5</a></li> <li class="head_n06"><a href="" title="SAM6">SAM6</a></li> </ul> </div> 今回はナビをテキスト表示したいとの事でしたので、CSS内の div#head_navi ul li a { display: block; width: 115px; height: 60px; text-indent: -999px; font-size: 0; line-height: 0; } 上記のfont-sizeを任意の大きさに置き換えて下さい。 いつも画像のみのナビゲーションでテキスト表示まではおこなっておらず今回のものは確認しておりませんが恐らくうまくいけるかと思います。 ちなみに背景に関しては690*120の大きさで作成し、マウスオーバーでボタン表示が変化するような感じになってます。 実際のナビボタンは高さ60pxです。 先ずは参考までに… 尚、最初に書いたとおり c-blossoms さんの現在のCSSを書いてもらわないとどの方も説明しづらいと思います。 今回はそればかり申し上げても何なんでついでに参考CSSを記載させて頂きました。

関連するQ&A

  • グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、

    グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、 どうすれば良いのか分からなくて困っています。 まず、参考にしようとしているサイトが下記です。 http://www.oo-nagata.co.jp/ このサイトのようにグローバルナビ部分のとフッター部分の背景を画像で(画像ではなくても同じ事なのでしょうか、、。)画面幅いっぱいにしたいのですが、うまくいかなくて困っています。 ページの幅は960pxにCSSにて指定しているのですが、 幅を指定してしまうと当然その部分の幅は指定した幅になってしまいます。 よって背景画像は画面幅いっぱいにはならないのです。 ページの幅は指定し画面中央にくるようにしたいのですが、 どうすれば良いのでしょうか?

    • ベストアンサー
    • HTML
  • グローバルナビ

    グローバルナビのリンク文字は見出し(h)使ったほうがいいですか? 当然CSSでフォント数指定はしますが。

    • ベストアンサー
    • HTML
  • CSSで背景画像を設定する

    <html> <head> <title>--------</title> <style type="text/css"> body{background-image:url(image/-----.jpg)} </style> </head> ~~~ 画像を設定しましたが別のファイルではこの設定で表示できましたがこのファイルでは背景画像が設定できません。

    • ベストアンサー
    • HTML
  • 背景画像上にテキストを配置したボタンについて

    今晩は。 いつもお世話になっています。 CSSで次のようなボタンを作りたいと思っています。 ・背景画像の上にテキストを乗せたボタン。 1)ボタン上のテキストを書き換えられるようにしたい。 2)ボタンはページによって同じ背景画像でサイズを変えたい。(指定した縦横幅に合わせて背景画像がリサイズされるようにしたい) 3)背景画像ごとリンクにしたい。 参考サイトを見て、現在以下のようなボタンを作ってみました。 1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか? また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。 -------------CSS-------------- div.photo{ width:100px; height:50px; background-image:url("xxxx.png"); background-repeat:no-repeat; position:relative; background-size:contain; float:right; } .text{ width:100px; position:absolute; top:8px;left:10px; color:#ffffff; line-height: 1.2; font-size:15px; } ------------HTML------------- <div class="photo"> <div class="text"><a href="#">テキスト</a></div> </div> 以上になります。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 背景画像だけをはみ出して表示させたい。

    CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい!!</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • CSSで、テキストのみの背景色を指定するには?

    CSSで、テキストのみの背景色を指定するには? CSSを使って、 h1 { color: orange; background: green; } とすると、<h1>タグで示されたテキストの行の背景色が緑色になりますが、 行全体ではなく、テキストのみの背景色を指定するにはどうすればよいでしょうか?

  • ccsのテキストボックスの背景として、

    ccsのテキストボックスの背景として、 textarea { /* 背景画像の指定 */ background-image: url("abc.jpg"); background-repeat: no-repeat; background-position: top center; /* テキストエリアのサイズ */ width: 400px; height: 150px; } といったものをよくみうけます。 しかしこの場合、abc.jpgの大きさが400×150を超える物(または未満)ですと、テキストボックスからはみでて(あるいは隙間が出てしまう)全て表示できません。 abc.jpgのサイズを変えず、cssの指定などではみ出さずに表示することは可能でしょうか?

  • 背景画像の上にテキストを表示したい

    はじめまして。 さっそくですが、背景画像の上にテキストを表示したいのですが、各ブラウザによってレイアウトにずれが生じてしまいます。 画像リンク(Network Servicesなど)は各ブラウザで確認してもレイアウトが崩れていないのですが、テキストリンク(aaaaaaaaaやbbbbbbbbなど)が思い切りずれてしまいます。 こちらまず背景画像をレイアウトし、その上に画像リンクやテキストを重ねてレイアウトしているのですが、作り方そのものが間違っているのでしょうか?それともcssの設定に問題があるのでしょうか? 該当css部分は下記です。 #oslu_1a{ margin-top: 30px; margin-left: 23px; } #oslu_2a{ margin-top: -55px; margin-left: 270px; } #oslu_3a{ margin-top: -39px; margin-left: 515px; } なにとぞよろしくお願いいたします。m(_ _)m

    • 締切済み
    • CSS
  • グローバルナビを固定にしたのですが、表示がおかしい

    いつもお世話になっております 表題のとおり、 以下サンプルサイトの グローバルナビを固定にしたのですが、表示がおかしいです http://gcgtokyoroom.com/yk/ グローバルナビはしっかり付いてくるようになりましたが、 サンプルjs http://www.webdlab.com/template/fixednav/ 一旦トップに戻ると #mainImg部分が全て表示されなくなります、、、 恐らくcssの問題だと思うのですが、 正直あまりcssが分からず困っております。 ご教授お願いします、、、

    • 締切済み
    • CSS
  • CSSのfilterでテキストまで透明化される

    CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色(白)が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色(白)だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック:windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【CSS】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色(白)が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている(親divのfilterがpタグまで継承されているから?)ので pタグにfilterプロパティで不透明を100に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【CSS】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色(白)が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明100に設定 } ******************************************************* ご指導のほどよろしくお願いします。

    • ベストアンサー
    • CSS