メニューバーのプルダウンの高さ分が下にずれる

前へ 次へ
このQ&Aのポイント
  • HP作成をはじめて３週間たらずの者が、メニューバーのプルダウンの高さがずれる問題に困っています。
  • HTMLの構成はヘッダー、プルダウン形式のメニューバー、フラッシュ、コンテンツの順です。
  • 解決策として、positionを利用することが考えられますが、具体的な使い方が分からず質問しています。
回答を見る
  • ベストアンサー

（HP作成）メニューバーのプルダウンの高さ分が下にずれる。

（HP作成）メニューバーのプルダウンの高さ分が下にずれる。 お世話になります。独学でHPの作成をはじめて３週間たらずの者です。 色々試行錯誤しているのですが分からず困っております。 どなたかご教授頂ければ幸いです。 (1)ヘッダー、(2)プルダウン形式のメニューバー、(3)フラッシュ、(4)コンテンツという構成のHPです。 ＜質問＞ メニューバーのプルダウンの高さ分が下にずれる。言い方を変えると、 本来、フラッシュやコンテンツを配置したい場所から、プルダウンの高さ分が下方へずれる。 恐らく、positionを利用すれば解決できると思うのですが、どこでどう使えば良いのかが、 分かりません・・・。不明な点がありましたら、質問ください。 下記がHTMLです。CSSは追加で掲載します。 <body> <div id="wrapper"> <div id="header"> <h1><img src="image/header.gif" width="960" height="100"/></h1> <!--/#header--></div> <!--[if IE 6]><div><![endif]--> <div id="navibar"> <ul> <li ><div id="btn01"><a href="#">ミッション</a></div></li> <li><div id="btn02"><a href="#">講師紹介</a></div></li> <li onmouseover="document.getElementById('pull').style.visibility='visible'" onmouseout="document.getElementById('pull').style.visibility='hidden'"> <div id="btn03"><a href="#">事業内容</a></div> <ul id="pull"> <li> <div id="pull01"><a href="#">各種セミナー・講演</a></div> </li> <li> <div id="pull02"><a href="#">コーチング</a></div></li> <li> <div id="pull03"><a href="#">カウンセリング</a></div></li> </ul> </li> <li><div id="btn04"><a href="#">お客様の声</a></div></li> <li><div id="btn05"><a href="#">よくある質問</a></div></li> <li><div id="btn06"><a href="#">お問合せ</a></div></li> </ul> <!--/#navibar--></div> <!--[if IE 6]><div><![endif]--> <div id="flash"> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="960" height="350"> <PARAM NAME=movie VALUE="xxx.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent> <param name="BGCOLOR" value="#D6D6D6" /> <EMBED src="xxx.swf" width="960" height="350" quality="high" bgcolor="#D6D6D6" wmode="transparent"> </OBJECT> <!--/#flash--></div> <div id="contents"> <p><img src="image/topicbnr.gif" width="960" height="40" alt="新着情報" /></p> <!--/#content--></div> <!--/#wrapper--></div> </body>

  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • abeatc
  • ベストアンサー率60% (6/10)
回答No.2

position: absolute; で上に重なります。 jQueryのプラグインにもありますが、 今回の質問で、参考になりそうなサイト書いときます。

参考URL：
http://10plate.blog44.fc2.com/blog-entry-230.html
kanemitsugenji
質問者

お礼

abeatc　様 　なんとか解決いたしました。 貴重な情報どうもありがとうございます！

その他の回答 (1)

  • taro7779
  • ベストアンサー率0% (0/1)
回答No.1

CSSをください。

kanemitsugenji
質問者

補足

