Untermenü bei aktiver Seite hervorheben CSS

Hallo,
ich habe meine Seite neu aufgebaut. Dabei läuft eigentlich alles so, wie ich mir das vorgestellt habe. Nur das Menü auf der linken Seite ist noch nicht so wirklich gut.

Folgendes Problem:

  1. Ich hätte gerne, dass die Menüpunkte hervorgehoben werden, je nachdem auf welcher Seite man ist. Das ist aktuell leider nicht so.

  2. Die Menüunterpunkte (bei den Wohnungen sind welche) sind eingerückt. Das ist in Ordnung, aber nicht ganz so weit. Wo kann ich die Einrückung verringern?

Die Seite ist auf dangast.bplaced.net/c/index.html .
Das Stylesheet liegt hier dangast.bplaced.net/c/css/stil.css .

Würde mich freuen über Hinweise, wo ich dran drehen muss.

Danke!

Ein Untermenü konnte ich da nicht entdecken, gibt es wohl auch nicht.
Trotz teils anderen Verweistextes kommt man da bei den Verweisen im Menü unten
meist zu einem ‘disclaimer’ (da gibt es wohl ein Problem mit der Kodierung))
oder zu einer fehlerhaften Seite mit einem Impressum und ganz ohne Menü.

Verweise auf dieselbe Seite, auf der man gerade ist, sind sinnlos, wenn dort nicht per
Fragmentidentifizierer auf einen bestimmten Teil des Dokumentes verwiesen wird.
Sinnlose Verweise solltest du einfach weglassen, beziehungsweise etwa per PHP dafür
sorgen, daß sie duch normalen Text ohne Verweisfunktion ersetzt werden.

Einrückungen kann ich nicht so ganz nachvollziehen, das Menü scheint ja horizontal zentriert
zu sein. Da hängt es ansonsten davon ab, wie die Einrückung realisiert ist.
Nach der Stilvorlage sieht es ja so aus, als seien das Listen - obgleich ich die im Quelltext
der Seite nicht finden kann. Je nach Darstellungsprogramm muß man da jedenfalls padding
oder margin ändern.
Zudem kann die Einrückung von den Eigenschaften list-style-type und list-style-position abhängen.
Theoretisch sollte eigentlich die Eigenschaft marker-offset für den Versatz des
Listensymbols zuständig sind, was aber bei diversen Programmen nicht implementiert ist.

Hallo hoffmann,

vielen Dank schonmal. Das mit der Zeile unten stimmt. Die war noch nicht korrekt verlinkt. Danke für den Hinweis. Das hab ich jetzt nachgeholt.

Zu den sinnlosen Verweisen überleg ich nochmal. Es macht schon Sinn was Du schreibst. Derzeit steht bei mir noch Konsistenz über “Sinnhaftigkeit” und ich würde halt gerne, dass das immer in der gleichen Art hervorgehoben ist.

Das Menü hab ich mal unten angehängt. Was ich als Untermenü gesehen hab waren die Punkte Bilder, Ausstattung, etc. Im Anhang sieht man auch die Einrückung gut.

Und wie ich die Menüpunkte hervorhebe ist mir leider auch noch nicht klar.

Besten Gruß!

Edit: Das Menü wird der Javascript als php nachgeladen, ist aber auch nix besonderes. Zu finden unter: dangast.bplaced.net/c/menu.php

Effektiv macht das das Menü so unzugägnlich oder eben nicht existent.
Keine Funktion eines Projektes und schon gar nicht die einer Navigation darf von der Frage
abhängen, ob java-script, flash, Pixelgraphik etc interpretiert werden oder nicht.
Man entwirft so ein Projekt einfach so, daß es komplett ohne java-script, flash, CSS etc zugänglich
ist und die komplette Information liefert. Bei Bedarf kann man dann im nächsten Schritt CSS
zur Dekoration hinzufügen oder um die Nutzbarkeit zu verbessern, falls das aktiviert ist, aber ohne
die Nutzbarkeit ohne Interpretation wieder zu verschlechtern. In einem dritten Schritt kann man
dann bei Bedarf auch noch java-script als Dekoration oder Verbesserung der Nutzbarkeit
hinzufügen, ohne aber die Nutzbarkeit ohne dessen Interpretation wieder zu verschlechtern.
Das ist nichts besonderes, sondern Allgemeinwissen bei der Erstellung von Projekten.
Man spricht dann auch von Schichten, die erste ist die des eigentlichen Inhaltes, per (X)HTML
realisiert, die zweite ist die der Präsentation oder Dekoration, mit CSS umgesetzt.
Die dritte dient ebenfalls nur der Dekoration oder auch der Ergonomie und kann mit java-script
umgesetzt werden. Die erste Schicht, die Inhaltsschicht muß immer auch ohne die beiden
anderen problemlos funktionieren. Da nun nicht bekannt ist, ob CSS und java-script
interpretiert werden, müssen diese beiden Schichten dann jedenfalls so konzeptioniert sein,
daß sie ohne die jeweils andere zusammen mit der Inhaltsschicht komplett einen Sinn ergeben.

Es sollte in deinem Falle also einfach reichen, das Menü nur mit PHP-include einzubinden.
java-script brauchst du bei dem Projekt vermutlich gar nicht, das verkompliziert nur alles ohne
einen Vorteil zu bringen.
In dieser PHP-Datei mit der Navigation analysiert man dann, welche Seite das Menü gerade
eingebunden hat und bestimmt damit die Ausgabe, also etwa auch, welche Teile des Menüs
sichtbar sind, als Verweise dargestellt sind oder welche Klassen oder Fragmentidentifizierer
bekommen, um bei Bedarf mit der CSS-Stilvorlage besonders hervorgehoben zu werden.
Man kann dann also in der Stilvorlage recht abstrakt festlegen, wie besondere Strukturen
präsentiert werden sollen, während man in dem Navigations-PHP festlegt, welches die
hervorzuhebenden Elemente sind (meist eben per class oder id).
Gemäß obigem Schichtmodell wird man relevante inhaltliche Aspekte hingegen nicht
(ausschließlich) mit CSS festlegen, sondern primär durch Wahl geeigneter Elemente.
Da muß man sich dann fragen, was für den Nutzer wirklich inhaltlich relevant ist und was nur
der Dekoration dient oder für einige die Benutzbarkeit verbessern soll.

