グローバルナビの画像のサイズ変更方法

質問

グローバルナビのサイズ指定をして大枠のwidthを1000pxにして、ひとつひとつのナビのサイズを200px×5で調節して1000pxでナビ同士の横の隙間を無くすように合わせたいです。
自分なりにやってみたのですが、どうしてもわかりません。
プログラミングをどのように変更すれば良いのでしょうか。よろしくお願いします。

html部分

<div id="globalnavi">

<nav>

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#"><span>Contact</a></li>
</ul>
</nav>

</div>

css部分

#globalnavi{
height:36px;
width:1000px;
margin-top:0px;
margin-bottom:5px;
background-color:white;
}

#globalnavi ul{
list-style-type:none;
margin:0;
padding:0;
margin-top:1px;
margin-bottom:4px;
}

#globalnavi li{
float:left;
width:200px;
height:20px;
margin-bottom:10px;
margin-top:5px;
margin:0px;
padding-left:10px;
}

#globalnavi a{
text-align:center;
display:block;
padding-top:8px;
padding-bottom:15px;
margin-bottom:-1px;

width:160px;
background-image:url(images/btn046_06.gif);
background-repeat:no-repeat;
color:blue;
}

#globalnavi a.home{
width:160px;
background-image:url(images/btn046_05.gif);
}

#globalnavi a:hover{
background-image:url(images/btn046_10.gif);
}

回答No.1

ORUKA1951 · ベストアンサー

htmlではなく、HTMLです。(頭文字なので)
まず、簡単にするためにHTMLを少し直しておきます。
<div id="globalnavi"></div>は不要です。navというブロック要素以外何もないのですから、
<nav id="gloabanavi">で必要十分です。他に区別できないnavがないのでしたらこのidも要りません。たとえば<header></header>内にひとつしかないのでしたら、
header nav{}で特定できます。

・ブロック要素のサイズはpadding辺の内側です。
　width:200px; ＋ padding-left:10px;だと、外側のサイズは210pxになります。
・詳細度が同じでしたら後から書かれたもので上書きされます。
　margin-bottom:10px;
　↓
　margin-top:5px;
　↓
　margin:0px;　ここで、すべてのmarginが0に上書きされます。
　　この手の無駄な部分がたくさんあります。
・<a href="#" class="home">のclass名はなくても良いです。
　　他のa要素とはhref属性の値が異なりますし、最初のliですから
・ナビ同士の横の隙間を無くすように合わせたい
　ユーザビリティの点からリンクの間は開けたほうが良いです。
　書かれているスタイルシートはmarginやpaddingで隙間が開いていますが？？？？

<nav id="global">
　<ul>
　　<li><a href="#" class="home">Home</a></li>
　　<li><a href="#">Categories</a></li>
　　<li><a href="#"><span>About</span></a></li>
　　<li><a href="#">Portfolio</a></li>
　　<li><a href="#"><span>Contact</a></li>
　</ul>
</nav>

#global{
height:36px;line-height:20px;
width:100%;max-width:1000px;min-width:640px;
margin: 1px auto 5px auto;
background-color:white;
list-style:none;
padding:0;
text-align:center;
}
#global li{
float:left;
width:19%;
height:20px;
margin:3px;
position:relative;
}
#global a{
display:block;
width:100%;height:100%;
background-image:url(images/btn046_05.gif);
background-size:cover;
color:blue;
}
#global li+li a{
background-image:url(images/btn046_06.gif);
}
#global a:hover{
background-image:url(images/btn046_10.gif);
}

とか・・・・

お礼

素早い回答ありがとうございます。
私にとって答えられた内容を理解するにはまだ知識不足のようです＾＾；
素人が適当にやってしまっているのでへんてこな質問になってしまい申し訳ありません。
もっと勉強しないとわからないと痛感しました。
しかしプロの方は凄いですね。
素人の質問に答えていただき、ありがとうございました。