ナビゲーションの書き方（HTML、CSS）

解決済

質問者：km1342
質問日時：2009/12/12 13:39
回答数：2件

以下のように書いているのですが、バックグラウンドの所（#navbar）と、
文字を入れている所（#navbar li a）のところがきれいに重なって
表示するようにできません。
どなたか教えて頂ければ幸いです。宜しくお願いします。

■HTML

<div id="navbar">
<ul>
<li id="top"><a href="#" title="#">ＴＯＰ</a></li>
<li id="basic"><a href="#" title="#">基本</a></li>
</ul>
</div>

■CSS
#navbar {
background-image:url(../images/navbar.gif);
padding:0px;
width:1000px;
height:35px;
float:left;
border:solid 1px #D5D5D5;
border-bottom:5px solid #66CC33;
}
#navbar ul{
margin-left: 0px;
}
#navbar li{
float:left;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
letter-spacing:1px;
line-height:35px;
list-style-type:none;
width:75px;
color:#666666
}
#navbar li a {
float:left;
font-weight:600;
font-size:12px;
display:block;
height:35px;
border-right:solid 1px #D5D5D5;
width:74px;
}
#navbar li#top {
width:55px;
}
#navbar li#top a {
width:54px;
}
#navbar li#basic {
width:55px;
}

通報する

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

質問の本文を隠す

回答 (2件)

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2009/12/12 23:39

　シンプルなソースを上げておきます。

注意点は必要なところに書いてある。<HTML4.01 strict>です。
★リンクのあるメニューと現ページのフォントを変えると判断しました。
★リストの幅は統一してあります。
★リンクはそのブロック全体を占めるようにしてあります。
★<div id="navbar">は将来のHTML5で導入される見込みの<nav>に書き換
　えることを想定し、<div class="nav">にしてあります。

なお、見やすいためタブを全角スペースに置き換えてありますから、テストするときは全角スペースをタブに置換してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
　　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
　　<title>Untitled</title>
　　<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">

</style>
</head>
<body>
　　<h1>title</h1>
　　<h2>subTitle</h2>
　　<div class="Text">
　　　　<h2>ArticleTitle</h2>
　　　　<p>
　　　　</p>
　　</div>
　　<hr>
　　<div class="nav">
　　　　<ul>
　　　　　　<li><a href="/index.html" title="TOPへ">ＴＯＰ</a></li>
　　　　　　<li><a href="/book/" title="書籍">書籍</a></li>
　　　　　　<li><a href="/product/" title="製品">製品</a></li>
　　　　　　<li>このページ</li>
　　　　　　<li><a href="/contactUs/" title="コンタクト">コンタクト</a></li>
　　　　</ul>
　　</div>
　　<hr>
</body>
</html>