CSSです。なお、ズレを確認できているプラウザはIE6,7,8（IETesterで確認）。 /* Browser Default*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } img, abbr, acronym, fieldset { border: 0; vertical-align: bottom; } li { list-style-type: none; } /*Browser Default Initialization */ body { background-image:url(../image/bg_top.jpg); background-repeat:no-repeat; background-position: center top; } div#wrapper { width: 960px; margin-right: auto; margin-left: auto; } #navibar { width:960px; height:45px; } *html #navibar { background-color:transparent; } #navibar ul { margin:0; padding:0; list-style-type:none; } #navibar li { width:160px; float:left; } #btn01 a { background-image: url(../image/menu1.jpg); background-repeat: no-repeat; background-position: center center; display: block; height: 45px; width: 160px; text-indent: -9999px; } #btn01 a:hover { background-image: url(../image/menu1_on.jpg); } #btn02～06について、上記２つの繰り返し #navibar ul ul li { width:160px; float:left; } #navibar ul ul { visibility:hidden; } #pull01 a { background-image: url(../image/pull1.jpg); background-repeat: no-repeat; background-position: center center; display: block; height: 35px; width: 160px; text-indent: -9999px; } #pull01 a:hover { background-image: url(../image/pull1_on.jpg); } #pull02～03について、上記２つの繰り返し div#flash { width: 960px; height:350px; margin-top:9px; clear:both; } div#contents { width: 960px; margin-top:20px; height: auto; }

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

