CSS, Überlappende Navigation mit runden Ecken

[barodscheff]

Hallo Leute,

ich möchte die folgende Navigation mit XHTML und CSS (ohne CSS3!) umsetzen.



Wie ihr seht lappen die Navigationskarteien übereinander. Runde Ecken hinzubekommen ist ja normalerweise kein Problem. Ich würde dem <li> Element die eine Ecke und dem <a> Element die andere Ecke per background-image zuweisen.
Doch da die Punkte überlappen, ist das schwierig.

Beim hovern sollen die Karteien die schwarze Farbe bekommen und das ist das Problem.

Wie würdet ihr das lösen? Spielereien mit absoluter Positionierung wollte ich eigentlich vermeiden.

Vielen Dank und viele Grüße.

 

[MyBad]

AW: CSS, Überlappende Navigation mit runden Ecken

Kann dir leider keinen direkten Link geben. Aber such mal nach "sliding door navigation". Das ist das was du suchst.

 

[Tr3icio]

AW: CSS, Überlappende Navigation mit runden Ecken

"mit XHTML und CSS (ohne CSS3!) umsetzen"

Also ich würde ja lieber in die Zukunft schauen, als Jahre in die Vergangenheit, aber jeder so wie er will.

"Wie würdet ihr das lösen? Spielereien mit absoluter Positionierung wollte ich eigentlich vermeiden."

Und noch weiter Oo

Ich wusste es, der Mensch entwickelt sich zurück.
Wieso nimmst du nicht gleich Javascript? Geht damit dann am einfachsten.

Aber mal ehrlich: einfach CSS3 nutzen und fertig. Ich meine, warum nicht? Wenn jemand nen alten Browser nutzt ist das die eigene Schuld! Ich kenne auch Leute, die sagen "Entweder dein Browser kann CSS3 oder du kommst nicht auf die Seite".

 

[barodscheff]

AW: CSS, Überlappende Navigation mit runden Ecken

Danke für euer Feedback.
Tr3icio, ich bin selber ein Fan von CSS3 und von allem was innovativ ist. Und würde ich nur lustige Spaßseiten oder irgendwelche Blogs entwickeln wo es mir eigentlich egal ist, ob der Besucher klarkommt oder nicht, dann würde ich auch deine Meinung vertreten.
Aber bei mir geht's eben nicht um kleine Spielereien.

Ich programmiere hier für einen Kunden für den ein Besucher der mit dem Layout nicht klarkommt oder dem das Design einen negativen Eindruck vermittelt verlorenes Geld ist. Ich muss zielgruppenorientiert und Besucherfreundlich programmieren. Und so lange nicht 99% der Menschen moderne Browser verwenden, werde ich kein CSS3 verwenden.
Denn ich erstelle keine Seiten für mich, sondern für Besucher. Wenn ich niemandem Informationen bereitstellen wollte, könnte ich mir auch ein schönes Heft kaufen und alles dort reinmalen

 

[Tr3icio]

AW: CSS, Überlappende Navigation mit runden Ecken

Du wirst selbst in 10 Jahren noch davon träumen, dass 90% der Leute moderne Browser nutzen ;-)

Und sonst nimm halt position und fertig. Funktioniert eigentlich überall.
Und wenn der Kunde sowieso sagt "Muss nur funktionieren" dann kannst du auch gleich noch mit JS Sicherheit schaffen ;-)

"...könnte ich mir auch ein schönes Heft kaufen und alles dort reinmalen" Wenn ich eine Idee habe, dann hole ich meinen Block raus (einziger Vorteil an Schule: man hat immer einen Block dabei ;-)) und "male" meine Idee (alle User von PSD-Tutorials, die gerne malen, werden mich jetzt umbringen wollen). Weil zum lesen bin ich zu faul und zum schreiben erst recht.

Nein, aber positions sind wirklich sicher und so schwer auch nicht ^^
Vor allem gibt es ja auch noch "position: relative"

 

[barodscheff]

AW: CSS, Überlappende Navigation mit runden Ecken

Ich glaube du hast mein Problem nicht so ganz verstanden bzw. wir reden aneinander vorbei. Ich habe keineswegs ein Problem mit der Positionierung, zumindest nicht direkt. Es geht darum, dass die einzelnen Listen-Punkte leicht übereinander lappen und das grafisch und funktionell dargestellt werden muss.

Normalerweise wäre das auch kein Problem, nur bei hovern soll sich eben der aktive Punkt mit schwarzen Hintergrund(-Bild) färben. Da die Hintergrundbilder aber überlappen wird dieser Effekt nicht sauber.

Hier mal ein Bild von dem Effekt in Aktion.

 

[ske]

AW: CSS, Überlappende Navigation mit runden Ecken

Das Problem an dieser, wie auch an so vielen anderen, Geschichten in diesen Foren, scheint einfach zu sein, dass man als Problemsuchender denkt, dass es wirklich nur eine Lösung zu geben scheint.

Da aber bekanntlich viele Wege zu einer Lösung führen können, wäre es sicher am Besten, man hätte aktuellen Code um zu Debuggen oder um einen Weg zu finden, der es dir ermöglicht, dein Problem zu umschiffen.

Bilder helfen ein Problem zu visualisieren aber ich bezweifele, dass hier jemand Lust und Zeit hat, sich ein Szenario zu basteln, in dem dein Problem vor kommt. So kann meine Bitte an dich nur lauten, dass du uns hier ein bisschen etwas handfesteres gibst, als zwei Bilder.