• 締切済み

css　でのプルダウン子階層の色について

こんばんは。初心者で質問自体説明不足かもしれませんが、 どなたかご教授願えたら幸いです。 前回も似たような内容で教えていただいたんですが、 知識不足で少し変わると応用する事ができず、困っております（涙） ＣＳＳでサイトを制作しており、ＣＳＳでできる、 画像を使用した横型プルダウンメニュー（プルダウンは縦）を設置しました。 表示中のページがわかるように、 以下の様に、bodyにidをつけて、bacground-positionをマイナスして画像の下側を 表示させているのですが、子メニューが親メニューと一緒にpositionがマイナス されて、current時のボタン表示になってしまいます。 ****************************************** <body id="01"> <menu> <ul> <li id="menu1"><a href="#">menu</a> <ul> <li id="submenu1"><a href="#">submenu</a></li> <li id="submenu2"><a href="#">submenu</a></li> </ul> </li> </ul> </menu> </body> --------css---------------------------- #menu {width:835px; ～(etc)} #menu #menu1 a {background-image:url(image/***.jpg);width:65px;} #menu #submenu1 a {background-image:url(image/***.jpg);width:65px;} #menu #submenu1 a {background-image:url(image/***.jpg);width:65px;} #menu #current a {background-position:0 -40px;} #p01 #menu #menu1 a {background-position:0 -40px;} ****************************************************** 親メニューのボタンだけのpositionをマイナスにして、 子メニューは適用しない方法を教えて頂けますでしょうか・・・。 また、子メニューの方にも表示中のページをわかるようにするには、 どこにどのような記述をすればよかったでしょうか？ 上記のソースに何か追加や修正をしてできるものがあれば、 大変助かります。 説明不足ですみませんが、どうぞよろしくお願い致します。

  • CSS
  • 回答数2
  • ありがとう数1

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

＞上記のソースに何か追加や修正をしてできるものがあれば、 　不可能です。<menu>は、典型的な非推奨要素で、使うべきではありませんし、また決して<ul>と同居はしません。<menu>内には<ul>は入れられません!!!入るのは<li>のみです。本来<menu>は、内容の<li>をひとつの段落--改行なし---でレンダリングされるように計画されましたが、実際にはどのブラウザも<ul>と同じようにレンダリングします。 ＞current時のボタン表示になってしまいます。 　currentを示すclass名がついていないので、いずれにしてもそのままのHTMLでは無理です。 　#は一意セレクタと呼ばれるセレクタでひとつの文書内に一箇所しか存在し得ないし、詳細度も高いので、子孫セレクタとして記述する必要は基本的にありません。 　以前も回答しましたが、HTMLは <div class="nav"><!-- ナビゲーションブロック --> 　<ul><!-- 順不同リストA --> 　　<li><a href=""></a><!-- 項目a --> 　　　<ul><!-- 順不同リストB --> 　　　　<li><!-- 項目b --><a href=""></a></li> 　　　　<li class="current"><!-- 項目c --><a href=""></a></li> 　　　　<li><a href=""></a><!-- 項目d --></li> 　　　</ul> 　　</li> 　　<li><a href=""></a><!-- 項目e --> 　　　<ul><!-- 順不同リストC --> 　　　　<li><a href=""></a><!-- 項目f --></li> 　　　　<li><a href=""></a><!-- 項目g --></li> 　　　　<li><a href=""></a><!-- 項目h --></li> 　　　</ul> 　　</li> 　</ul> </div> 　などになります。子供セレクタ>を使うと簡単なのですが、子供セレクタに対応していないIE6など古いブラウザを考えると、子孫セレクタで区別することになります。 　ここで、 div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;line-height:30px;text-align:center;} /* すべての ul,liタイプをpadding,marginのないblockにしておきます。あわせてline-height,text-alignを指定しておく */ /* line-height,text-alignは継承されるプロパティ */ div.nav ul{width:100%;position:relative;} /* div.nav の子孫であるul--すなわち 順不同リストA,B,Cすべてに適用されます。詳細度[0,0,1,,]*/ /* div.nav>ul--子供セレクタを使うと順不同リストAのみ適用される --> /* relativeは、その子孫要素の巾の基準とするため */ div.nav ul li{width:20%;float:left;position:relative;} /* リストを横並びさせる 詳細度[0,0,1,2] */ /* この時点では、項目a-hすべてに適用される */ div.nav ul li a{display:block;width:100%;height:100%;background-image:url();} /* a要素をblockに変更してrelativeされている親要素のサイズを基準にheightとwidthを指定 */ div.nav ul li ul li{width:100%;float:none;} /* 二階層目のliについての設定 詳細度が[0,0,1,5]なので上書きされる */ /* この設定は項目b-d,f-gにのみ適用される */ div.nav ul li ul li a{background-position:0 -40px;} div.nav ul li ul{display:none;} /* 二階層目を消す 詳細度[0,0,1,4] */ div.nav ul li:hover ul{display:block;} /* 二階層目を見せる。擬似クラスを使っているので詳細度[0,0,2,4]で上書きされる */ div.nav ul li ul li.current a{} /* 詳細度[0,0,2,6] */ 　このように、より詳しく記述された要素--より高い詳細度での指定が優先されていきます。 */ 　HTMLもCSSも、ここで説明するにはあまりにも多すぎますが、いずれにしろ、仕様書には正確で的確な記述があります。必ず一度は目を通しておきましょう。前回の回答でも、きちんと説明してあったはずです。 ★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) 　→5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 　→6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) 　なお、詳細度については現行のCSS2.1では変更になっています。 　　→6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )

