position: fixed

[Franz]

Also, was hier als erstes ins Auge springt, das sind die grellen, sich beißenden und im Kontext deiner Seite ausgedrückt: etwas unappetitlichen Farben, aber ich nehme an, dass es sich hier nur um eine Testseite handelt und du die Farben absichtlich so - sagen wir, kontrastreich - gewählt hast, um die einzelnen Layoutelemente besser unterscheiden zu können, und es sich dabei nicht um die endgültige Farbpalette handelt, mit der du deine Seite gestalten willst, weshalb ich das nur am Rande erwähnen möchte.

Die Rezepteseite ist ein Teilprojekt. Da ich mich mit CSS3 ernsthaft beschäftigen will/muß, verwende ich das Projekt um die einzelnen Formatierungmethoden auszuprobieren bzw. vielleicht dadurch gleich ein passendes Dokument zu erstellen. Gestaltung, Farben, Rahmen, etc. sind daher noch offen. Rahmen und Farben dienen vorerst der optischen Vorstellung bzw. Effekte sichtbar zu machen. Ich dachte es ist sinnvoller die Übungen gleich an meinem Projekt durchzuführen.

Der zweite und und wesentlich wichtigere Punkt, den ich ansprechen möchte ist, dass deine Seite, so wie sie derzeit aufgebaut ist, praktisch nur auf wirklich großen, um nicht zu sagen riesigen Viewports überhaupt nutzbar ist, da sich deine fixierte Seitennavigation, wenn man die Seite in einem kleineren Fenster anschaut, beim horizontalen Scrollen über deine Rezepte schiebt, so dass diese nicht mehr lesbar sind.

Dessen bin ich mir bewußt. Beim alten Dokument habe ich Tabellen und anderes in Prozenten bzw. Verhältnissen angegeben, sodaß sich die Seite auf jedem Rechner einstellt. Derzeit arbeite ich auf einem iMac 27" und nach dem Abschluß möchte ich es noch am Mac Book Pro bzw. iPhone meines Sohnes testen. Das Thema "Viewport" habe ich mir durchgelesen allerdings fehlt mir noch das Verständnis. Ist nicht html die Gesamtbreite des Bildschirmes? Wieviel Platz nimmt Viewport, wieviel html, bzw. body von der Bildschirmbreite ein?
Nachtrag: Habe es gleich ausgetestet. Die Startseite ist in Ordnung jedoch wenn man das Rezept lesen möchte gibt es ein Problem. Mit dem Mac Book Pro 13" gibt es keine Probleme, außer, daß die seitlichen Ränder sich verändern.

Darüber hinaus hast du für die Abmessungen deiner Elemente keine relativen Werte verwendet, so dass das gesamte Layout starr und unflexibel ist, daher mein Stichwort für die Internetsuche hier: Responsive Design.

Sollte dann wirklich bei den Übungen auch die relativen Werte gleich mitberücksichtigen.

Der zugehörige Artikel im Wiki ist leider noch nicht fertig, aber die dort formulierte Empfehlung, dass die Darstellung der Seite nicht an eine bestimmte Viewportgröße gekoppelt sein sondern sich vielmehr an den Inhalten ausrichten sollte, wäre ein Grundsatz, über den ich mir an deiner Stelle vielleicht ein paar Gedanken machen würde:

Ich meine, stell dir vor, ein Besucher deiner Seite möchte eines deiner Rezepte nachkochen. Dann ist kaum davon auszugehen, dass er seinen Desktoprechner inklusive 24-Zoll-Monitor in die Küche verfrachten wird, um das Rezept beim Kochen im Blick zu behalten und sich mit der Beigabe von Knoblauch nicht zu vertun!

Er könnte das Rezept zwar theoretisch ausdrucken, abschreiben oder auswendiglernen, aber wirklich benutzerfreundlich wäre das wohl eher nicht...

