ヘッダーの下にメニューを設置する ②

ヘッダー下にメニューを設置するの続きです。


前回まででフリープラグインに、リンクを書きこみましたが
CSSでリンクの場所や表示方法、色などを記入して決めてあげます。


ブログを書く　→　デザインの変更　→　CSSの編集

*************************************************************

#topmenu {
width: 800px;/*スキンの幅*/
font-size:14px;/*文字サイズ*/
font-weight:bold;/*太字フォント*/
line-height:2;/*2倍の高さ*/
display: block;/*ブロック化*/
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width: 150px;/*1つのメニューの幅＝スキンの幅÷メニューの数*/
margin: 0 2px;/*メニューの間隔*/
border: 3px double #fff;
background-color:#009900;/*背景色*/
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}
#topmenu li a {
color: #ffffff;/*文字色*/
border: 1px solid #ffffff;
margin: 1px;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color: #ffffff;/*オンマウス時文字色*/
background-color:#99FF00;/*オンマウス時背景色*/
}

#frame {
position: relative;
}
#topmenu{
position: absolute;
top:350px;/*メニューを置きたい上からの位置*/
left:0px;/*メニューを置きたい左からの位置*/
z-index: 100;
}

*************************************************************

色や場所はヘッダーの大きさや好みで変える必要があります。


微妙な位置は数字を少しずつ変えながら、確認するしかありません。