zweispaltiges Layout - gleiche Spaltenlänge

[Tronjer]

Lieber Tronjer

Bevor ich weitermache, möchte ich kurz auf Folgendes Problem aufmerksam machen, das ich entdeckt habe, als ich soeben versuchte, die aktualisierte Navi (in herkömmlicher Weise) "scharf" zu schalten ("aktualisiert" heisst auf dem Stand vor Deinem vorletzten Posting):

Vermutlich die Deklaration "visibility:hidden" zum Selektor #navi li ul stört, was unter ihr ist, und macht das auch irgendwie unsichtbar. Ich bin nicht ganz sicher, ob diese (meine) Interpretation der Fehlerursache stimmt, aber nach langem Ausprobieren war dies die "verdächtige" Stelle. Damit der Fehler für Dich verständlich ist, hier ein (neuer) Testlink (bisheriger HTML-Code der Startseite + CSS der aktualisierten Navi):

Michael Ritter

Lg Xeno

Das ist durchaus möglich. Wir erstellen die Navigation ja erst mal als separate Einheit und bügeln eventuelle Probleme später aus. Außerdem kann ich deine Seite lediglich temporär im Firebug editieren und da mag sich auch mal ein Fehler meinerseits einschleichen. Deshalb machen wir es ja peu á peu. In dem Maße, wie du du den Code anpasst, fällt es mir einfacher, darauf aufzubauen.

Info am Rande: Es gibt in CSS drei Möglichkeiten, Dinge verschwinden zu lassen. Die erste ist visibility:hidden. Dabei wird ein Element lediglich unsichtbar gemacht, nimmt aber trotzdem seinen ursprünglichen Raum ein. Die zweite heißt display:none und blendet das Element vollständig aus. Die dritte wäre opacity und macht auf einer Skala von 0-1 Elemente durchsichtig. Jede dieser Methoden hat ihre Vor- und Nachteile.

Danach gehts dann Richtung JavaScript - ich habe mir übrigens heute Literatur dazu und zu jQuery bestellt, die ich schon morgen haben werde. Ich freue mich darauf auch dort herumzuwüten!

Frage doch, bevor dich die Kaufwut packt. ;)

Es existieren genügend kostenlose Ressourcen im Netz und JavaScript hat Zeit, bis du mit den Grundlagen von HTML, CSS und UI-Design vertraut bist. Je mehr du dir aufbürdest, umso schneller verlierst du den Überblick.

Richtig gesehen, das nervt mich schon länger (wenn man beim Hovern einen Farbwechsel programmiert hat, stört es übrigens noch mehr als vorher). Ich habe jetzt mal die beiden Elemente mit den langen Texte als Klasse angesprochen (nth-child wird vom IE 8 ärgerlicherweise nicht unterstützt) und sie anders formatiert.

Richtig erkannt: die alten IE-Versionen können mit nth-child nicht viel anfangen.

Die Navi mit CSS 3 sieht super aus. Leider nur im FF; Ie 9 und zu meiner Überraschung auch Chrome zeigen den Farbverlauf nicht (die anderen Effekte schon).

Schon klar. ich wollte den Absatz kurz halten und habe den Code daher lediglich für Firefox gepostet.