Ich würde auch nicht über das iPhone ein Rezept nachkochen auch wenn die Seitenproportionalitäten passen würden, aber es gibt auf alle Fälle unterschiedliche Monitore die es erfordern.

Aber bevor wir auf Fragen der technischen Umsetzung zu sprechen kommen, sollten wir vielleicht zunächst einmal ein wenig über die grundsätzliche Art der Darstellung deiner Inhalte nachdenken:

Das ist ein Punkt der bei Fehlendem Wissen was an Gestaltungsmöglichkeiten es gibt, nicht zu Geltung kommt. Die Seite hat seit Beginn der Übungen schon mehrmals seine Gestalt verändert.

Du hast dich dafür entschieden, alle Rezepte, die unter einer bestimmten Kategorie zusammengefasst sind, auf einer Seite darzustellen - eine Entscheidung, für die es gute Gründe gibt.

Es gibt die Hierarchie Getränke, Mehlspeisen, Fleischspeisen, etc. Fleischspeisen unterteilen sich wieder in Schwein, Rind, Fisch, etc. Schon aus dieser Summe und dann multipliziert mit den einzelnen Rezepten würden Unmengen an Einzeldokumenten erzeugen sodaß ich wieder davon abließ.

Nun hast du es im Moment ja so gelöst, dass du die internen Verweise zu den einzelnen Rezepten in einer Liste untergebracht hast, die du mit position: fixed an den linken Rand des Viewports geklebt hast, mit allen Problemen, die sich - wie oben schon beschrieben - daraus ergeben.

Dazu hast du einen unglaublich sperrigen Header, in dem aber lediglich eine Überschrift untergebracht ist, und den du ebenfalls mit position: fixed dem natürlichen Lauf der Dinge entzogen hast.

Ja, das sehe ich ein. Darum habe ich ja die Frage in das Forum gestellt. Spezialisten erkennen Probleme schneller.

Wenn wir nun also überlegen, wie man das besser lösen könnte, wäre die erste Frage, die ich mir stellen würde, ob es überhaupt notwendig ist, dass die Seitennavigation - und erst recht der Header mit der Überschrift - immer und jederzeit sichtbar ist, egal wie weit die Seite vertikal gescrollt ist.

Fix is nix.

Denn entweder der Benutzer sucht ein bestimmtes Rezept - dann wird er, sobald er auf die Seite kommt, den entsprechenden Link in deiner Navigation anklicken um dorthin zu gelangen, oder er möchte nur zum Zwecke der Information deine verschiedenen Rezepte innerhalb dieser Kategorie überfliegen, um zu schauen, ob vielleicht etwas dabei ist, was seinem Geschmack und seinen Kochkünsten entspricht - und in diesem Fall wäre es aus meiner Sicht nicht notwendig, dass die Liste der Rezepte immer im Blickfeld ist, sondern es wäre höchstens ein Komfortfeature.

Nun, da ist was dran. Die Gesamtbreite sollte für das Rezept zur Verfügung stehen. Dann muß aber die Navigation weg. Allerdings ist zu bedenken, daß bei mehreren Rezepten eine Auswahl schwer fällt das Richtige zu finden bzw. eine Auswahl bereits in einer Liste getroffen werden kann. Scrollen kann man ja jetzt schon.

Das heißt, in meinen Augen könntest du auf fixierte Layoutelemente hier komplett verzichten, zumal du ja ohnehin unter jedem Rezept noch einen Link zum Seitenanfang eingebaut hast!

Aber wenn du unbedingt möchtest, dass die Navigation jederzeit sichtbar ist, dann wäre es natürlich ratsam dies so umzusetzen, dass auch auf kleineren Viewports der eigentliche Inhalt, nämlich deine Rezepte, nicht verdeckt werden.

Das werde ich mal probieren hinzukriegen.

