Problem mit Navigation/Hintergrund

[martinustreveri]

Hallo,

ich arbeite gerade an einer Seite, und auf dieser brauche ich eine Navigation, die auf einem Bild basiert:


Die Navigation soll 80% der Seite lang und 60px hoch sein.

Mein Ansatz wäre etwa so:

Code: Alles auswählen

<div id="navigation">
           
            <ul>
                <li><a href="#">Home</a></li>
            </ul>
           
</div>


Code: Alles auswählen

#navigation{
   
    background-image: url(images/naviBg.png);
    margin: 0 10% 0 10%;
    height: 60px;
    width: 80%;
    font-family: arial;
   
}


Nur wie soll ich die Ecken machen?
Man kann sich das so vorstellen, als ob man das Bild oben auf 80% der Seite "ziehen" würde.

Wisst ihr wie man das macht?

lg.
~martinustreveri


PS:
Sorry für die unverständliche Beschreibung, ich hoffe, ihr wisst was ich meine

[sejuma]

Die 80% hängen ja von der jeweiligen Fensterbreite ab.
Deshalb würde ich die Grafik in drei Einzelteile zerstückeln:
Zwei schmale Teile links und rechts mit den Ecken und den mittleren Teil, der sich dann horizontal kacheln kann.

Wie das funktioniert findest du vom Prinzip her hier beschrieben:
http://www.ohne-css.gehts-gar.net/0029.php

Bedenke dabei jedoch: Die 80% können je nach Fenstergröße unter Umständen zu klein sein für die Gesamtnavi.

[martinustreveri]

Hey,

vielen Dank, ich habe es nun so hinbekommen =)

lg.