2007年10月09日

ナビゲーション徹底研究1

縦型のナビゲーションバー1
リスト要素でマークアップした項目を用意します。

今回はこれです。
htmlファイル

<div id="menu">

<ul>

 <li><ahref="#">トップページ</a></li>
 <li><ahref="#">新着情報</a></li>
 <li><ahref="#">ダイエット関連</a></li>
 <li><ahref="#">スタッフ紹介</a></li>
 <li><ahref="#">お問い合わせ</a></li>

</ul>

</div>


次にCSSの指定です。
メニューの横幅は200pxで高さはautoに設定します。
ulとliのリスト要素のマージンとパディングを0pxに指定し、リストマーカーを非表示にします。

cssファイル

#menu{
width:200px;
height:suto;
}

#menu ul,#menu li{
margin:0px;
padding:0px;
list-style:none;
}

li要素の横幅と高さはピクセルで指定も出来ますが今回はautoの設定にし、パディングの上下を5px 左右を10pxと指定します。

#menu li{
width:auto;
height:auto;
padding:5px 10px;
}

今回はここまでです。
posted by ひろりん at 14:29 | Comment(0) | TrackBack(0) | ナビゲーションのアイディア
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。