Hinzufügen von abgerundeten Ecken zu einer Navigationsleiste CSS - html, css

Ich habe eine Bar auf meiner Website, aber ich möchte abgerundete Ecken an jedem Ende davon. Bis jetzt ist mein CSS dafür ..

#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;
}

und mein 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>

Ich habe abgerundete Ecken an jedem Ende angerufenmenu_l.png und menu_r.png. Ich kann nicht genau herausfinden, wie man diese an beide Enden des Navs setzt. Meine bisherigen Versuche scheinen von Browsern ignoriert zu werden. Jeder hat eine beste Methode, um das zu erreichen? Ich versuche, Tabellen zu vermeiden.

Prost

Antworten:

1 für die Antwort № 1

Versuchen Sie, ein div am Anfang von #nav, und am Ende.

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

dann tue dies für CSS: (Angenommen, dein abgerundetes Eckbild ist 15 Pixel breit)

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

Wenden Sie dann ein abgerundetes Eckbild an.

---

0 für die Antwort № 2

Der einfache Weg, dies in einigen modernen Browsern zu tun, ist etwas hinzuzufügen wie:

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

die mit Mozilla-basierten und Safari-ähnlichen (Webkit-basierten) Browsern umgehen.

Leider ist IE komplizierter.

---

0 für die Antwort № 3

Sie können den linken Hintergrund auf dem ersten Link und den rechten Hintergrund auf dem Element #nav festlegen.

Du könntest auch den linken bg auf den setzen #nav und das Recht auf die #nav mit der Inhaltsauswahl ::after.

---