ナビゲーションバーに丸みのあるコーナーを追加するCSS

私は自分のサイトでバーをナビしていますが、その両端に丸いコーナーを置いています。これまでのところ、このための私のCSSは..ナビゲーションバーに丸みのあるコーナーを追加するCSS

#nav { 
left:40px; 
position:relative; 
top:140px; 
} 
#nav a { 
background-image:url(../images/menu.png); 
background-repeat:no-repeat; 
color:#FFFFFF; 
display:inline; 
float:left; 
font-family:Arial,Helvetica,sans-serif; 
font-size:17px; 
font-weight:bolder; 
height:44px; 
padding-top:12px; 
text-align:center; 
text-decoration:none; 
width:134px; 
} 
#nav a:hover { 
background-image:url(../images/menu_ro.png); 
background-repeat:no-repeat; 
}

と私のHTML ..です

<div id="nav"> 
<a href="">Home</a> 
<a href="">Food</a> 
<a href=""</a> 
<a href=""</a> 
<a href=""</a> 
<a href=""></a> 
<a href=""</a> 
</div>

私はmenu_l.pngとmenu_r.pngと呼ばれるそれぞれの端に置くために角を丸めています。どのようにこれらをナビのどちらかの端に置くか分かりません。これまでの私の試みは、ブラウザによって無視されているようです。誰でもこれを達成するための最良の方法がありますか？私はテーブルを避けようとしています。 Mozillaベースとサファリのような（WebKitのベース）ブラウザを処理する

-moz-border-radius: 8px; -webkit-border-radius: 8px;

：

乾杯

出典

2009-08-17 Anonymous

divを最初に#navの末尾に追加してみてください。

#nav { 
    padding: 0 15px; 
} 
#nav-left, #nav-right { 
    float: left; 
    height: 15px; 
    width: 15px; 
}

は次に角丸のイメージを適用する（自分の丸みを帯びた角の画像を想定した広い15ピクセルです）：

<div id="nav"> 
    <div id="nav-left"></div> 
    //anchor tags 
    <div id="nav-right"></div> 
</div>

は、CSSのためにこれを行います。

出典

2009-08-17 05:53:04 peirix

私はこれを試してみましたが、それは私のポストでは機能しませんでした。左右の画像が異なります。 –

何が問題なのですか？また、画像が異なる場合は、それぞれの面に異なるスタイルを適用できます。 – peirix

ありがとうpeirixさんがコードを少し修正しました。 #nav { 位置：相対; top：140px; パディング：0px。 } ＃nav-left { 背景画像：url（../ images/menu_l.png）; background-repeat：no-repeat; float：left; 身長：44px; 幅：11px; } ＃nav-right { 背景画像：url（../ images/menu_r.png）; background-repeat：no-repeat; float：left; 身長：44px; 幅：11px; } –

いくつかの近代的なブラウザでこれを行う簡単な方法は、のようなものを追加することです。

ああ、IEはもっと複雑です。

出典

2009-08-17 05:48:24 Peter

これを行う場合は、 'border-radius：8px;'を追加するとよいでしょう。それはまだどんなブラウザでもサポートされていませんが、それはおそらくラインを下回るでしょう、あなたは今それを追加するかもしれません。 – peirix

これはIE6でうまくいくでしょうか？笑。私はもう少し伝統的なものに固執しなければならないかもしれないと思う。ありがとうPeter –

#nav要素の最初のリンクと右側の背景に左の背景を設定できます。

コンテンツセレクタ::afterを使用して、#navの左のbgを、#navの右のbgを設定することもできます。

出典

2009-08-17 05:49:27 fphilipe

ナビゲーションバーに丸みのあるコーナーを追加するCSS

答えて

関連する問題