関連するQ&A

  • jqueryでのプルダウンメニューについて

    jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示（CSSでやってます）です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか？ html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。

  • プルダウンのメニュー表示について

    JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 　●メニュー1-1　　●メニュー1-2 　●メニュー1-3　　●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> 　　<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> 　　<div class="tree_sub"> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-1</li> 　　　　　　<li>●メニュー1-2</li> 　　　　</ul> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-3</li> 　　　　　　<li>●メニュー1-4</li> 　　　　</ul> 　　</div> </div> <div class="tree"> 　　<a href="#">○メニュー2</a> </div> [css] div.tree { 　　border-bottom:1px solid #000000; 　　width:365px; } div.tree_sub ul li { 　　float:left; } div.tree_sub ul li.left { 　　width:50%; }

  • 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;}

  • メニューバーが消えて困っています。

    メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML；<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <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="#">About US</a> <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="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p>　　　　←　問題の箇所、中盤から始まる。 CSS： /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }

    • ベストアンサー
    • CSS
  • Javascriptでプルダウンメニューを作りましたが関数化できません

    <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。 初期状態では1の部分が開く。 それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。 縦長のプルダウンメニューです。 たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。 困っています。教えてください。

  • ブラウザでjavascriptのプルダウンメニューが効かない！？

    初めての症状なのですが、、 グローバルメニューの部分でプルダウンメニューを使っているサイト（プルダウン部分はjavascriptを使っています）をサーバーにアップしたのですが、 サーバー上で、プルダウンメニューがでてきません。作動しません。。 ローカルでは、firefox, IE, safari, 全て動作確認済みなのですが、、 もちろん、jsファイルもアップしてあります。 他のポップアップウィンドウなどで使用しているjavascriptは正常に動いてるようなのですが、、、 このような現象ありえるのでしょうか？ どなたかお分かりになる方がいらっしゃいましたら、ご教授願えないでしょうか？宜しくお願い致します。 ちなみにプルダウン部分のhtmlです。 javascriptは外部から読み込むようにしてます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta name="keywords" content="Australia, restaurant"> <meta name="description" content="ーー料理" /> <title>Salt | Access</title> <link href="css/import.css" rel="stylesheet" type="text/css" media="all" /> <script src="js/SpryMenuBar.js" type="text/javascript"></script> <script type="text/javascript"><!-- window.onload = function(){ new Spry.Widget.MenuBar("MenuBar1"); } // --></script> </head> <body> <div id="bg2"> <div id="wrapper"> <div id="header"> <div id="h1"><a href="index.html"><img src="img/img_logo.jpg" alt="Salt" width="89" height="83" border="0" /></a></div> <div id="navi" lang="en"> <ul id="MenuBar1" class="MenuBarHorizontal clearfix"> <li id="orange_menu"></li> <li class="first"><a href="index.html" id="first_hover" class="MenuBarItemSubmenu">Top</a></li> <li class="first"><a href="concept.html" id="first_hover" class="MenuBarItemSubmenu">Concept</a></li> <li class="first"><a href="food.html" id="first_hover" class="MenuBarItemSubmenu">Food</a> <ul> <li><a href="lunch3500.html">Lunch</a> <ul> <li><a href="lunch3500.html">Lunch Course 3500</a></li> <li><a href="food.html">Lunch Course 5000</a></li> </ul> </li> <li><a href="raw.html">Dinner</a> <ul> <li><a href="raw.html">Entrees</a></li> <li><a href="main.html">Mains</a></li> <li><a href="vegetable.html">Vegetable Menu</a></li> <li><a href="degustation.html">Degustation</a></li> <li><a href="desserts.html">Desserts and Cafe</a></li> </ul> </li> <li><a href="holiday.html">Holiday Course</a></li> </ul> </li> <li class="first"><a href="wine.html" id="first_hover" class="MenuBarItemSubmenu">Wine</a> <ul> <li><a href="wine.html" class="MenuBarItemSubmenu">Glass</a></li> <li><a href="bubbly_pink.html">Bubbly and PINK</a></li> <li><a href="maritime_white.html">White</a> <ul> <li><a href="maritime_white.html">Maritime</a></li> <li><a href="mediterranean_white.html">Mediterranean</a></li> <li><a href="Altitude_white.html">Altitude</a></li> </ul> </li> <li><a href="maritime_red.html">Red</a> <ul> <li><a href="maritime_red.html">Maritime</a></li> <li><a href="distinctively_red.html">Distinctively Cool</a></li> <li><a href="old_vine.html">Old Vine</a></li> </ul> </li> <li><a href="stickies.html">Stickies</a></li> </ul> <li class="first"><a href="spaces.html" id="first_hover" class="MenuBarItemSubmenu">Spaces</a></li> <li class="first"><a href="access.html" id="first_hover" class="MenuBarItemSubmenu">Access</a></li> <li class="first"><a href="http://www.sweet-w.com/space/salt.html" id="first_hover" class="MenuBarItemSubmenu">Wedding</a></li> <li id="menu_right"></li> </ul> </div> 以下続く。。。

  • mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい

    javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして 　単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、 　2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）

  • 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
  • ＨＰ作成

    HP作成について困ってます；； <div id="sub"> <div class="frame"> <h3><img height="46" alt="" src="sub_midashi_moji.gif" width="252" border="0"></h3> <ul id="fsize"> <li id="la"><a title="文字サイズ「大」" onclick="setActiveStyleSheet('la'); return false;" href="#">文字サイズを「大」にする</a> </li> <li id="me"><a title="文字サイズ「中」" onclick="setActiveStyleSheet('me'); return false;" href="#">文字サイズを「中」にする</a> </li> <li id="sm"><a title="文字サイズ「小」" onclick="setActiveStyleSheet('sm'); return false;" href="#">文字サイズを「小」にする</a> </li></ul></div> このタグを入れてもブラウザに表示されないのはなぜですか？スタイルシートもいれてあるんですが；

  • オンマウス時の画像表示がおかしい

    作成中のホームページのボタン表示を 左側に縦に10個ほどな食べ CSSを使用してマウスを乗せた時にJPG画像を切り替えるように していますが、マウスを乗せた時に 本来表示されないはずの画像ボタンが一瞬表示されてしまいます。 トップページボタンの上にマウスを乗せたあとマウスをサイトマップボタンの 上に移動するとまたトップページの画像が一瞬表示されてしまう どうやら直前に表示した画像が表示されているみたいです どうしたらこの不具合が解消できるのでしょうか？ どなたかお力添えお願いいたします HTML <div id="navibar"> <ul> <li> <div id="btn00"><a href="index.html">Top</a></div> </li> <li> <div id="btn01"><a href="contents.html">システム</a></div> </li> <li> <div id="btn02"><a href="ryoukin.html">料金</a></div> </li> <li> <div id="btn03"><a href="shiryou.html">資料請求</a></div> </li> <li> <div id="btn04"><a href="privacy.html">プライバシーポリシー</a></div> </li> <li> <div id="btn05"><a href="hyouji.html">会社概要</a></div> </li> <li> <div id="btn06"><a href="sample.html">サンプル</a></div> </li> <li> <div id="btn07"><a href="merit.html">メリット</a></div> </li> <li> <div id="btn08"><a href="yougo.html">専門用語</a></div> </li> <li> <div id="btn09"><a href="syoukai.html">紹介制度</a></div> </li> <li> <div id="btn10"><a href="map.html">サイトマップ</a></div> </li> </ul> </div> CSS #navibar #btn00 a { height: 28px; width: 180px; display: block; text-indent: -9999px; background-image: url(btntop.jpg); margin-bottom: 1px; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する