http://10plate.blog44.fc2.com/blog-entry-178.html

横メニューバーを幅一杯に表示する

以前に「横メニューバーをブログタイトル下に表示する」を紹介しました。

しかし、メニューを幅一杯に表示しようとした場合、"一番右の最後の区切り線"は邪魔になりました。

この"一番右の最後の区切り線"を消す方法を紹介します。

HTMLを編集します。赤い部分を加えてください。

<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li class="menu_bar_end"><a href="<%url>blog-category-3.html">カテゴリ３</a></li>
</ul>

そしてスタイルシートの末尾に次の記述を加えてください。

#menu_bar li.menu_bar_end a {
border-right:none;
}

これで"一番右の最後の区切り線"は消えます。
あとはメニューボタンの幅を調整してください。

#menu_bar li a {
～
width:100px; /* １つのメニューボタンの幅 */
～
}

あまりギリギリまで広げようとすると、ブラウザによっては折り返されてしまうこともあります。
できれば複数のブラウザで確認することをお勧めします。

関連記事

[ 2009/04/03 01:36 ] カスタマイズ共通カスタマイズ | TB(0) | CM(15)