ドロップダウンメニューのCSSでの実装について
- Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。
- 問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される、(2)テキスト分しか表示されない、きちんと画像全体を表示させたい！
- もしよろしければアドバイスお願いします。
- ベストアンサー
ドロップダウンメニューを作るこのCSSどこが変？
お世話になります。 Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目（background-imageがついてくる）が展開していくよくある仕様です。 ネットでの情報を参考にしながら、書いたソースが以下のものですが、 問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される (2)テキスト分しか表示されない、きちんと画像全体を表示させたい！ 個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。 もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。 もしよろしければアドバイスお願いします。 HTML--- <div id="global_nav"> <ul> <li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="#">会社概要</a></li> <li><a href="#">営業所</a></li> </ul> </li> <li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li> </ul> </div> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:2px; } #global_nav ul ul a { font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:40px; width:120px; text-decoration:none; text-align:center; padding:20px 10px 0 10px; } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; }
- toonie
- お礼率26% (55/210)
- CSS
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞ドロップダウンボタン領域時には親ボタンはロールオーバー表示されませんでした。 :hoverしているのは、どの要素でしょう。そしてプルダウンメニュー上に:hoverしているときは、その要素の上にありますか？ ＞これはclearする必要はないのでしょうか？ なんのために？ここで、次に続く要素(回り込む要素)はどこにあるでしょう。 HTMLの構造を簡単に頭に入れて、CSSだけを上から順番に何を選択しているか、セレクタの書き方を読み取ってください。大事なことは理解することです。特に詳細度の計算だけは身につけること。先の回答で示した参照先はよく読んでください。回り道のようですが、実際はもっとも早い方法です。(急がば回れ)
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まあ、理屈さえ知っていれば簡単です。 position:absoluteは直近のstaticでない親コンテナブロックの位置を参照する。 ネット上のサンプルを見るときは、必ず仕様書と照らし合わせて、なぜそうなるかを理解しないと応用は利きません。無駄に時間を浪費するだけです。 ★いくつかの重要なポイント ・折角の【カスケーディング】スタイルシートです。【カスケーディング】はプロパティよりも重要です。 →6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) カスケーディングを理解していれば無用なclass名やidを書かなくて済みます。 ★HTMLはデザインにひこずられたらダメです。きちんと文書構造にしたがってマークアップしましょう。文書構造とプレゼンテーションを切り離すことがスタイルシートの最大の目的です。それが出来れば、後でデザインは自由に出来ます。 →2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) たとえば、サイト全体のナビゲーションは本文セクションに入るのはおかしいのでフッターに入れるべきですが、それでもサンプルのように希望通りデザインできます。 floatでデザインすれば、必ず本文ないしヘッダ直前に入れなければなりませんね。 下記サンプルは、HTML4.01strictです。(HTML5に変更するときは、doctypeを書き換えて、<div class="header">を<header>、同様に<section><nav><footer>にdiv要素を書き換える。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ★なお、＿に戻してください。詳しい説明はソースに書かれていますが、わからないときは仕様書を、まず確認すること。 ★ウィンド巾に関わらず中央に表示されます。i-hone,i-padには文字が小さくなりすぎるけど読めるはず・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;} div.header,div.section,div.footer,div.footer div.nav{ ＿width:720px;margin:0 auto; ＿border:solid 1px silver; } div.header{ ＿height:200px;/* ナビゲーションリンクの位置のため */ ＿margin-bottom:40px;/* ナビゲーションリンク用 */ ＿background-color:silver;/* サンプルのため */ } div.section{ ＿background-color:fuchsia;/* サンプルのため */ ＿min-height:300px; } div.footer div.nav{ ＿position:absolute;top:200px;height:40px;/* 置き場所とサイズを指定する。 */ ＿font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; ＿line-height:40px;/* 継承されるプロパティなので */ ＿text-align:center; ＿background-color:black;/* サンプルのため */ } div.footer ul,div.footer ul li{ ＿display:block;list-style:none;/* リストをブロックにする */ ＿margin:0;padding:0; } div.footer ul li{ ＿width:118px;float:left; ＿position:relative;/* 子孫要素の基準点 */ } div.footer ul li a{/* 子孫セレクタで下位のaにも適用、詳細度[0,0,1,4] */ ＿display:block; ＿width:100%;height:100%; ＿text-decoration:none; ＿color:#FFF; } div.footer ul li ul{ ＿font-size:75%; ＿position:absolute;top:40px;left:0;/* static以外の直近の親コンテナブロックを基準に */ ＿display:none; /* 消す */ } div.footer ul li ul li{ ＿height:60px;width:140px; ＿background-image:url(../images/dawnmenu_button.gif); } div.footer ul li:hover{/* 詳細度[0,0,2,3] */ ＿background-color:rgb(255,160,0); } div.footer ul li ul li:hover{/* 詳細度[0,0,2,5] */ ＿background-color:transparent;/* 前の設定を消す */ } div.footer ul li ul li a{/* 必要なもののみ上書き。詳細度[0,0,1,6] */ ＿padding-top:20px;/* 画像の吹き出し部分 */ } div.footer ul li:hover ul{ ＿display:block; } div.footer{ ＿background-color:yellow;/* サンプルのため */ } div.footer div.nav ul li:hover ul li+li:before{ /* おまけ */ ＿white-space:pre; ＿position:absolute; ＿top:-50px;left:150px; ＿padding:0.5em 1em; ＿width:auto;text-align:left; ＿border:dotted 1px gray; ＿background-color:white; ＿line-height:1.4em; ＿content:"Aボタンにマウスオンすると\A下部にダウンメニューが出てくるようにしたい。\Aダウンメニューはテキストリンク、でもbackground-image\Aで表現したい。"; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<div class="nav"><!-- ナビゲーションはnav --> ＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/">TOP</a></li> ＿＿＿＿＿＿<li class="botanA"><a href="./profile">会社情報</a> ＿＿＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿＿＿<li><a href="./profile/index.html">会社概要</a></li> ＿＿＿＿＿＿＿＿＿＿<li><a href="./profile/office.html">営業所</a></li> ＿＿＿＿＿＿＿＿</ul> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li><a href="./B">Bボタン</a></li> ＿＿＿＿＿＿<li><a href="./C">Cボタン</a></li> ＿＿＿＿＿＿<li><a href="./D">Dボタン</a></li> ＿＿＿＿＿＿<li><a href="./E">Eボタン</a></li> ＿＿＿＿</ul> ＿＿</div> ＿</div> </body> </html>
お礼
詳しい回答本当にありがとうございます。 実際のサンプルもとても参考になりました、感謝します。 詳細に説明くださったのに、カスケーディングという概念がいまいちよく分からなくて、リンクページも読ませていただきましたが、正直なところ？でした。申し訳ないです。 それでも、一応ORUKA1951さんのソースを参考にさせてもらいながら、記述してみたのが、以下のソースです。 ２点ほど疑問が出てきました。 (1) ORUKA1951さんのソースでは、その他のボタンと同じくドロップダウンボタンの記述ありの親ボタン、そしてul li ul liの第二階層のボタンどちらにもカーソルオンしている状態の時にも親要素のボタンはロールオーバーしていましたが、私の記述の仕方に問題ありなのでしょう、親ボタンの領域にカーソルオンした時はOKでしたが、ドロップダウンボタン領域時には親ボタンはロールオーバー表示されませんでした。 これはどうしたら解決できるのでしょうか... (2) それと、#global_nav ul li のCSSでfloatしていますが、これはclearする必要はないのでしょうか？ もしよろしければ再度ご教授ください。 HTML--- <nav id="global_nav"> <ul> <li><a href="index.html"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_07.gif" alt="店舗紹介ボタン" class="btn"/></a> <ul> <li><a href="#">Aページ</a></li> <li><a href="#">Bページ</a></li> <li><a href="#">Cページ</a></li> </ul> </li> <li><a href="#"><img src="images/button_08.gif" alt="ご利用案内ボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_09.gif" alt="説明ボタン" class="btn"/></a></li> <li><a href="blog.html"><img src="images/button_10.gif" alt="ブログボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_11.gif" alt="お問い合わせボタン" class="btn"/></a></li> </ul> </nav> CSS--- #global_nav { width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; border:0; } #global_nav ul, #global_nav ul li { list-style:none; display:block; margin:0; padding:0; } #global_nav ul li { width:120px; position:relative; float:left; } #global_nav ul li a { clear:both; display:block; width:100%; height:100%; } #global_nav ul li ul { display:none; position:absolute; top:52px;left:0; } #global_nav ul li ul li a{ width:120px; height:30px; color:#FFFFFF; font-size:0.75em; font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; line-height:30px; text-align:center; background-image:url(../images/dawnmenu_button.gif); text-decoration:none; padding-top:0px; } #global_nav ul li ul li a:hover { background-image:url(../images/dawnmenu_button02.gif); } #global_nav ul li:hover ul{ display:block; } それと、今回記述しているDOCTYPEはXHTML1.0 Traditionalです。
- DrFell
- ベストアンサー率55% (305/551)
(1)ダウンメニューにしたいのにむしろ上部へ表示される この問題は再現されませんでした。他のｃｓｓの指定が継承されているものと思われます。試しに、ここに挙げたものだけで、独立したファイルを作り表示させてみてください。下に垂れると思います。 (2)テキスト分しか表示されない、きちんと画像全体を表示させたい！ #global_nav ul ul a { に対する指定ですよね？a要素はインライン要素です。つまり、高さや幅を持てませんので、heightやwidthに対する指定は無視されます。インライン要素とブロックレベル要素の違いの把握は重要です。基礎を復習してください。 で、この「#global_nav ul ul a {」内に、display:block;を入れるとheight:40px;width:120px;の画像でしたら表示されるようになるでしょう。html的にはインライン要素だけど、表示はブロックライン要素として表示するという意味です。
お礼
回答ありがとうございます！ display:blockこれか！ 非常に基礎的なことだと思いますが、いまいちこの要素の役割がよく分からなくて...でも今回の説明で復習することができました。 ありがとうございます!!
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLちゃんと書かなきゃ・・ <div class="nav"><!-- ナビゲーションはnav --> <ul> <li><a href="/">TOP</a></li> <li><a href="./profile">会社情報</a> <ul> <li><a href="./profile/index.html">会社概要</a></li> <li><a href="./profile/office.html">営業所</a></li> </ul> </li> <li><a href="./B">Bボタン</a></li> <li><a href="./C">Cボタン</a></li> <li><a href="./D">Dボタン></a></li> <li><a href="./E">Eボタン</a></li> </ul> </div> もちろん、画像でもよいが・・・ class名をnavにしたのは、HTML5では <nav id="global_nav"><!-- ナビゲーションはnav --> <ul> <li><a href="/">TOP</a></li> <li><a href="./profile">会社情報</a> <ul> <li><a href="./profile/index.html">会社概要</a></li> <li><a href="./profile/office.html">営業所</a></li> </ul> </li> <li><a href="./B">Bボタン</a></li> <li><a href="./C">Cボタン</a></li> <li><a href="./D">Dボタン></a></li> <li><a href="./E">Eボタン</a></li> </ul> </nav> と書かなければならないからです。 あとはスタイルシートを書くだけ。シンプルでしかも、どのようにでもデザインできます。デザインのためにHTMLを書くとHTMLもスタイルシートも複雑になる。そしてデザインを変えるときHTMLまで書き直さなきゃならなくなる。それじゃスタイルシートを導入する意味がない。 今晩は遅いので寝る。明日の夜にでも続きを
関連するQ&A
- プルダウンボタン実装後ロールオーバーしない親ボタン
お世話になります。 連日CSSとJavaScriptのことで質問させていただいている者です。 皆様のご親切で、すこしずつ理想のCSSを記述することができています、ありがとうございます。 さて、またボタンのドロップダウン機能関連のCSSのことでひとつ疑問が出てきましたので、皆様のお知恵を再度拝借させていただきたく質問させていただきました。 現在添付画像のように、Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様を作りたいと考えています。親ボタンはカーソルオンさせるとロールオーバーさせたいと、http://www.kyosuke.jp/yugajs/で配布されているyuga.jsというファイルを利用させていただいております。 ドロップダウンボタンはきちんと表示されるようになったのですが、問題はそのドロップダウンボタン機能を記述した親ボタンのみ、ロールオーバーしなくなってしまいました。他のボタンは通常通りロールオーバーしてくれます。できたら親ボタン、またドロップダウンボタン領域にカーソルオンしている時は親ボタンは常にロールオーバーさせていたいと思っています。そのような仕様にするにはどうしたらいいでしょうか。どうかアドバイスいただけたらうれしいです、よろしくお願いします。 HTML--- <nav id="global_nav"> <ul> <li><a href="index.html"><img src="images/button_top.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="002.html"><img src="images/button_a.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="007.html">サブページ01</a></li> <li><a href="008.html">サブページ02</a></li> <li><a href="009.html">サブページ03</a></li> </ul> </li> <li><a href="003.html"><img src="images/button_b.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="004.html"><img src="images/button_c.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="005.html"><img src="images/button_d.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="006.html"><img src="images/button_e.gif" alt="Eボタン" class="btn"/></a></li> </ul> </nav> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:52px; } #global_nav ul ul a { display:block; font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:25px; width:120px; text-decoration:none; text-align:center; padding-top:5px; } #global_nav ul ul a:hover { background-image:url(../images/dawnmenu_button02.gif); } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; } Java Script(yuga.js)---(一部抜粋です) $(function() { $.yuga.rollover(); $.yuga.externalLink(); $.yuga.thickbox(); $.yuga.scroll(); $.yuga.tab(); $.yuga.stripe(); $.yuga.css3class(); }); //ロールオーバー rollover: function(options) { var c = $.extend({ hoverSelector: '.btn, .allbtn img', groupSelector: '.btngroup', postfix: '_on' }, options); //ロールオーバーするノードの初期化 var rolloverImgs = $(c.hoverSelector).filter(isNotCurrent); rolloverImgs.each(function(){ this.originalSrc = $(this).attr('src'); this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2"); this.rolloverImg = new Image; this.rolloverImg.src = this.rolloverSrc; }); //グループ内のimg要素を指定するセレクタ生成 var groupingImgs = $(c.groupSelector).find('img').filter(isRolloverImg); //通常ロールオーバー rolloverImgs.not(groupingImgs).hover(function(){ $(this).attr('src',this.rolloverSrc); },function(){ $(this).attr('src',this.originalSrc); }); //グループ化されたロールオーバー $(c.groupSelector).hover(function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.rolloverSrc); }); },function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.originalSrc); }); }); //フィルタ用function function isNotCurrent(i){ return Boolean(!this.currentSrc); } function isRolloverImg(i){ return Boolean(this.rolloverSrc); }
- ベストアンサー
- CSS
- <li>でドロップダウンボタンを真下表示するには？
お世話になります。以下の問題を解決したいのですが、以下のソースでどこが間違っているのか教えていただけないでしょうか。 (1)メニューボタンをhoverすると、<ul><li>の下の階層のリスト<ul><li><ul><li>をドロップダウンボタンとしてそのボタンの真下に表示されるようにしたいのですが、横並びに配置されてしまいます。 親<ul>のdisplay:blockは<ul><li><ul>でdisplay:noneしているのですが、原因は何でしょうか？ またその際(2)hover時にドロップダウンボタンのlist-style-imgも一緒にロールオーバーさせたい。 (3)メニューが少し長いタイトルで2行になってもlist-style-img画像分は空白があるようにしたい。 という仕様を実然させたいのですが、どうかご教授いただけないでしょうか。 分かりやすく説明すると添付ファイルのようなことを実現させたいです。 よろしくお願いします。 HTML--- <div id="menu_nav"> <ul> <li><a href="#"><img src="images/menu-nav/menu_navi-01.jpg" alt="説明文"/></a></li> <li><img src="images/menu-nav/menu_navi-02.jpg" alt="ブライトが選ばれる理由" /> <ul> <li><a href="#">豊富な施工実績</a></li> <li><a href="#">完全自社施工<br />自慢の職人たち</a></li> <li><a href="#">安心の保険制度</a></li> </ul></li> <li><img src="images/menu-nav/menu_navi-03.jpg" alt="説明文" /> <ul> <li><a href="#">防水工事</a></li> <li><a href="#">外壁塗装</a></li> </ul></li> <li><img src="images/menu-nav/menu_navi-04.jpg" alt="説明文" /> <ul> <li><a href="#">実績01</a></li> <li><a href="#">実績02</a></li> </ul></li> <li><img src="images/menu-nav/menu_navi-05.jpg" alt="説明文" /> <ul> <li><a href="#">よくあるご質問</a></li> <li><a href="#">お客様のお声</a></li> </ul></li> <li><img src="images/menu-nav/menu_navi-06.jpg" alt="説明文" /> <ul> <li><a href="#">代表者挨拶</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">個人情報保護について</a></li> <li><a href="#">求人募集</a></li> </ul></li> <li><a href="#"><img src="images/menu-nav/menu_navi-07.jpg" alt="説明文" /></a></li> </ul> </div> CSS--- #menu_nav { clear:both; height:56px; background-image:url(../images/bg/bg_15.jpg); background-repeat:repeat-x; background-position:top center; } #menu_nav ul { width:960px; display:block; list-style:none; margin:auto; padding:0; } #menu_nav ul li { float:left; position:relative; } #menu_nav ul li a { clear:both; display:block; width:100%; height:100%; } #menu_nav ul li ul { display:none; position:absolute; top:56px; left:0; list-style-image:url(../images/contents/dropdown_btn_30.gif); list-style-position:inside; } #menu_nav ul li ul li a { color:#000000; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic,P r o " , " O s a k a " , " メイリオ" , " M e i r y o " , " Ｍ Ｓ Ｐ ゴシック","MSPGothic",sans-serif; font-size:0.75em; background-color:#FFFFFF; width:125px; padding:5px 5px 5px 5px; border:1px solid #d83434; text-align:left; text-decoration:none; } #menu_nav ul li ul li a:hover { color:#FFFFFF; background:#d83434; } #menu_nav ul li:hover ul{ display:block; }
- ベストアンサー
- CSS
- ドロップダウンの残像
どなたか教えていただけないでしょうか。 ドロップダウンメニューを設置した所、一部のメニューで残像が残ります。 【css】 ul.menu { width: 960px; position: relative; list-style:none; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#fff; text-decoration:none; font-weight: bold; } ul.menu li.a { position: relative; float:left; } ul.menu ul { position:absolute; top:50px; left: 4px; background: url(../images/navi/bg.png) repeat; display:none; opacity:0; list-style:none; border: 1px solid #ccc; } ul.menu ul li { position:relative; border-top:none; width:150px; margin:0; border-top: 1px solid #bad7dd; } ul.menu ul li a { display:block; padding:3px 7px 5px; background: url(../images/navi/bg.png) repeat; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } ul.menu ul ul { left:160px; top:-1px; } ul.menu .menulink { width:160px; } ul.menu .topline { border-top:1px solid #aaa; } 【html】 <ul class="menu" id="menu"> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> </ul> png画像を使って背景透過をしています。 htmlとかcssは勉強中です…宜しくお願いします。
- ベストアンサー
- HTML
- IE6、7で途切れてしまう画像
分からない部分が出た際にいつもお世話になっております。 今回もどなたかご回答頂けますと幸いです。 グローバルナビゲーションを中央揃えにして表示させようとしているのですが、 IE6と7で確認したときになぜか下部分が途切れてしまいます（1pxくらい？） 高さは指定している筈なのですが… 【html】 <div id="global-nav"> <ul> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="191" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="193" height="43" /></a></li> </ul> </div> 【css】 div#global-nav { position:relative; height: 43px; background:url(../common/navi_bg.jpg) repeat-x center bottom; overflow:hidden; } div#global-nav ul { position:relative; left:50%; float:left; list-style-type:none; } div#global-nav li { position:relative; left:-50%; float:left; } 宜しくお願いします。
- 締切済み
- HTML
- CSSのみで作る横ドロップダウンメニュー
教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }
- 締切済み
- HTML
- 【CSS】右側エリアがずれ込む
CSS初心者で、会社のサイトの変更をしています。 現状メイン画像1枚のレイアウトだったところを 差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。 はめ込んだところ、右側のボタンがずれ込みます。 何をどうしたら解決できるかわかりません。 どうしたら修正できますでしょうか。 よろしくお願い申し上げます。 ≪修正前のレイアウト≫ □□□□□□□□□ ■■■■■ □□メイン画像□□ ■ボタン■ □□□□□□□□□ ■■■■■ 【HTML】 <div id="keySpace"> <p> <a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS外部】 #keySpace { width: 860px; margin: 0px auto; padding: 0px 0px 7px; background: #FFF; } #keySpace p { width: 643px; margin: 0px 12px 0px 0px; float: left; display: inline; } #keySpace ul { width: 205px; float: right; } #keySpace ul li { margin: 0px 0px 3px; } ≪修正後のレイアウト≫ □□□□□□□□□ □□メイン画像□□ □□□□□□□□□ ■■■■■ ■ボタン■ ■■■■■ 【HTML】 <div id="keySpace"> <p> <div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div> <div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div> </p> <ul> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS】上記に追加 <style type="text/css"> .banner { display:none; } </style>
- ベストアンサー
- HTML
- リストを一行にせずに横並びにする方法
リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか？ ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>
- 締切済み
- HTML
- cssスプライト positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？ どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
- CSSで画像を横並びに
CSSで画像を3枚横並びにしたいのですが、 IEで見ると右肩下がりになってしまいます。 詳しくないので、教えていただけると幸いです。 ◆html <ul> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgl30 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgt10"></a></li> </ul> ◆css .fleft { float:left } .mgr42{ margin-right:42px } .mgl30{ margin-left:30px } .mgt10{ margin-top:10px }
- ベストアンサー
- CSS
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
お礼
いつもありがとうございます。 ＞回り道のようですが、実際はもっとも早い方法です。 本当ですね、理解して記述するとしないのとでは応用力が全く違いますよね。基本的なところで足踏みしていますが、地道に勉強していきたいと思います。 ありがとうございました。