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

解決済

質問者：kanemitsugenji
質問日時：2010/10/18 23:31
回答数：2件

（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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： abeatc
回答日時：2010/10/27 15:45

position: absolute; で上に重なります。

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

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

- 0
- 件

通報する

この回答へのお礼

abeatc　様

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

通報する

お礼日時：2010/10/27 22:40

No.1

回答者： taro7779
回答日時：2010/10/18 23:58

CSSをください。

この回答への補足

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