ナビゲーションバーの表示について(横幅)
ホームページ作成に初めて挑戦している超初心者です。
皆様にいろいろアドバイスを頂いて、下記のようなナビゲーションバーの作成をしました。
現在の状態だと、画面の横幅(狭くなると)によって、ナビゲーションが2行になってしまいます。
できれば2行にしないでスクロールバーを出したいです。
もともと、全体の画面サイズを設定していないのが原因なのでしょうか?
あと、このナビゲーションは全ページに設置しているのですが、その場合はやはりその都度HTMLソースを表記しないとダメなのでしょうか?
よろしくお願いします。
【CSS】
/* フロート解除用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;
}
【HTML】
<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>