Dabei stellt sich dann das Problem der verfügbaren Breite, weshalb hier meiner Ansicht nach statt der seitlichen Navigation ein fixed header, in dem du neben der Überschrift auch die Verweise unterbringst, durchaus eine akzeptable Lösung darstellen könnte, allerdings nur unter der Voraussetzung, dass dieser so aufgebaut ist, dass er auf schmaleren Viewports weder horizontal, noch vertikal zuviel Platz einnimmt.

Das wäre meines Erachtens die bessere Variante. Wie meinst Du das "unter der Voraussetzung"?
Ich würde meinen: Rezeptauswahl (Navigation aufklappbar) Mehlspeisen
Natürlich könnte man das auch vertauschen was meiner Meinung nach nicht ideal ist, da die Rezeptnamen unterschiedliche Längen haben und das beim Menü berücksichtigen müßte wie weit rechts es zu positionieren ist.

Dieser Anspruch lässt sich aber mit einer klassischen Liste für die Verweise nicht wirklich vereinbaren, weshalb ich in diesem Fall darüber nachdenken würde, die Linkliste in Form eines Dropdown-Menüs zu präsentieren, oder hierfür gegebenfalls ein select Element zweckzuentfremden, so dass letztlich nur die Überschrift, der Zurück-Link und die reduzierte Auswahlliste sichtbar sind.

Werde es mir noch überlegen.

Eine "ausgeklappte" Liste der Rezepte könnte man dann über Media Queries ab einer entsprechenden Mindestbreite des Viewports am rechten Rand einblenden, sozusagen als zusätzliche Navigationshilfe.

Mir raucht schon der Kopf was es noch für Möglichkeiten gäbe. Werde mich aber einmal dem Grundlegendsten widmen.

Aber wie gesagt, ich halte solche Verrenkungen in diesem Fall eigentlich für unnötig und denke, ein Layout ohne fixierte Elemente würde seinen Zweck hier absolut erfüllen. Und wenn darüber hinausgehende Funktionalität bereit gestellt werden soll, dann sollte dies im Sinne des Progressive Enhancement geschehen, also optional und aufbauend auf einem soliden Fundament.

Wie Du auch bemerkt haben wirst, wird das Rezept nach der Auswahl an den obersten Rand gestellt. Bei einem fixen header ist die Überschrift des Rezeptes dadurch verdeckt. Es sollte daher unter dem header erscheinen.

Davon abgesehen bleibt schließlich nur die Empfehlung, so wie Matthias es in seinen Beiträgen hier im Thread schon angemerkt hat, sich einmal genauer über die Möglichkeiten der Positionierung und Darstellung von Elementen zu informieren und damit ein wenig herumzuexperimentieren, und zwar auch und vor allem unter Einsatz relativer Werte für Größenangaben und Abstände.

Daran arbeite ich bereits mit meinem Projekt allerdings ab jetzt mit relativen Werten.

Dann wirst du recht schnell selbst ein Gefühl dafür bekommen, wie du deine Inhalte am besten in Szene setzten kannst!

Das habe ich oben schon erwähnt. Wenn man mehr weiß und Erfahrung hat fällt einem auch mehr ein wie man etwas gestalten könnte. Dazu brauch man aber auch Unterstützung, die ich hier Gott sei Dank habe. Alleine würde es natürlich auch gehen aber dann dauert es eine Ewigkeit.

So, ich hoffe, das war jetzt irgendwie hilfreich. ;-)

Ja, das war es! Werde morgen wieder daran herum basteln.

Die Frage wäre noch wie und wo ich den footer unterbringe? Am Bildschirmende? Im Drop-down-Menü? Hier lassen sich aber nicht alle Infos unterbringen.

Übrigens hätte ich versucht ein html-Dokument in meine Seite zu laden. Das Dokument enthält eine Tabelle. Ich finde aber keinen Hinweis wie das funktioniert. Ein altes Beispiel, in frames wurden unterschiedliche Dokumente geladen, hilft mir nicht weiter. Vielleicht funktioniert das mit html5 nicht? Ich finde nur Beispiele mit Graphiken, Bilder, videos usw.

LG Franz