background: -moz-linear-gradient(center top , #FEFCEA 0%, #F6F939 100%) repeat scroll 0 0 transparent;

CSS3 Gradienten sind noch kein Webstandard und lassen sich bisher nur mit Unterstützung sogenannter vendor-prefixes darstellen. -moz steht als Abkürzung für Mozilla (Firefox), Safari verwendet dafür -webkit und Opera das -o. Zusätzlich ist die Syntax für die Browser noch unterschiedlich. Aber keine Angst, dass muss man nicht auswendig beherrschen, denn es gibt ein schickes Tool dafür. Klick hier einfach auf das gewünschte Preset und kopiere den generierten Code. Die Funktion des Sliders erschließt sich nicht unbedingt auf Anhieb, sofern man noch keinen Kontakt mit Photoshop hatte. Aber das wäre dann wieder eine andere Baustelle.

Ultimate CSS Gradient Generator - ColorZilla.com

Weil wir gerade bei Tools sind: den Firebug wirst ja hoffentlich haben, auch wenn dir dessen Funktionen noch nicht alle vertraut sein mögen. Installiere dir zusätzlich mal die Add-Ons ColorZilla (damit "klaut" man Farben) und die Web Developer Toolbar.

 

[Xeno]

Das ist durchaus möglich. Wir erstellen die Navigation ja erst mal als separate Einheit und bügeln eventuelle Probleme später aus. Außerdem kann ich deine Seite lediglich temporär im Firebug editieren und da mag sich auch mal ein Fehler meinerseits einschleichen. Deshalb machen wir es ja peu á peu. In dem Maße, wie du du den Code anpasst, fällt es mir einfacher, darauf aufzubauen.

Alles klar! Mir ging's ja nicht ums Herummotzen (wäre auch eher anmassend), sondern nur um eine Beobachtung. Neben dem Ausprobieren im CSS hat mich auch das von Dir gegen Schluss erwähnte FF-Adon Firebug auf diese Spur gebracht, und zwar, weil es mir anzeigte, dass die komische weisse Fläche "eigentlich" von Elementen wie <p> durchaus ausgefüllt wird - also führt die Spur in der Tendenz zur Eigenschaft visibility.

Info am Rande: Es gibt in CSS drei Möglichkeiten, Dinge verschwinden zu lassen. Die erste ist visibility:hidden. Dabei wird ein Element lediglich unsichtbar gemacht, nimmt aber trotzdem seinen ursprünglichen Raum ein. Die zweite heißt display:none und blendet das Element vollständig aus. Die dritte wäre opacity und macht auf einer Skala von 0-1 Elemente durchsichtig. Jede dieser Methoden hat ihre Vor- und Nachteile.

Interessant und lehhreich! Wäre denn hier display:none nicht besser? Aber ist im Moment, wie Du völlig richtig sagst, eigentlich nicht das Hauptthema.

Frage doch, bevor dich die Kaufwut packt. ;)

Es existieren genügend kostenlose Ressourcen im Netz und JavaScript hat Zeit, bis du mit den Grundlagen von HTML, CSS und UI-Design vertraut bist. Je mehr du dir aufbürdest, umso schneller verlierst du den Überblick.

Sicher nicht unberechtigt, die Bemerkung. Ich habe aber gerne Bücher zum Nachschlagen (nicht zwingend zum Durcharbeiten von A bis Z), auch zu technischen Themen. Ich bin da etwas altmodisch. Zudem kann es ja nicht sein, dass Du mir einen Vollkurs in JavaScript verpassen musst in diesem Fred, ich sage das auch zu Deinem Schutz.

Schon klar. ich wollte den Absatz kurz halten und habe den Code daher lediglich für Firefox gepostet.

background: -moz-linear-gradient(center top , #FEFCEA 0%, #F6F939 100%) repeat scroll 0 0 transparent;

CSS3 Gradienten sind noch kein Webstandard und lassen sich bisher nur mit Unterstützung sogenannter vendor-prefixes darstellen. -moz steht als Abkürzung für Mozilla (Firefox), Safari verwendet dafür -webkit und Opera das -o. Zusätzlich ist die Syntax für die Browser noch unterschiedlich.

Ja richtig, das hätte ich eigentlich dem Präfix selber ansehen sollen.

Aber keine Angst, dass muss man nicht auswendig beherrschen, denn es gibt ein schickes Tool dafür. Klick hier einfach auf das gewünschte Preset und kopiere den generierten Code. Die Funktion des Sliders erschließt sich nicht unbedingt auf Anhieb, sofern man noch keinen Kontakt mit Photoshop hatte. Aber das wäre dann wieder eine andere Baustelle.

Ultimate CSS Gradient Generator - ColorZilla.com

Ziemlich colle Seite, by the way!

Weil wir gerade bei Tools sind: den Firebug wirst ja hoffentlich haben, auch wenn dir dessen Funktionen noch nicht alle vertraut sein mögen. Installiere dir zusätzlich mal die Add-Ons ColorZilla (damit "klaut" man Farben) und die Web Developer Toolbar.

Alle diese Addons sind schon installiert (wirklich!).

Melde mich morgen wieder in Sachen Implementierung des JavaScript-Codes!

Lg Xeno

 

[Tronjer]

Sicher nicht unberechtigt, die Bemerkung. Ich habe aber gerne Bücher zum Nachschlagen (nicht zwingend zum Durcharbeiten von A bis Z), auch zu technischen Themen. Ich bin da etwas altmodisch. Zudem kann es ja nicht sein, dass Du mir einen Vollkurs in JavaScript verpassen musst in diesem Fred, ich sage das auch zu Deinem Schutz.

Du musst mich nicht schützen, darfst dich aber, sollte es dich mal nach Berlin verschlagen, gerne mit ein bis zwei Bier revanchieren. ;)

Wenn ich ein Buch zu JavaScript empfehlen sollte, dann wäre es der Flanagan. Ein ausführlicheres Werk zum Nachschlagen gibt es nicht:

JavaScript - Das umfassende Referenzwerk, 6. Auflage

Deinen aktualisierten Code schaue ich morgen an.

 

[Tronjer]

Ein paar Verbesserungen, die mir noch eingefallen sind: Auf navi li a kein padding, sondern eine line-height. Sonst geht der Hover-Effekt nicht pber die volle Höhe. Wenn du den Hauptmenüpunkten die Klasse .border verpasst, könnte man rechts noch einen Rand zur Abgrenzung setzen. Der Background der Untermenüpunkte sollte identisch mit dem der Navigationsleiste sein, und ich würde vielleicht noch beim letzten Untermenüpunkt die Ecken abrunden. Aber das ist natürlich alles Geschmackssache. Nur die überlangen Menütexte müssen unbedingt noch angepasst werden.

Mein Vorschlag:

#navi li a {
    display: block;
    line-height: 45px;
}

#navi li ul li a {
    line-height: 40px;
    padding-left: 10px;
}

#navi li ul li {
    background: none repeat scroll 0 0 #F7F94F;
    height: 40px;
}

#navi li ul li:last-child {
    border-radius: 0 0 8px 8px;
}
.border {
    border-right: 1px solid white;
}

 

[Xeno]

Nach Berlin sind es halt gut 1000 Kilometer von hier, aber ich liebe die Stadt, ich habe dort 1996 studiert (wie Du auf meiner Seite nachlesen kannst). Ich war seither zweimal dort (2004 und 2007), wäre mal wieder Zeit. Wer weiss, ob sich je ein reales Treffen ergibt? Mich tät's freuen.

Ich habe noch folgendes an sich mickriges Problem mit der Navi: Die abgerundeten Ecken (aufgrund der Deklaration border-radius, wie Du natürlich weisst) erscheint optisch nur rechts und nicht auch links. Es hat soweit ersichtlich nichts damit zu tun, dass auf der Testseite das <li> links aussen gerade das mit <span> versehene ist; ich habe es auch mit einer anderen Unterseite getestet, und es war auch dort so. Weisst Du ggf. Abhilfe? Ich würde diese Optik sonst gerne scharf schalten; der IE8 ist im Grunde der einzige noch relevante Browser, der das nicht versteht, und dass IE8-Beaucher halt keine abgerundeten Ecken sehen, wäre verschmerzbar.

Die nach Dir benannte Navi-Testseite wie immer hier: Michael Ritter

So, jetzt lese ich mich in JavaScript ein (beim Vormittagskaffee habe ich erste Eindrücke gewonnen - tönt höchst interessant, aber ohne Kenntnisse einer ["richtigen"] Programmiersprache ist es schon noch ein dickes Ei für mich). Natürlich habe ich nicht die Erwartung Deinen diesbezüglichen Code auf Anhieb restlos zu verstehen (Du ja auch nicht gemäss Deinem Posting), geht mir um ein minimales Grundverständnis. Im Laufe des Abends baue ich das Ganze dann ein wie von Dir vorgeschlagen.

Lg Xeno

 

[Tronjer]

Ich habe noch folgendes an sich mickriges Problem mit der Navi: Die abgerundeten Ecken (aufgrund der Deklaration border-radius, wie Du natürlich weisst) erscheint optisch nur rechts und nicht auch links. Es hat soweit ersichtlich nichts damit zu tun, dass auf der Testseite das <li> links aussen gerade das mit <span> versehene ist; ich habe es auch mit einer anderen Unterseite getestet, und es war auch dort so. Weisst Du ggf. Abhilfe? Ich würde diese Optik sonst gerne scharf schalten; der IE8 ist im Grunde der einzige noch relevante Browser, der das nicht versteht, und dass IE8-Beaucher halt keine abgerundeten Ecken sehen, wäre verschmerzbar.
Lg Xeno

Einfach einen border-radius auf den <span> legen.

#navi span {
    background-color: #FFFF00;
    border-radius: 8px 0 0 8px;


}

JavaScript ist eine richtige Programmiersprache und dabei leider nicht eine der zugängigsten. Wenn du im Laufe des Abends versteht, was die Elemente Funktion, Variable, Array und String bedeuten, könnte ich dir den gestern geposteten Code sogar erklären.

 

[Xeno]

