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

2010/10/18 23:31

この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> </div>  <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> </div>  <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> </div> <div id="contents"> <p><img src="image/topicbnr.gif" width="960" height="40" alt="新着情報" /></p> </div> </div> </body>

kanemitsugenji
お礼率50% (1/2)

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

みんなの回答 （2）
専門家の回答

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

ベストアンサー

abeatc
ベストアンサー率60% (6/10)

2010/10/27 15:45 回答No.2

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

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

質問者

お礼 2010/10/27 22:40

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

taro7779
ベストアンサー率0% (0/1)

2010/10/18 23:58 回答No.1

CSSをください。

質問者

補足 2010/10/19 00:10

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

ログインすると、全ての回答が全文表示されます。