space283
質問者

お礼

こんにちは。前回に続き、お親切な回答をいつもありがとうございます（涙） まず、やっぱり基本的な知識がなっていないのですね・・・。 2010年に発行になっているある書籍を忠実に、多少（勝手な）アレンジを加えて作ったのですが、それ自体危ういのでしょうかね（汗） まだ、こんなに詳しく説明して頂いても、1つの書籍に頼って応用不足の為、今までやってきた記述と違うと「？」になる所が多々あるので、教えて頂いたリンク先をよく読ませて頂いて、今後の為にもORUKA1951さんのソースをしっかり理解したいと思います。プリントアウトして、勉強させて頂きます（笑） 本当にいつも、詳しくご説明頂き、感謝致します・・・。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

<body><!-- idをつける必要はありません、必要ならclass名を --> <div class="nav"><!-- menueという要素はありません 文書構造を示すclass名をつけたdiv navはHTML5ではナビゲーションを示す要素として新設される。--> <ul> 　　<li><a href="#">menu</a> 　　　　<ul> 　　　　　　<li><a href="#">submenu</a></li> 　　　　　　<li><a href="#">submenu</a></li> 　　　　</ul> 　　</li> 　　<li><a href="#">menu</a> 　　　　<ul> 　　　　　　<li><a href="#">submenu</a></li> 　　　　　　<li><a href="#">submenu</a></li> 　　　　</ul> 　　</li> </ul> </div> </body> 　HTMLはこれだけで必要十分です。 #menu #submenu1のような書き方はしません。一意セレクタの対象となるIDは、ページ内の一箇所しか存在し得ないので、子孫セレクタで示す必要はありません。 　

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ページを開いた直後のサブメニューを非表示

    現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとＣＳＳのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }

  • １つの画像を使ったナビゲーションからプルダウン

    <div id="menu"> <ul> <li id="menu01"><a href="＃">profile</a></li> <li id="menu02"><a href="＃">works</a></li> <li id="menu03"><a href="＃" target="_blank">memo</a> <li id="menu04"><a href="＃">link</a></li> </ul> </div> ------- #menu{ width:824px; height:100px; padding:0px; margin: 0px auto 20px;} #menu ul{ list-style:none; width:824px; height:100px;} #menu ul li a{ text-indent:9999px; background:url(img/menu.jpg) no-repeat; display:block; width:206px; height:100px;} #menu ul li { float:left; width:206px; height:100px;} #menu ul li#menu01 a { background-position: 0px 0px; } #menu ul li#menu02 a { background-position: -206px 0px; } #menu ul li#menu03 a { background-position: -412px 0px; } #menu ul li#menu04 a { background-position: -618px 0px; } #menu ul li#menu01 a:hover { background-position: 0px -100px; } #menu ul li#menu02 a:hover { background-position: -206px -100px; } #menu ul li#menu03 a:hover { background-position: -412px -100px; } #menu ul li#menu04 a:hover { background-position: -618px -100px; } ※数字のキリが悪いですが、お気になさらず。 上記のような１つの画像をスライドするナビメニューを作ったのですが、 これをベースに、一箇所メニューからドロップダウンさせる事は可能でしょうか。 また、そのドロップダウンされたメニューはテキストではなく画像が良いです。 バックグラウンドの画像の上にメニューの1つの画像を重ね配置してからドロップダウンさせるなど。。 ほぼ初心者に近い為勝手に思いついたのはこれくらいで、よく分かりません。 ネットで色々と検索をしたのですが、思ったようなものがなく、 何か参考になるようなURL等あれば教えていただけますでしょうか。 できれば分かり易いものがありがたいです。。 また、上記のやり方では根本的に無理だという場合も教えて欲しいです。 よろしくお願いします。

    • 締切済み
    • CSS
  • CSSのプルダウンメニュー

    menu1とmenu2の挙動について疑問があります。 添付画像をご覧ください。 menu2からsub4-1を選択している状態です。 この時、menu2の背景色が赤に戻らないのは仕様でしょうか？ それとも何か間違っているのでしょうか？ 背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。

    • 締切済み
    • CSS
  • html,cssプルダウンメニューについて教えてください。

    html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}

  • CSS #containerについて

    えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に１００％にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです＞＜ どなたか原因がわかる方、対処法わかる方 いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }

    • 締切済み
    • CSS
  • IEでCSSによる背景画像の高さが伸びる原因は？

    2枚の画像で、リンクを行おうとした場合、 div内にh2とulでリンクを行っています。 ところが、高さ（hight）を全てに指定しているにも関わらず、 divが引き伸ばされて、background-imageの不要な部分まで出てきてしまいます。 borderを入れると全体を挟んでいるDIVが何かによって引き伸ばされていますが、なぜIEだと引き伸ばされているのでしょうか？ FIREFOXだと綺麗に表示されます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style> <!-- * { margin:0; padding:0; } h2,ul { text-indent:-9999px; list-style:none; } h2 a { width:175px; height:28px; display:block; } ul a { display:block; width:175px; height:24px; } ul li { padding:0; margin:0; } .float_right { float:right; } .mgn_btm7 { margin-bottom:7px; } div#NAVIBAR { width:175px; margin-top:43px; height:398px; background-image:url(image/test-a.gif); background-repeat:no-repeat; border:1px #FF0000 solid; } h2 a:hover { background-image:url(image/test.gif); background-position:0 0; background-repeat:no-repeat; height:23px; } ul a:hover { background-image:url(image/test.gif); background-repeat:no-repeat; height:23px; } ul a#E:hover { background-position:0 -28px; } ul a#F:hover { background-position:0 -52px; } ul a#G:hover { background-position:0 -76px; } ul a#H:hover { background-position:0 -100px; } ul a#I:hover { background-position:0 -124px; } ul a#J:hover { background-position:0 -155px; } ul a#K:hover { background-position:0 -179px; } ul a#L:hover { background-position:0 -203px; } ul a#M:hover { background-position:0 -227px; } ul a#N:hover { background-position:0 -251px; } ul a#O:hover { background-position:0 -275px; } ul a#P:hover { background-position:0 -299px; } ul a#Q:hover { background-position:0 -323px; } ul a#R:hover { background-position:0 -347px; } ul a#S:hover { background-position:0 -371px; } --> </style> </head> <body> <div id="NAVIBAR" class="float_right"> <h2><a href="#">タイトル</a></h2> <ul class="mgn_btm4"> <li><a href="#" id="E">ああああああ</a></li> <li><a href="#" id="F">いいいいいい</a></li> <li><a href="#" id="G">うううううう</a></li> <li><a href="#" id="H">ええええええ</a></li> <li class="mgn_btm7"><a href="#" id="I">おおおおおおお</a></li> <li><a href="#" id="J">かかかかかか</a></li> <li><a href="#" id="K">きききききき</a></li> <li><a href="#" id="L">くくくくくく</a></li> <li><a href="#" id="M">けけけけけけ</a></li> <li><a href="#" id="N">ここここここ</a></li> <li><a href="#" id="O">ささささささ</a></li> <li><a href="#" id="P">しししししし</a></li> <li><a href="#" id="Q">すすすすすす</a></li> <li><a href="#" id="R">せせせせせせ</a></li> <li><a href="#" id="S">そそそそそそ</a></li> </ul> <hr> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSのみでプルダウンメニューを作りたい

    こんにちは。 WEB制作は全くの素人です。 CSSのみで下記のようなプルダウンメニューを作りたいのですが、 どうにもならず困っています。 http://c-brains.jp/blog/wsg/08/06/05-155929.php 現在使用中のCSS -------------------------------------- #header-menu { height: 23px; background-color: #333333; margin: 0px; padding: 8px 0 0 15px; background: url(img/head_menu_back.gif); background-repeat: repeat-x; text-align: left; width: auto; } #header-menu ul { text-align: left; margin: 0px; padding: 0px } #header-menu li { color: #ffffff; display: inline; padding-left: 13px; padding-right: 8px; background: url(img/l_icon.gif) no-repeat; background-position: left center; } #header-menu a { color: #ffffff; text-decoration: none; } #header-menu a:hover { color: #cccccc; } ------------------------------- 現在使用中のhtml -------------------------------- <div id="header-menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="profile1.html">会社情報</a></li> <li><a href="service1.html">サービス</a></li> <li><a href="ethic1.html">企業理念</a></li> <li><a href="contact1.html">お問合わせ</a></li> <li><a href="job1.html">採用情報</a></li> <li><a href="indexeng.html">English</a></li> </ul> </div> ------------------------------------------------ 上記の各項目に追記しプルダウン式のリストにしたいです。 (カーソルを上にのせるとリストが開っく感じのものを希望します。） 恐れ入りますが、どなたかご教授いただきたくお願い致します。

  • CSSのロールオーバーがIEで崩れます

    CSSのロールオーバーでメニューを制作しています。 背景画像のポジションを変えて、1枚の画像でロールオーバーさせるというよくあるものです。 Mac+Safari、Firefoxではきちんと表示されるのですが、 Win+IE7だと1枚の画像がそのまま表示されてしまい、ロールオーバーになりません。 （IE7しか自宅にないので他のバージョンのIEではどうなるかわかりません。） しかもline-height: 140%;という一行を削除したら1枚べろんと表示されていたところが半分程かくれました。 ロールオーバー自体でなく、他の部分がおかしいのでしょうか？ ちなみに元の画像の高さは20pxで、10pxの画像を上下につなげています。 タイトル画像が120x26で、その横に絶対配置で並べています。 ど素人が手打ちで書いた文章なのでお恥ずかしいのですが、 問題の部分のCSSとhtml、全体のCSS、を以下に載せておきますのでどうぞご教授ください。 （メニュー項目の数等一部省略しているところがあります。） よろしくお願い致します。 /*CSSの記述*/ body{ margin: 0px; text-align: center; } table,tr,td,p,ul,li,h1,h2,h3,h4,h5,h6,input,textarea { line-height; 140%; color: #696969; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 10pt; } div#wrapper{ width: 500px; margin: 40px auto; text-align: left; } div#header{ width: 100%; position: relative; margin-bottom: 30px; } ul#menu{ position: absolute; left: 150px; top: 10px; width: 350px; height: 10px; } ul#menu li{ float: left; height: 10px; margin-right: 15px; } ul#menu li a{ margin: 0; padding: 0; height: 10px; display: block; text-indent: -9999px; outline: none; background-repeat: no-repeat; } ul#menu li a:link, ul#menu li a:visited{ background-position: left top; } ul#menu li a:hover, ul#menu li a:active{ background-position: left bottom; } ul#menu li#top a{ background-image: url(../img/top.gif); width: 32px; } ul#menu li#about a{ background-image: url(../img/about.gif); width: 48px; } ul#menu li#pict a{ background-image: url(../img/pict.gif); width: 37px; } /*HTMLの記述*/ <div id="wrapper"> <div id="header"> <h1><IMG SRC = "タイトル画像" ALT = "" border="0"></h1> <ul id="menu"> <li id="top"><a href="top.html">top</a></li> <li id="about"><a href="about.html">about</a></li> <li id="pict"><a href="pict.html">pict</a></li> </ul> </div> 　～略～ </div>

    • ベストアンサー
    • CSS
  • CSS画像・文字混在縦メニュー

    画像と文字使った縦メニューを作成しています。 レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。 どうぞお知恵をお貸しください。 よろしくお願いいたします。 【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>

    • ベストアンサー
    • HTML
  • cssを使ったロールオーバについて　どちらの記述が良いでしょうか？

    cssを使ったロールオーバについて　どちらの記述が良いでしょうか？ cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。 ---------------------------------------------------------------------- ul.menu { margin:0px 0px 25px 0px; padding:0px; clear:both; float:left; width:200px;} ul.menu li {float:left; width:100px; display:inline; text-indent:-9999px; overflow:hidden; ist-style:none;} ul.menu li a {display:block; width:100px; height:50px;} li.menu1 a {background:url(image/menu.gif) 0 0 no-repeat;} li.menu1 a:hover {background:url(image/menu.gif) 0 -50px no-repeat;} li.menu2 a {background:url(image/menu.gif) -100px 0 no-repeat;} li.menu2 a:hover {background:url(image/menu.gif) -100px -50px no-repeat;} <ul class="menu"> <li class="menu1"><a href="a.html" title="a">a</a></li> <li class="menu2"><a href="b.html" title="b">b</a></li> </ul> ---------------------------------------------------------------------- 表示はそれで上手く行ったのですが、overflow:hidden;を使うとIE7でスクロールバーが出ないんじゃないか？と言われ、下記のように書き直しました。 ---------------------------------------------------------------------- #menu { width:200px; height:50px; margin : 0px 0px 25px 0px ; } #menu h2 {width:100px; height:50px; margin:0; float:left;} #menu h2 a {display:block; width:100px; height:50px; background-image:url(image/menu.gif) ;} a.menu1 { background-position: 0 0 ;} a:hover.menu1 { background-position: 0 -50px ;} a.menu2 { background-position: -100px 0 ;} a:hover.menu2 { background-position: -100px -50px;} <div id="navi"> <h2><a href="a.html" class="menu1" title="a"></a></h2> <h2><a href="b.html" class="menu2" title="b"></a></h2> </div> -------------------------------------------------------- こちらでも表示は出来たのですが、後からIE7で確認した所初めのタグでもスクロールバーは表示出来ました。 とはいえやはり不安ですし後者で行こうかと思ったのですが、後者の場合も<a></a>の間に何もないことが気にかかり決めかねています。詳しい方がいらっしゃいましたら、どっちの方がいいかのアドバイス等頂けないでしょうか。よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する