ヘッダーの<div>を作って、その下に横長(ヘッダーと同じ長さです)ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20pxほどの隙間が空いてしまいます。なぜでしょうか?マージンを0に設定してもできてしまいます。
また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか?
また、メニューボタンはjavascriptでスワップイメージにしました。
どなたかわかる方いらっしゃいますか?
とても困っています。できましたら至急にお願いいたします。
コードを載せておきます。
<div id="header">
<div id="aa">
<h1>*********</h1>
<h2>*********</h2>
<p>**********<br />
*************</p>
</div><!--aa-->
<div id="bb">
<p>********</p>
</div>><!--bb-->
</div><!--header-->
<!--navi-->
<div id="navi">
<ul #menu>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
</ul>
</div>
<!--navi-->
ヘッダー部分のcss
#header{
width: 800px;
height: 120px;
background-image: ***;
background-repeat: repeat-y;
margin: 0px;
}
ナビ部分のcss
#navi{
width: 800px;
height: 35px;
}
}
ul#menu{
float: right;
display: inline;
margin: 0;
}
li{
float: left;
margin: 0;
No.1ベストアンサー
- 回答日時:
mahalo1114 さんの思いとは別に、ソースがいろいろと間違っているから、上手くいかないんですよ。
css以前に、htmを正しく書きましょう。<ul #menu>とか</div>>とか、ケアレスミスしていませんか?
cssもケアレスミスしています。閉じるべきところは閉じ、閉じすぎているところは削り……、もう一度よくご自分の書かれたソースを点検してみてください。
ありがとうございました。
確かにidが#になっていますね。cssとhtmlが混同してしまってました。
ありがとうございました。
今は隙間はありません。
No.2
- 回答日時:
<div id="header">
□□ □<div id="aa">
<h1>*********</h1>
<h2>*********</h2>
<p>**********<br />
*************</p>
</div><!--aa-->
□□□□<div id="bb">
<p>********</p>
</div>><!--bb-->
</div><!--header-->
<!--navi-->
それだけ全角スペース(□)が入っていたら隙間もできるでしょう。
ありがとうございます。
しかしそれはスペースではありません。
htmlは階層構造に合わせてインデントを入れます。
その方が編集しやすく見やすいからです。
スペースではありません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
<table>の高さ固定。情報増加時...
-
リストの数字のフォントサイズ...
-
jQuery-もっと見るボタンをスマ...
-
html <li>の中の文字一部に色を...
-
HTML5のfooterに見出しを付けて...
-
ulタグやliタグの中でbrタグ...
-
HTMLで組織図を作成する方法
-
<ol><li> 左側にスペースがで...
-
【至急】ul li 行間調整ができ...
-
htmlの<ol>タグで、数字などを...
-
【CSS】メニュー上部に固定させ...
-
IEで<td>の全角を有効にする方法
-
HTMLです
-
Tableの1セル内に画像・テキス...
-
レスポンシブWebデザインでリン...
-
プルダウンメニューの背景色を...
-
真横に展開するドロップダウン...
-
メニューバーのラインの作り方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報