[CSS] Frage bezüglic Navigation

    Guten Tag Community,
    Ich habe eine Frage bezüglich meines Designs. Ich kenne mich in CSS nicht so gut aus und deswegen wollte ich fragen, wie ich meine Navigation umsetzen kann. Hier ein Bild:

    Ich weiss nicht, wie ich das mit den Enden hinbekommen soll und wie die Grafik aussehen soll. Ich hoffe ihr könnt mir helfen.
    Mit freundlichen Grüßen
    Adrian Rodriguez

    Mach das genau mit der Grafik, wie es da schon ist.
    Du kannst die Grafik aus der .psd benutzen.

    Zitat von Jeffry

    Hauptsache ist ja immer, dass du es verstehst und das es funktioniert. Es bringt nichts, wenn du einen Code hast den du nicht verstehst, und noch weniger bringt es was wenn du einen Code hast der nicht tut. Naja, und wenn beides zusammen kommt, dann wirds lustig.

    Du brauchst den mittleren Teil nicht repeaten.
    Du kannst dort einfach 1 zu 1 die Grafik aus der .psd nehmen.

    Zitat von Jeffry

    Hauptsache ist ja immer, dass du es verstehst und das es funktioniert. Es bringt nichts, wenn du einen Code hast den du nicht verstehst, und noch weniger bringt es was wenn du einen Code hast der nicht tut. Naja, und wenn beides zusammen kommt, dann wirds lustig.

    Also das ich halt nur einen kleinen teil nehme und das wird dann repeatet und dann wird an den enden noch die beiden enden angefügt hier ein beispiel für die zugeschnittenen Bilder:
    Die 'Mitte':
    Außen links:
    Außen rechts:
    Und die drei sollen am ende die komplette Nav ergeben.

    • Offizieller Beitrag

    Es gibt einige Möglichkeiten, eine die mir spontan einfällt:
    3 Div Container.
    2 mit den Enden und 1 für die Mitte.
    das für die Mitte z.B.


    .NavbarCenter {
    height: 50px;
    width: 500px; //z.B
    background: url(HIER URL);
    background-repeat: repeat-x; //oder repeat-y bin mir nicht mehr sicher.
    position: relative;
    }


    .NavbarCenter .left {
    height: 65px;
    width: 60px;
    background: url(HIER URL);
    position: absolute;
    left: -60px;
    }


    .NavbarCenter .right{
    height: 65px;
    width: 60px;
    background: url(HIER URL);
    position: absolute;
    right: -60px;
    }


    HTML:
    <div class="NavbarCenter">
    <div class="left"></div>
    <div class="right"></div>
    ....
    </div>


    Sollte so klappen.


    EDIT:
    Jap, hat geklappt:
    http://jsfiddle.net/Afa7R/1/

    Bist ein Schatz :) Danke dir :*


    Edit: Habe ein Problem mit meiner SideBar und meiner NewsBox, beide sind nicht im Hintergrund, seht es selbst(wollte kein neuen Thread aufmachen):

    Mein CSS Code dazu:


    Der HTML Code:

    Mach mal unter den Boxen:

    PHP
    <div style="clear:both;"></div>


    Also so: