Hallo.
danke erst mal für Deine Geduld.
Danke, dass du sie zu schätzen weißt.
Habe jetzt durch das ROT bei "#footer li" gesehen, dass dann der rote Bereich auf der rechten Seite den weißen 8px-Rand überschneidet, links ist dafür ein Abstand. Wenn ich nur #footer mit grünem Hintergrund kenntlich mache, geht nichts über den rechten weißen Rand. (Warum nicht auch der grüne Bereich??) Aber man sieht, dass der Footer (grün) anscheinend nicht breit genug ist, obwohl auch 858px bleibt ein minimaler Abstand zum Layoutrahmenrand. Ohjeeee.....
Das fällt zwar nicht auf, wenn alles dieselbe Hintergrundfarbe hat.
Deshalb hatte ich ja dazu geraten.
Ist es trotzdem kritisch?
Kritisch kann es irgendwann werden, wenn anfängliche Fehler das Weiterkommen erschweren. Natürlich ist es also besser, von Anfang an möglichst sauber zu arbeiten. Aber das ist gerade für Anfänger, die aus sehr vielen unterschiedlichen Richtungen Ratschläge annehmen, ohne diese bereits bewerten zu können, sicher nicht einfach.
Deine Frage kannst du dir also nur selbst beantworten. Wenn die Verweise auch später keine Hintergrundfarbe, kein Hintergrundbild und keinen Rahmen bekommen sollen, funktioniert deine Lösung ja hinreichend gut. Wenn du die Verweise später noch aufwendiger gestalten möchtest, wird dir dein bisheriger Code hingegen vermutlich auf die Füße fallen.
Was aber hat dann "text-align: right;" für eine Auswirkung, wenn es bei
#footer oder #footer li steht??
Ich erkenne (noch) keine.
Da ist auch nichts zu erkennen. #footer ul ist ein Blockelement, nimmt also ohnehin die gesamte Breite von #footer ein. -- Dass du #footer ul explizit eine feste Breite gegeben hast, können wir dabei sogar vernachlässigen. -- Und wenn etwas genau so breit ist wie sein Container, kann man es darin nicht verschieben. #footer li hingegen hast du die Eigenschaft display: inline; zugewiesen, weshalb die Listenpunkte nur so breit sind wie ihr jeweiliger Inhalt. Daher lässt auch dieser sich nicht in seinen jeweiligen Containern, den Listenpunkten selbst, ausrichten.
Und das alles, weil ich bei #layoutrahmen anstatt "position:absolute" nun "margin: 15px auto;" habe. Das eine Problem (fehlender Außenrand unten) ist gelöst, dafür ein anderes entstanden. So ganz steige ich da mit diesen Abhängigkeiten noch nicht durch. :-(
Das ist auch nicht ganz einfach. position: absolute; ist wirklich nur etwas für Fortgeschrittene. Aber dein eigentliches Problem ist, dass du viel zu viele Elemente hast und ihnen viel zu viele Eigenschaften zuweist. Da verwundert es kaum, wenn du die Abhängigkeiten nicht verstehst.
Lese zwar dauernd, nicht nur selfhtml, sondern auch ccs4you und ca. ein Dutzend anderer CSS-Seiten, auch Little boxes, aber als Anfänger raucht einem da ganz schön der Kopf. Manches ist einfach super, wenn einem "ein Mensch" in ganz schlichten Worten nachhilft ;-)
Ich versuche das hier mal. Und in Anbetracht der Zahl von Neulingen, bei denen das in diesem Forum bereits gelungen ist, bin ich da auch ganz optimistisch.
Die div-Elemente sollten das Grundgerüst darstellen, in das dann Navi und Content-Text eingefügt werden sollen. Habe ich aus Peter Müllers "Little Boxes": Die Webseite mit div in Bereiche einteilen.
Ist das wohl nicht gut?
Für wirklich komplexe Projekte wird das unerlässlich sein, aber für jemanden, der gerade die Grundlagen erlernt, ist diese Herangehensweise alles andere als hilfreich. Weshalb? Nun, du hast doch schon einige "Boxes", seien sie nun "Little" oder "Big": <html> ist eine Box, <body> ist eine Box, <ul> ist eine Box. Weiter oben hatten wir ja auch schon festgestellt, dass beispielsweise deine Liste exakt die gleiche Fläche einnimmt wie das sie umgebende <div>-Element.
Außerdem solltest du sinnvolle Elemente einsetzen, wo es nur geht. Kompliziert und widersinnig wird es schon noch früh genug werden. Mache es dir also möglichst einfach.
Wie so etwas aussehen könnte, kannst du dir ja vielleicht mal ansehen.
MfG, at