Um das kurz theoretisch zu erläutern: Die Funktion liest die URL Michael Ritter, extrahiert daraus den Teil testseitetronjer und hängt an die korrespondierende ID die CSS-Klasse .aktiv an.

Ich habe es jetzt mal gemacht (ohne dass ich schon gerade alles verstehe!!). Ich habe jQuery lokal eingebunden (also heruntergeladen und auf den Server geladen) und so eingebunden (hoffentlich richtig!).

Ich denke, dass alles in Ordnung ist ( Michael Ritter ) Was denkst Du?

Ich habe noch ein etwas nerviges Nebenproblem: Der Test hat lokal, im Offline-Modus, ärgerlicherweise nicht funktioniert, sondern erst mit der auf den Server geladenen Version. Woran könnte das liegen? Beobachtung: Wenn ich nur die .js-Datei vom jQuery anklicke, dann meldet mein Windows (Win7 64bit) einen Error. Kann aber natürlich gut sein, dass das ein unauffäliger Befund ist (ich weiss nicht, was "eigentlich" passieren sollte, wenn man "einfach so" eine .js-Datei anklickt).

Lg Xeno

 

[Xeno]

Ich habe noch versucht das Ganze mit der jQuery-Einbindung über Google zu machen, und das funktioniert jetzt weder lokal noch auf dem Server (Link dazu: Michael Ritter )!!

Jetzt bin ich etwas verwirrt. Das Problem muss irgendwie am HTML-Dokument liegen und nicht an der CSS-Datei, denn die ist ja völlig identisch.

Vermutlich liegt irgendein trivialer Fehler meinerseits vor.

Lg Xeno

 

[Tronjer]

jQuery ist doch richtig eingebunden. Du musst allerdings die IDs analog zu den Seitennamen in der URL benennen. Wenn oben testseitetronjer2 und unten testseitetronjer steht, dann funktioniert es natürlich nicht.

 

[Xeno]

Einfach einen border-radius auf den <span> legen.

#navi span {
    background-color: #FFFF00;
    border-radius: 8px 0 0 8px;


}

Danke! Man muss aber die Deklaration border-radius dem #navi li a, span zuweisen, nicht dem #navi span. Ich hab's scharf geschaltet ( Michael Ritter ).

Lg Xeno

 

[Xeno]

jQuery ist doch richtig eingebunden. Du musst allerdings die IDs analog zu den Seitennamen in der URL benennen. Wenn oben testseitetronjer2 und unten testseitetronjer steht, dann funktioniert es natürlich nicht.

Ja, weiss Gott! *fluch*

Warum funktioniert es lokal (offline) nicht (unabhängig von der Einbindungsart)? Ist das einfach so?

Lg Xeno

 

[Tronjer]

Du hast da irgend etwas falsch gemacht. Runde Ecken soll es nur beim ersten Element der Hauptmenüleiste oben und unten links, sowie im Untermenü beim letzen Element unten links und rechts geben.

Warum funktioniert es lokal (offline) nicht (unabhängig von der Einbindungsart)? Ist das einfach so?

Es geht auch lokal, aber offline solltest du ohnehin nie arbeiten. ;)

 

[Xeno]

Du hast da irgend etwas falsch gemacht. Runde Ecken soll es nur beim ersten Element der Hauptmenüleiste oben und unten links, sowie im Untermenü beim letzen Element unten links und rechts geben.

Ja, ich hab's gesehen! Ich konnte den Effekt bisher nicht wie gewünscht hinkriegen. Ich schaue es mir morgen nochmals an.

Danke für alles!

Lg Xeno

P.S.: Soll ich dieses Sonderproblem ggf. auslagern und einen eigenen Fred daraus machen, oder ist das nicht erwünscht?

 

[Xeno]

Ich kam dem Ziel soeben näher! *jubilier* : Michael Ritter

Schwierig sind runde Ecken (nur) am Ende einer "Untermenüpunkteliste" hinzubiegen. Würde wohl leider voraussetzen, dass man jeweils das letzte <a> jeder solchen Liste (sind nur zwei realisiert zur Zeit) mit einer KLasse anspricht, da sonst die Deklaration für #navi li a alles überschreibt. Etwas unbefridigend ist noch, dass im Obermenü der gehoverte Punkt jeweils abgerundet ist, in den Untermenüs dagegen nicht. Für den Nobelpreis im Navi-Bauen reicht's noch nicht.

Sry das JavaScript etwas zu kurz kam heute!

