Menüpunkt mittels CSS anpassen

[Preetz]

Hallo zusammen,

stehe vor einem etwas größeren Problem - vermutlich!
Ich soll eine Seite nach eienr Vorlage umsetzen.

Mein Problem ist hier die Navigation.
Erstmal zur Webseite:
http://www.contao.kucuk-gmbh.de/

In die Lücken soll eine durchgezogene Linie bei nicht activen Menüpunkt:


Der active Menüpunkt bekommt einen Pfeil, welcher mittig transparent ist, sodass der Mainbereich im Pfeil dargestellt wird:

Hat jemand ne gute Idee, wie ich das auch für unterschiedliche Browser kompatibel mache?!

Danke

Preetz

[Preetz]

Achso das Problem ist schon, dass ich die Grafiken gar nicht so eingebaut bekomme, dass die Lücken auf wirklich geschlossen sind!

[Mischa]

Hallo,

versuch es doch mal mit CSS3. Also ohne Grafiken.

Hier mal paar Anwendungen als Anregung. http://jsfiddle.net/pxSjw/
Zwei weisse Dreiecke nebeneinander in Kombination mit box-shadow sollten funktionieren.

Herzliche Grüsse, Mischa

[Thoni]

Ich würde die Gerade als Hintergrundbild im li definieren.
Bei .active oder :hover die andere Grafik.
Beide positionieren bottom center o.ä.

[Preetz]

Hi Mischa,

danke für den Tipp. Nur die durchgezogene Linie oder geht das auch mit dem Pfeil?

Preetz

[Preetz]

Ich würde die Gerade als Hintergrundbild im li definieren.
Bei .active oder :hover die andere Grafik.
Beide positionieren bottom center o.ä.

Danke, aber genau das geht nicht ;-)

[Thoni]

Danke, aber genau das geht nicht ;-)

aha

[Preetz]

Ich habe nur mal die Linie bei topmenu li eingebaut. Selbst hier sind bei mir schon Lücken.
Oder mache ich da total was falsch?

[Thoni]

Fülle nicht die Lücken aus, sondern hinterlege ein Bild ohne Lücken.
Danach legst du, so wie ich beschrieben habe, das 'Zackenbild' 'drüber'.
ACHTUNG: dem span im li musst du per CSS ein background: none oder so geben.

[Mischa]

Hab oben noch was ergänzt. Vergiss Grafiken!

@Thoni: Das funktioniert auch. Aber reines CSS finde ich persönlich für solche Anwendungen einfach schöner.

[Preetz]

wenn ich aber kein Lücken habe, wird der Content nicht innerhalb des Pfeils angezeigt, weil dann die Durchgezogene Linie des Header im Weg ist.

[Thoni]

Hallo,

versuch es doch mal mit CSS3. Also ohne Grafiken.

Hier mal paar Anwendungen als Anregung. http://jsfiddle.net/pxSjw/
Zwei weisse Dreiecke nebeneinander in Kombination mit box-shadow sollten funktionieren.

Herzliche Grüsse, Mischa

Überlagern sich dann nicht die Schatten, was dann dunkler und 'unsauber' wird?

[Thoni]

wenn ich aber kein Lücken habe, wird der Content nicht innerhalb des Pfeils angezeigt, weil dann die Durchgezogene Linie des Header im Weg ist.

Welcher Content soll denn im Pfeil angezeigt werden?

[Mischa]

...Durchgezogene Linie des Header im Weg ist.

Deshalb box-shadow an alle Items der Navigation. Davor und dahinter ein flexibles li als Lückenfüller (Template anpassen!). Der aktive Eintrag bekommt keinen Shadow unten sondern die beiden "Dreiecke" mit eigenem Schatten.

[Thoni]

Ich habe mit Firebug dein CSS abgeändert und so sieht es aus:

zackenmenue.PNG

Wenn du dann die Lücken wegmachst, sind auch die unschönen Stellen verschwunden.

[Preetz]

Ich habe mit Firebug dein CSS abgeändert und so sieht es aus:

zackenmenue.PNG

Wenn du dann die Lücken wegmachst, sind auch die unschönen Stellen verschwunden.

Das ist doch das Problem. Die Lücken gehen nicht weg. Den Pfeil bekomme ich dort rein, dass ist nicht das Problem.

[Thoni]

Das ist doch das Problem. Die Lücken gehen nicht weg. Den Pfeil bekomme ich dort rein, dass ist nicht das Problem.

Indem du die Lücken in der Grafik schließt, die ja passend 'hauptnavi_back_luecken.png' heißt:



Die beiden Links würde ich aber nicht auf der Grafik lassen.

[Preetz]

Danke Toni, aber dann habe ich wieder den durchgezogenen Schatten, welcher auch im Dreieck des Pfeil angezeigt wird.
Es soll aber der Content-Text im Dreieck des Pfeils durchschauen, nicht aber der Schatten des Headers.

[Thoni]

Danke Toni, aber dann habe ich wieder den durchgezogenen Schatten, welcher auch im Dreieck des Pfeil angezeigt wird.
Es soll aber der Content-Text im Dreieck des Pfeils durchschauen, nicht aber der Schatten des Headers.

Nochmal die Frage: Welcher Contenttext soll im Dreieck zu sehen sein?

So geht es auf jeden Fall problemlos:

zackenmenue.PNG


Der schwarze Rahmen ist, weil ich die Datei irgendwie nur mit diesem Fehler öffnen kann - der Verlauf ist aus Screenshot eingefügt.

[Thoni]

Vielleicht ist es ja einfacher, wenn du mal zwei Bilder mit den beiden Zuständen erstellst, damit wir wissen, wie es aussehen soll.

[Preetz]

Weiß nicht wie ich das besser erklären soll. Wenn du den Contentbereich nach oben scrollen lässt verschwindet dieser hinter dem Header und muss auch an dem activen Pfeil vorbei (drunter durch).
Also muss auch innerhalb des Pfeils der Teil des Contents dargestellt werden.

[Preetz]

Also ;-)

Normal müsste jetzt, wie auf dem Screen zusehen ist, der orange Kasten mit entsprechendem Text im Dreieck "durchschimmer"

Das Problem ist aber nicht das Dreieck transparent anzupassen, sondern die durchgezogene Linie des Headers, welche ja dann angezeigt wird ...

screen.PNG

Hoffe es ist jetzt verständlicher?

[Thoni]

Ja, jetzt ist es klar.

Dann musst du aber wahrscheinlich anders herangehen.

Erstelle die Hintergrundgrafik mit allen Zacken - wenn sich das Menü ändert, muss das Bild leider neu erstellt werden.
Der Schatten muss auf Transparent auslaufen.
Beim nicht aktiven Punkt legst du das zum Füllen das Dreieck drüber.


Das ist nur erst mal eine grobe Idee - vielleicht hilft es.