![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
(HP作成)メニューバーのプルダウンの高さ分が下にずれる。
お世話になります。独学でHPの作成をはじめて3週間たらずの者です。
色々試行錯誤しているのですが分からず困っております。
どなたかご教授頂ければ幸いです。
(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>
No.2ベストアンサー
- 回答日時:
position: absolute; で上に重なります。
jQueryのプラグインにもありますが、
今回の質問で、参考になりそうなサイト書いときます。
参考URL:http://10plate.blog44.fc2.com/blog-entry-230.html
No.1
- 回答日時:
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について、上記2つの繰り返し
#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について、上記2つの繰り返し
div#flash {
width: 960px;
height:350px;
margin-top:9px;
clear:both;
}
div#contents {
width: 960px;
margin-top:20px;
height: auto;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
ページを開いているときのリン...
-
WordPress 新しいカテゴリに過...
-
liタグの中に<p>タグやら<dl>を...
-
html <ul></ul>の並びで一行空...
-
リンク文字同士の間隔を開ける...
-
CSS li float 2列組み
-
<div>と<div>の隙間を無くす方法
-
dlタグの中にdivは使える?
-
<ol><li> 左側にスペースがで...
-
<table>の高さ固定。情報増加時...
-
透明のボックスにリンクを貼りたい
-
隙間をなくすには?
-
ホームページビルダーで同じ行...
-
アコーディオンメニューがかく...
-
vertical-align:middleをFirefo...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
HTML ul li で横並びにナビゲー...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
HTMLで組織図を作成する方法
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
HTML5のfooterに見出しを付けて...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
ボタンを横に並べて表示させる方法
-
html <ul></ul>の並びで一行空...
-
画像にリンクを張ると画像がず...
-
アコーディオンメニューがかく...
-
ulとliで囲った文字の一部を変...
-
レスポンシブWebデザインでリン...
-
htmlの<ol>タグで、数字などを...
おすすめ情報