Lg Xeno

 

[Tronjer]

So schwer ist das nicht. Du könntest dem Element eine CSS-Klasse zuweisen oder es mit :last-child ansprechen.

 

[Xeno]

Morgen Tronjer

Kurz zum JavaScript-Code: Ich habe ihn zu verstehen versucht und bin ziemlich weit gekommen (mit ziemlich viel Zeitaufwand, wie Du richtig geahnt hast, JavaScript ist ohne Programmierkenntnisse schon deutlich schwieriger als HTML oder CSS). Ich poste jetzt nicht im Detail, was ich alles halbwegs zu verstehen glaube, sondern beschränke mich auf das, was ich eindeutig nicht verstehe:

Was ich nach meiner Selbsteinschätzung nicht verstehe, ist die Zeile (bzw einen Teil der Zeile)

var current = path.slice(0,-4);

Ich hätte jetzt gesagt, hier geht es um Folgendes: Wenn der Dokumentname so lautet, dass er weder mit einem Hauptmenüpunkt und damit einer ID identisch ist noch sich daraus ableiten lässt (wie bei politik1.htm, das zu "Politik" gehört"), dann muss die Funktion, die Du definiert hast, irgendwie "merken", was jetzt hervorgehoben werden soll. Das tut der Teil .slice(0,-4) - aber wie? Es gehören ja im Moment all diese fraglichen Dokumente zu "Vereine", aber da das im Code gar nicht vorkommt, ist es möglicherweise sogar allgemein programmiert (könnte ich testen, wenn ich ein neues Untermenüdokument zu einem anderen Hauptmenüpunkt mache, etwa zu Links).

Zur Übersicht: Dein Gesamtcode lautete:

function changeMenuColor() {         		var path = window.location.pathname.split('/');         		path = path[1];         		var current = path.slice(0,-4);         		$('#' + current).addClass('aktiv');     											}     			changeMenuColor();

Lg Xeno

 

[Tronjer]

split() und slice() sind Methoden des String Objects.
JavaScript String Object

Die Grundlagen der Webprogrammierung lassen sich mit PHP einfacher erlernen, denn viele der Basiskonzepte, wie Kontrollstrukturen, Schleifen, etc. gelten für beide Sprachen. JS ist hier sperriger, weil wir es dort fast immer mit Methoden zu tun haben, die auf Objekte angewandt werden. Um die Funktion nachfolgend zu erklären:

window.location.pathname gibt einen Teilstring der URL zurück.
Javascript window location

Gib mal in der Konsole ein:

var path = window.location.pathname;
alert (path);
alert(typeof(path));

Damit kannst du sowohl den Inhalt als auch den Rückgabewert der Variablen ausgeben. Hängt man an dieses location object zusätzlich die Methode split('/') an, erhält man ein Array von Substrings mit dem slash(/) als Begrenzer.

var path = window.location.pathname.split('/');
var path = path[1];
alert(path);

Damit extrahieren wir aus 'www.michael-ritter.ch/politik.htm das' politik.htm'. Das ist allerdings noch nicht ganz das, was wir wollen. Zum Schluß soll nur noch 'politik' übrig bleibenund außerdem brauchen wir eine universale Funktion, die sich auf alle Unterseiten anwenden lässt, gleich ob diese kurz.htm oder ichbin einganzlangertitel.htm heißen. Also müssen wir den Inhalt noch weiter splitten, und da wir nicht wissen, wie lang die anderen Seitentitel sind, fangen wir mit dem ersten Zeichen von vorne an und nehmen die letzten 4 Zeichen von hinten (.htm) weg. Dafür verwenden wir die Methode slice(). Wichtig zu wissen ist hier, dass JS und PHP null-indexiert sind. Das 'p' von 'politik' ist aus Sicht von JavaScript das nullte Zeichen und nicht das erste.

current = path;
current.slice(0, -4)

Hier verkürzen wir 'politik.htm' auf 'politik'. Die Variablennamen (path und current) lassen sich frei wählen. Alles andere sind Schlüsselwörter von JavaScript.

Im letzten Schritt können wir auf das einfacher zu lesende jQuery zurückgreifen. jQuery Anweisungen sind meist nach der Syntax:

$('htm-selektor').eineMethode();

aufgebaut.

Erst einmal verbinden wir das Zeichen '#' mit dem Inhalt der Variablen current um daraus den ID-Namen ''#politik' zu erstellen. Die Syntax für die Verknüpfung von Strings und Variablen, mit den vielen einfachen und doppelten Anführungsstrichen, ist gerade für Einsteiger eine Frust- und Fehlerquelle. Ich empfehle dir, einen Editor zu verwenden, der potenzielle Fehler anzeigt.

Zum Schluss weisen wir dann der dynamisch gebildeten ID unsere CSS-Klasse zu. Wie viele jQuery-Funktionen ist addClass() eigentlich selbst erklärend.

$('#' + current).addClass('aktiv');

In der Programmierung gibt es meistens viele Wege, um zum Ziel zu gelangen. Das obere Beispiel beschreibt nur einen möglichen, und wir können später auch ein Konstrukt in PHP dafür bauen.

 

[Xeno]

So schwer ist das nicht. Du könntest dem Element eine CSS-Klasse zuweisen oder es mit :last-child ansprechen.

Ja, ist gemacht ( Michael Ritter ). Die korrekte Syntax herauszufinden war nicht ganz trivial, weil man :last-child einem <li> zuordnen muss und das dann noch <a> enthalten muss.

Du hast mir etwas früher noch ein Posting geschrieben zur Navi (nicht bezüglich JavaScript), das arbeite ich als nächstes ab.

Liebe Grüsse!

Xeno

 

[Xeno]

Lieber Tronjer

Ich habe Deine Inputs wie folgt (teilweise) verarbeitet:

Ein paar Verbesserungen, die mir noch eingefallen sind: Auf navi li a kein padding, sondern eine line-height. Sonst geht der Hover-Effekt nicht pber die volle Höhe.

Ich wollte es korrigieren, den theoretisch hast Du sicher recht. Aber es gab zwei Probleme: Erstens braucht es trotzdem ein padding-left, denn sonst stehen die Texte der Untermenüpunkte am linken Rand, was schlechter aussieht als vorher. Zweitens verschärft line-height die ungelöste Problematik zweizeiliger Texte in Untermenüpunkten (logischerweise eigentlich, weil dann ein grosser Abstand zwischen den beiden Zeilen entsteht, weil sie einzeln "gemessen" werden). Im Moment lasse ich es deahalb.

Wenn du den Hauptmenüpunkten die Klasse .border verpasst, könnte man rechts noch einen Rand zur Abgrenzung setzen.

Ja, ich finde auch, dass es noch Ränder braucht, und zwar vertikale zwischen den Menüpunkten und horizontale zwischen den Untermenüpunkten. Mache ich ein ander Mal.

Der Background der Untermenüpunkte sollte identisch mit dem der Navigationsleiste sein,...

Das ist (und war immer, oder nicht?) der Fall.

...und ich würde vielleicht noch beim letzten Untermenüpunkt die Ecken abrunden.

Erledigt, bis auf folgenden sophistischen Einzelfall: Wenn der (einzige) Untermenüpunkt von "Politik" gehovert wird, dann hat die Hoverung keine abgerundeten Ecken. Das liegt daran, dass er nicht gleich formatiert werden müsste wie ein erster Untermenüpunkt, dem noch mindestens ein weiterer folgt... Ich lasse dieses Problem im Moment.

(...). Nur die überlangen Menütexte müssen unbedingt noch angepasst werden.

Ja. Die momentane Lösung hat das Problem nicht gelöst, aber entschärft.

Ich erwähne noch, dass ich den Schattenwurf bei der Navi realisiert habe (mit box-shadow, wie Du anderswo vorgeschlagen hattest).

Lg Xeno

 

[Tronjer]

Um die Texte der Untermenüpunkte vom linken Rand wegzurücken, würde ein

#navi li ul li a {   padding-left: 10px; }

völlig ausreichen.

Davon abgesehen musst du natürlich meine Vorschläge nicht übernehmen. Es soll hier eher darum gehen, dich mit den Techniken und Zusammenhängen vertraut zu machen. Wie du deine Navigation letzendlich gestaltest, bleibt natürlich dir überlassen. Ich erinnere auch noch mal an meinen Vorschlag, sich die Menüleisten von professionellen Webseiten anzuschauen und diese eventuell nachzubauen.

In gewisser Weiser erinnert mich dein Projekt an die Situation, in welcher ich mich selber mal vor etwa vor drei Jahren befand, und wie ich oft genug kurz davor gewesen bin, den ganzen Mist einfach hinzuschmeißen. Aber ich war hartnäckig genug, meine jeweiligen Mentoren solange zu nerven, bis ich die Dinge verstanden hatte, und genau das solltest du auch tun. ;)