2007年10月18日

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

li 要素のborder-bottom に線を表示したのが前回までです。

今回はすべてのli要素に線を表示してみましょう。
ついでに、liの背景色も指定し、リンクが張られている文字列のリンク線を消し訪問済みでも文字色が変わらないようにします。

cssのソースは以下です。赤文字が追記した分です。

#menu li{
width:auto;
height:auto;
padding:5px 15px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#333333;
border-left-style:solid;
border-left-width:1px;
border-left-color:#333333;
border-right-style:solid;
border-right-width:1px;
border-right-color:#333333;
border-top-style:solid;
border-top-width:1px;
border-top-color:#333333;
background-color:#CC0000;
}

ずいぶんと表記が長くなりました。
以下のように記述しなおしても同じです。

#menu li{
width:auto;
height:auto;
padding:5px 15px;
border-bottom:solid 1px #333333;
border-left:solid 1px #333333;
border-right:solid 1px #333333;
border-top:solid 1px #333333;
background-color:#CC0000;
}

次に文字列です。
リンクの線(デコレーション)を表示しないようにしてあります。
ソースは以下です。

#menu a,#menu a:link,#menu a:visited{
text-decoration:none;
color:#FFFFFF;
background-color:transparent;
}

以下の図のように表示されましたか。

WS000001.JPG

ローカル環境で表示されていれば問題ないとは思いますが私の場合はサーバーの環境でも確認するようにしています。

「Bフレッツ」がだいぶ浸透してきましたがまだまだ「ISDN」の環境の方もいらっしゃいます。

画像を使用していないのでナローバンドの方でもストレスなく表示されると思いますがやはり安くてもいいのでサーバーにUPして確認された方が良いと思います。

Google



posted by ひろりん at 16:51 | Comment(1) | TrackBack(0) | ナビゲーションのアイディア
この記事へのコメント
ブログ開設おめでとうございます!!

アクセス数を上げるために当コミュニティサイトに登録しませんか?
http://blog.livedoor.jp/v2zt8ym7/


より多くのひとに貴方のブログを見てもらえます。

参加するにはこちらからが便利です
http://blog.livedoor.jp/v2zt8ym7/?mode=edit&title=%3FX%3F%5E%3FC%3F%3F%3FV%3F%5B%3Fg%3F%40CSS%2DTIPS%20%7C%20%201%2Dspc%2Ecom&address=http%3A%2F%2Fcsstips%2Eseesaa%2Enet%2F


お問い合わせはコチラから
http://blog.livedoor.jp/v2zt8ym7/?mail

Posted by みんなのプロフィール at 2007年10月29日 15:51
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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