Seite soll unter Kopfleiste "durchlaufen"... (wie iFrame...)

  • Hallo miteinander!

    Schaut mal bitte auf meiner Baustelle unter
    http://www.youthworker.de/YW_design_01/profil.html
    das Design an. Dazu hätte ich gleich mal eine Frage!

    Das ist jetzt erst Mal ein reiner Designentwurf.

    Wie realisiere ich es, dass die Seite unter dem dunkelgrünen Balken im Header durchläuft?
    Also so, dass da der Schatten drüber liegt. Mit einem iFrama, bzw. generell mit Frames, oder?
    Heute geht das doch sicher eleganter und moderner, denke ich mal...!

    Und als zweites: wie lege ich fest, dass die Seite exakt 100% der Displayhöhe nutzt,
    mit der Breite geht das ohne Probleme, aber bei der Höhe hab ich keinen Plan! :(

    Danke schonmal!

    Manuel

  • Moin erstmal,
    mit durchlaufen meinst du das man die Nivigation immer sieht und alles was darunter kommt per Scrollbar dann geht?
    Dann ein Problem was mich schonmal sehr stört ist deine starre breite die sich auch noch am Display und nicht am fenster orrientiert, dadurch muss ich immer scrollen da ich meine taskleiste links habe und dadurch mein Fenster kleiner ist. Idee zur Lösung wäre das du dich an der Fenstergröße orrientierst, wo das Problem ist das sich die Seite verkleinert wenn man das Fenster verkleinert.
    Ganz einfache Lösung, lass das und mache deine Seite einfach ohne Breitenanpassung oder wofür ist das von nöten?

    dann finde ich deine Navigation sehr gequätscht und der Teilschatten über Profil sieht sehr komisch aus.
    Und dann zu deinem Displayhöhen und "durschlauf"-Problem, wenn ich das richtig verstanden ahbe dann löst sich das beides auf einmal und zwar durch einen Fram!
    mach einfach 2 übereinander liegende Frams und fertig, falls nötig macht sich der untere dann von alleine einen Scrollbalken.

    MfG

  • Da brauchts keine Frames. Als erstes solltest du mal das Tabellenlayout loswerden, da du ja, in deinen eigenen Worten, "eleganter und moderner" arbeiten willst. Dann packst du den Headerbereich und die Navi in ein <div> dem du per CSS "postition: fixed; top: 0; left: 0;" definierst. Dadurch bleibt der Headerbereich immer am oberen Rand des Fensters stehen, für <ie6 brauchts allerdings einen Workaround.
    Der Inhalt kommt in ein zweites div mit min-height 100%, durch ein padding-top kannst du vermeiden dass die obersten Inhalte hinter dem Header verschwinden.

    Eine Alternative zu position: fixed wäre, dem unteren div einfach ein overflow: auto und eine fixe höhe zu geben, dann hast du einfach Scrollbalken die sich nicht über die ganze Höhe des Fensters ziehen.

    Zür Lösung deines 100% Höhe problems wird die sejuma sicher einen link geben können, ansonsten lass ich hier einfach schonmal einen Verweis auf http://www.ohne-css.gehts-gar.net stehen, schau dich da mal etwas um. Da gibts ne Lösung zu verschiedenen häufig auftretenden Problemen mit CSS.

    Gruss,
    -Lukas

  • Hallo

    Zitat

    Heute geht das doch sicher eleganter und moderner, denke ich mal...!

    Was verstehst du unter eleganter? Moderner auf jeden Fall und du willst dich offensichtlich auf den Stand von vor 10 oder 15 Jahren begeben. Das sollest du dir als Anfänger gar nicht erst antun, da du eine so erstellte Seite nicht einfach auf den aktuellen Stand von html / css bringen kannst.

    Ein paar Stichpunkte dazu:

    - Vergiß erst mal komplett das Design, da ist so ziemlich das unwichtigste an einer Homepage und kann nachträglich frei geändert werden, sofern das Grundgerüst stimmt.

    - Hast du überhaupt Inhalt, denn ohne Inhalt brauchst du erst gar keine Seite erstellen?

    - Verzichte beim Seitenaufbau auf Tabellen und Frames. Tabellen sind nur sinnvoll und sogar erwünscht, wenn Tabellendaten angezeigt werden sollen.

    - Die Seite sollte flexibel sein. Die Bildschirmgrößen sind heutzutage unterschiedlich wie nie, vom smartphone / iphone bis zum Großbildschirm. Wobei nicht jeder den Browser auf die volle Bildschirmgröße aufzieht. Einige Ewiggestrige haben bis heute nicht mitbekommen, das sich die Bildschirmgröße schon seit Jahren nicht mehr nur in eine Richtung bewegt, nämlich immer größer. Es ist deshalb schlicht ein Fehler, die Darstellung nach seinem Bildschirm zu Hause ausrichten zu wollen. Sondern die Darstellung muss sich möglichst vielen Bildschirmgrößen flexibel anpassen.

    - Der Besucher sollte nur in der Höhe scrollen müssen, nicht seitlich.

    - Mach nicht den Fehler, vom Besucher zu verlangen, das er sich deinen Vorstellungen anpassen soll, was Browser, Fenstergröße und ähnliches angeht. Dann hast du nämlich ganz schnell keine Besucher mehr.

    - Laß Spielereien wie eine feststehende Navigation. Schon allein dadurch wirkt deine Seite optisch wie aus dem vorigen Jahrhundert und du nimmst dir selbst Platz auf dem Bildschirm und damit Flexiblität. Die Besucher sind es gewohnt, das die gesamte Seite mitscrollt, auch die Navigation. Das fängt ja schon hier im Forum an. Feststehende Elemente findet man heutzutage eigentlich nur noch auf Kinderseiten (also von Kindern erstellt) oder sie enthalten unerwünschte Werbung, was beides eher negativ besetzt ist.

    Zitat

    Und als zweites: wie lege ich fest, dass die Seite exakt 100% der Displayhöhe nutzt,

    Da es keine einheitliche Displaygröße gibt solltest du darauf schlicht und einfach verzichten und die gewonnene Zeit und Energie lieber in einen ordentlichen Inhalt stecken. 100% Displayhöhe zeichnen eigentlich nur Anfängerseiten aus, womit dann gleich mal die Seriösität flöten geht. Solche Seiten werden entweder ganz schnell mangels Besuchern eingestellt oder, wenn der Ersteller lernfähig ist und auf Besucherkritik reagiert, auf eine sinnvolle flexible Darstellung geändert. Was wiederum ohne großen Aufwand nur möglich ist, wenn das Grundgerüst im Quelltext den aktuellen Möglichkeiten von html / css entspricht.

    Gruss

    MrMurphy