ナビゲーションバーの表示について（横幅）

質問

ホームページ作成に初めて挑戦している超初心者です。
皆様にいろいろアドバイスを頂いて、下記のようなナビゲーションバーの作成をしました。
現在の状態だと、画面の横幅（狭くなると）によって、ナビゲーションが２行になってしまいます。
できれば２行にしないでスクロールバーを出したいです。
もともと、全体の画面サイズを設定していないのが原因なのでしょうか？

あと、このナビゲーションは全ページに設置しているのですが、その場合はやはりその都度ＨＴＭＬソースを表記しないとダメなのでしょうか？

よろしくお願いします。

【ＣＳＳ】
/* フロート解除用css
--------------------------------------------------*/
#menu ul:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#menu ul{
display:inline-table;
min-height:1%;
}
/* Hides from IE-mac \*/
html #menu ul{
height:1%;
}
#menu ul{
display:block;
}
/* End hide from IE-mac */
/* for IE7 */
*html #menu ul{
display:inline-block;
}
/* */
/* フロート解除ここまで
--------------------------------------------------*/
#menu ul{/*ナビゲーション*/
background-color:#999999;
}
#menu ul,#menu li{
font-size:12px;
margin:0;
padding:0;
list-style:none;
}
#menu li{
float:left;
border:1px outset:#FFFFFF;
margin-right:1px;
}
#menu a,#menu a:link,#menu a:visited{
text-decoration:none;
color:#FFFFFF;
background-color:#999999;
width:110px;
height:auto;
text-align:center;
padding:7px 0;
display:block;
border-right:1px outset #FFFFFF;
white-space:nowrap;
position:relative;
}
#menu a:hover{
font-size:12px;
color:#FFFFFF;
background-color:#999999;
}
#home a{
border:none;
}

【ＨＴＭＬ】
<div id="menu">
<ul>
<li id="○○"><a href="○○.html">○○</a></li>
<li id="■■"><a href="■■.html">■■</a></li>
<li id="△△"><a href="△△.html">△△</a></li>
</ul>
</div>

回答No.2

noname#83877 · ベストアンサー

SSIというものを使えば確かできたはずですが、詳しくないのであればHTMLにそのまま書くのが楽なのではないでしょうか。
javascriptで書き出すということも出来ますが、オフにされている環境のことを考えると使えないと思いますし。

メニューの指定については、#menuではなくulにwidthを指定して、#menu ulではなく、#menuにbackground-colorを指定してみてはどうでしょう？
ulの幅がwidthで固定され、親要素の#menuの背景色が端まで伸びてくれるはずです。

お礼

で、で、できました！！
本当にありがとうございます。

メニューについては「テンプレート」みたいな感じにやる方法があるのかな？と思っていました。
でも頂いたアドバイスの通り、そのまま都度表記するようにします！

感謝です！！

回答No.1

noname#83877

とりあえず今のところいえるのは#menuにwidthを指定するということでしょうか。
114px × メニューの数 で指定すれば大丈夫だと思います。

ちなみにCSSをhtmlに書かずに外部ファイル化しているのであればhtmlを書き換える必要はありません。

お礼

さっそくのアドバイスありがとうございます！
で、試してみました。

希望の表示にする事ができました！．．．が、
逆に幅を広げた時は、114p×メニューの数の長さにしかなっていないので、途中で切れている感じになってしまいますよね．．．
更にこれも解決する方法はあるのでしょうか？

また、HTMLのソースについてですが、すみません私の伝え方が悪かったです。
今は新しいページの度にこのメニューのソースを全部表示しているんですが、たとえば外部ファイルみたいな感じにして簡単に表示する事ができるのかな？という事でした。
でも、階層の違いでソースも変わってくるからダメですよね．．．

知識が薄いくせに贅沢ばかりでお恥ずかしいです。
もしよろしければ引きつづきお願いします。