ヘッダー下に横メニュー（CSS-2）

こちらはヘッダー下にメニューをつけるＣＳＳ部分です
先に　ヘッダー下に横メニューをつけちゃう(設置編) 　をお読みください

参考： CSS　メニューを作っちゃおう5（横メニュー1）

メニューの横幅がブログより狭くても中央に表示されます




マウスをのっけてみて↓・・

• 規　約
• 飴　申
• 案　内

CSSです・・・

/*横メニュー(CSS2)*/
#topmenu{
font-size:14px;/*文字サイズ*/
font-weight:normal;/*太字にするにはnormal→boldに*/
width:640px;/*全体の幅Ａ(注1)*/
margin:10px auto 60px;/*メニューの上と下のスキマ　上Ｂ auto 下Ｃ*/
display: block;
line-height:2;
}
#topmenu ul{
margin:0;
padding:0;
list-style: none;
}
#topmenu li {
width:150px;/*1つの幅Ｄ*/
margin: 0 2px;/*メニューのスキマＥ*/
border: 3px double #009900;/*Ｆ*/
background-color:#009900;/*背景色Ｇ*/
text-align: center;/*中央寄せ*/
display:inline;
float: left;
}
#topmenu li a {
color:#ffffff;/*文字色Ｈ*/
border: 1px solid #ffffff;/*Ｉ*/
margin:1px;/*Ｊ*/
text-decoration:none;
display: block;
}
#topmenu li a:hover {/*マウスオーバー時*/
color:#333333;/*文字色Ｋ*/
background-color:#99ff00;/*背景色Ｌ*/
}

※;/*全体の幅Ａ(注1)*/

メニュー1つの幅（上の例では150px）＋10px　上の例では150px+10px=160px

それのメニュー項目数分が幅になります　上の例だと　160px×4=640px
/*メニューのスキマＥ*/を変更した場合は+10pxの数字も変わってきます

↑横幅が639pxの場合・・　1pxでも少ないと段落ちします

多少多い分には大丈夫ですが・・多すぎると中央寄せが中央になりません









例えば・・・

マウスをのっけてみて↓・・

• 規　約
• 飴　申
• 案　内

#topmenu{
font-size:14px;/*文字サイズ*/
font-weight:normal;/*太字にするにはnormal→boldに*/
width: 640px;/*全体の幅Ａ(注1)*/
margin:10px auto 60px;/*メニューの上と下のスキマ　上Ｂ 0 下Ｃ*/
display: block;
line-height:2;
}
#topmenu ul{
margin:0;
padding:0;
list-style: none;
}
#topmenu li {
width:150px;/*1つの幅Ｄ*/
margin: 0 2px;/*メニューのスキマＥ*/
border: 3px double #ff00ff;/*Ｆ*/
background-color:#ffccff;/*背景色Ｇ*/
text-align: center;/*中央寄せ*/
display:inline;
float: left;
}
#topmenu li a {
color:#ff00ff;/*文字色Ｈ*/
border: 1px solid #ffffff;/*Ｉ*/
margin:1px;/*Ｊ*/
text-decoration:none;
display: block;
}
#topmenu li a:hover {/*マウスオーバー時*/
color:#ffffff;/*文字色Ｋ*/
background-color:#ff00ff;/*背景色Ｌ*/
}