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
[CSS] Frage bezüglic Navigation
- Unique!
- Geschlossen
- Erledigt
-
-
Mach das genau mit der Grafik, wie es da schon ist.
Du kannst die Grafik aus der .psd benutzen. -
Es soll ja so sein, dass der mittlere Teil sich halt "repeatet" und die Enden einfach dann da sind
-
Ich versteh nicht was du möchtest.
Was möchtest du genau mit der Navigationsbar machen? -
Du brauchst den mittleren Teil nicht repeaten.
Du kannst dort einfach 1 zu 1 die Grafik aus der .psd nehmen. -
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. -
-
Die mitte ist mir klar :), aber die ränder nicht
-
Ja die musste ja nur Positionieren mehr nicht.
-
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:Code
Alles anzeigen#news { width: 70%; margin-top: 20px; display: inline-block; float: left; } #sidebars { width: 29.6%; margin-top: 20px; display: inline-block; float: right; } #artikel { background-color: #fff; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; -moz-box-shadow: 0 1px 5px 1px #a0a0a0; -webkit-box-shadow: 0 1px 5px 1px #a0a0a0; box-shadow: 0 1px 5px 1px #a0a0a0; height: 100px; padding: 10px; } #sideBar { background-color: #fff; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; -moz-box-shadow: 0 1px 5px 1px #a0a0a0; -webkit-box-shadow: 0 1px 5px 1px #a0a0a0; box-shadow: 0 1px 5px 1px #a0a0a0; height: 100px; padding: 10px; margin-left: 4%; } #artikelDate { background-image: url(../images/date.png); background-repeat: no-repeat; height: 45px; width: 45px; font-family: Verdana; text-align: center; border-radius: 5px 5px 5px 5px; -moz-box-shadow: 0 1px 5px 1px #a0a0a0; -webkit-box-shadow: 0 1px 5px 1px #a0a0a0; } #dateDay { font-size: 24px; color: #000; } #dateMonth { font-size: 11px; color: #fff; } #artikelTitle { font-family: Segoe UI; font-size: 24px; text-decoration: underline; }
Der HTML Code:
-
Mach mal unter den Boxen:
Also so:
-
Epic Double Facepalm, hätt ich mich ja auch mehr ansträngen können
-
breadfish.de
Hat das Thema geschlossen.