Veweise, die nichts bewirken, verwirren einige Nutzer oder verunsichern sie hinsichtlich der
Frage, ob das Projekt defekt ist oder ihr Darstellungsprogramm, sowas sollte man unbedingt
vermeiden. Wenn solche Nutzer zu der Meinung gelangen, daß es nicht an ihrem Programm
liegt, bekommen die schnell sich festsetzenden Eindruck, daß der Autor die Angelegenheit
nicht im Griff hat ;o)

OK, ich hab verstanden, dass ich kein javascript benutzen soll. Ich hab jetzt in alle Seiten mittels php include eine html Datei eingebunden.

Meine beiden Probleme der Einrückung und des Hervorhebens hab ich immer noch. Hast Du dazu vielleicht auch noch einen Tip?

Besten Dank!

PS: Hinzugrekommen ist nun noch, dass die Umalute als Fragezeichenzeichen (�) dargestellt werden… :frowning:

Naja, das schrieb ich ja eigentlich auch schon.

Einen Listenpunkt eines Untermenüs deiner Navigation kann man doch z.B.
mit folgendem Selektor ansprechen:
#navigation > li > ul > li {list-style: none inside; margin:0; padding:0}

Zudem könntest du einen Selektor hinzufügen, etwa so:
#navigation > #aktuell {background: #004; color: red}

Per PHP für die Navigation fügst du dann eben im aktuellen Listenpunkt einen
Fragmentidentifizierer #aktuell für die aktuelle Seite ein.
Dazu könntest du zum Beispiel für jeden Menüpunkt eine Variable vorhalten, die in der
Anfangsmarkierung des Listenpunktelementes per echo ausgegeben wird.
Die jeweilige Variable bleibt leer, nur für die aktuelle Seite kommt dann da id=“aktuell” rein.
Bei der sinnvolleren Variante steht in der Variable stattdessen normalerweise der komplette
Verweis, nur für die aktuelle Seite wird da etwa kein Attribut href angegeben.

Das klingt toll. Aber bei der Umsetzung haperts bei mir. :ps:

Wenn ich das hier in meine css einfüge tut sich exakt nichts.
#navigation > li > ul > li {list-style: none inside; margin:0; padding:0}

Wenn ich das richtig lese bedeutet das doch, dass diese css Anweisung nur für das Element gilt , was unter navigation und dann noch unter li und ul und li angelegt ist.

Meine Liste fängt doch mit ul an. warum geht’s mit li los? Und warum ein zweites li… ich untergliedere ja nur einmal?

Vielen Dank schonmal im Voraus!

Die Einrückung scheint ja jetzt reduziert zu sein.
Und es gibt auch eine andere Hintergrundfarbe für das aktuelle Untermenü, nicht aber
für die aktuelle Seite.

#navigation ist doch bei dir ein ul, also paßt das doch.
li ist das einzige Element, was in ul auftreten kann und für ein Untermenü verwendest du wieder
ein ul, wenn dessen Listenpunkte keine Einrückung haben sollen, kann man das so notieren.
Wenn andere Anweisungen in deiner CSS-Datei eine größere Spezifität haben, wirken die
natürlich, das muß man dann gegebenenfalls anpassen.

Es kann nützlich sein, um sowas zu testen, erstmal das restliche CSS nicht einzubinden und
nur zu gucken, ob oder wie das wirkt, was man gerade bearbeitet. Da deine Stilvorlage bereits
einige Anweisungen zur Navigation enthalten, solltest du das entweder komplett verstehen oder
schrittweise aufbauen, damit du verstehst, was welche Wirkung hat.

Ansonsten sieht es so aus, als habe deine heutige Version der Seite eine Kodierungsproblem.
Zumindest mein Darstellungsprogramm versucht es mit UTF-8 (steht auch so in deinen
Meta-Angaben), kodiert ist die Seite aber wohl mit ISO-8859-1.

OK. Die Seite ist in einem neuen (übersichtlichem CSS). Alles aufgeräumt und hoffentlich gut nachvollziehbar.

Nur die Hervorhebung der aktiven Seite im Menü klappt noch nicht.

[quote]Per PHP für die Navigation fügst du dann eben im aktuellen Listenpunkt einen
Fragmentidentifizierer #aktuell für die aktuelle Seite ein.
Dazu könntest du zum Beispiel für jeden Menüpunkt eine Variable vorhalten, die in der
Anfangsmarkierung des Listenpunktelementes per echo ausgegeben wird.
Die jeweilige Variable bleibt leer, nur für die aktuelle Seite kommt dann da id=“aktuell” rein.[/quote]

Das kommt in mein Menü rein, richtig? Nur hab ich da ja schon eine ID:

Und wie finde ich heraus wann ich womit die Variable befülle? Mit einer großen if else Schleife in PHP, die ich dem ganzen vorstelle und die anhand der URL (mit $url = $_SERVER[‘REQUEST_URI’]:wink: dann die "#aktuel"l Zuweisung vornimmt?

Edit: Habs geschafft! Genau wie gerade beschrieben. Vermutlich gehts einfacher, aber es funktioniert!