グローバルナビにイメージ背景はめ込み
昨日からグローバルナビにイメージをはめ込んだと思いますが、背景イメージを挿入しても何故か反映されなかったので、省略していた下記赤文字部分を挿入したところ反映されました。
/*-- リンクエリア --*/
#sub_header ul.gnavi li a {
・
・
・
background: #21a0ff url(http://blog.town-nets.com/blog/iha/file/dadb323e64.JPG) center top repeat-x;
・
・
・
}
修正したCSSソースは下記の「続きを読む」からどうぞ。今回はCSS3で出来る角丸メニューを追加しました。
まあヘッダー部分を見ればわかると思いますが。
ちなみに今回使用した画像ですが、アメブロでやってる私のブログからパクってきました(笑)
訓練校に通ってるときに制作したものなので大丈夫です。
こちらが通常リンク時（ON）で、
こちらがポイント時（OFF）・アクティブ時です。
追記：角丸が反映されるブラウザは、Firefox、Google Chrome、IE9です。
/*-- グローバルナビ（テスト版） --*/
#sub_header {
position: relative;
width: 800px;
margin: 5px auto 0;
}
#sub_header ul.gnavi {
width: 800px; margin: 0 auto; padding: 0px;
background-color: #0033ff;
font-size: 85%;
list-style-type: none;
text-align: center;
}
#sub_header ul.gnavi li {
width: 160px; float: left; line-height: 100%;
}
/*-- リンクエリア --*/
#sub_header ul.gnavi li a {
display: block; position: relative; padding: 5px 2px; color: #ffffff;
background: #21a0ff url(http://blog.town-nets.com/blog/iha/file/dadb323e64.JPG) center top repeat-x;
border: solid 2px #0033ff;
/*border-style: solid solid solid none;*/
border-top-left-radius: 40px; /* CSS3の表記 左上角丸 */
border-bottom-right-radius: 40px; /* CSS3の表記 右下角丸 */
text-decoration: none;
}
/*-- 最初の項目 --*/
#sub_header ul.gnavi li.first a {
border-left: solid 2px #0033ff;
}
/*-- ポイント時・アクティブ時 --*/
#sub_header ul.gnavi li a:hover,
#sub_header ul.gnavi li a:active {
border: solid 2px #00ff00;
background: #ffff66 url(http://blog.town-nets.com/blog/iha/file/86186fe9d5.JPG) repeat-x;
color: #0033ff; outline: none;
}
