Framelayout auch ohne Frames machbar?

[cogito]

Moin zusammen,

ich versuche mich grad an meiner "ersten" HP. Habe versucht, mich in die Feinheiten einzuarbeiten.
Jetzt habe ich aber ein Problem, bei dem ich mir Eure Hilfe holen muß.

Ich habe meine Seite im Entwurf fertig. Mit Frames. Da funkioniert sie auch so, wie ich mir das vorstelle. Bei der Lösung einiger Wünsche habe ich gemerkt, dass ich ohne CSS und Java nicht auskomme. Außerdem habe ich über die Probleme mit Frames gelesen. Nun wollte ich ohne Frames auskommen, Und da gehen meine Prbleme los.

Hier mal die Wunschliste:

• festes Hintergrundbild. immer fixiert und 100% des Browserbildschirms. Habe ich gelöst mit CSS. Muß ich bei den Frames aber für jeden Frame einzeln einstelle. Das Ergebnis überzeugt mich nicht. -> erster Grund für ein Arbeiten ohne Frames.
• Header immer oben fixiert auf der Seite. Geht mit Frames prima aber wie mache ich das ohne?
• Navigation mit Buttons immer links auf dem Bildschirm. In sich scrollbar aber ansonsten fixiert. braucht ca. 20% der Bildschirmbreite. Wenn Fensterbreite zu gering, dann seitlicher scrollbalken. Geht auch prima mit Frames, aber ohne?
• Rest ist Content.
• kein footer

Mein Problem mit den gewünschten fonts habe ich schon gelöst. Ebenso habe ich verstanden, wie ich meine Wünsche nach extra Fensten realisieren kann.

Mein Ansatz wäre jetzt es mit Layern zu versuchen.
1. Layer= Hintergrundbild 100% Breite und Höhe, fixiert.
2. Layer= Header 20% Höhe 100% Breite fixiert
3. Layer= Sitenavigation 20% Breite 80% Höhe immer unter Header, in sich scrollbar aber am Fenster fixiert
4. Layer= Content 80% Breite und Höhe, ebenfalls immer unterhalb Header, scrollbar

Anders ausgedrückt. Nur der Inhalt soll sich verändern. Der Rest soll stehenbleiben

wie kann ich das ohne Frames realisieren?
1. Layer ist klar, bei den anderen Hintergrund auf transparent, aber dann?

Vielen Dank schon mal für Eure Hilfe. Mir raucht grad hefig der Kopf
Gruß
Max

[Der Martin]

Hallo,

Ich habe meine Seite im Entwurf fertig. Mit Frames.

das ist kein guter Einstieg.

Da funkioniert sie auch so, wie ich mir das vorstelle. Bei der Lösung einiger Wünsche habe ich gemerkt, dass ich ohne CSS und Java nicht auskomme.

CSS ist eigentlich immer ein integraler Bestandteil. Merke: HTML definiert die Inhalte und deren logische Struktur, CSS definiert das Erscheinungsbild.
Und achte bitte darauf, dass zwischen Java und Javascript ein himmelweiter Unterschied besteht.

Hier mal die Wunschliste:

• festes Hintergrundbild. immer fixiert und 100% des Browserbildschirms. Habe ich gelöst mit CSS. Muß ich bei den Frames aber für jeden Frame einzeln einstelle.

Ja. Jeder Frame ist technisch gesehen ein eigenständiges Dokument.

• Header immer oben fixiert auf der Seite. Geht mit Frames prima aber wie mache ich das ohne?

Eventuell mit position:fixed, eventuell auch einfach als Teil des Hintergrundbilds.

Aber eventuell auch gar nicht. Ich halte einen feststehenden Header jedenfalls nicht für eine gute Idee, da er den nutzbaren Platz einschränkt, aber meistens keine wirklich nützliche Information liefert. Wenn ich die Website eines Unternehmens aufrufe, muss ich nicht ständig dessen Logo prominent am oberen Bildrand sehen.

• Navigation mit Buttons immer links auf dem Bildschirm. In sich scrollbar aber ansonsten fixiert. braucht ca. 20% der Bildschirmbreite. Wenn Fensterbreite zu gering, dann seitlicher scrollbalken.

Auch nicht wirklich eine gute Idee. Zugegeben, wenn das Browserfenster groß genug ist, mag es praktisch sein, sie Navigation immer "griffbereit" zu haben. Aber wenn nicht, vergeudet man dadurch auch permanent wertvollen Platz.

Mein Problem mit den gewünschten fonts habe ich schon gelöst. Ebenso habe ich verstanden, wie ich meine Wünsche nach extra Fensten realisieren kann.

Und auch, dass diese extra Fenster (also Popups) in vielen Browsern geblockt werden?

Mein Ansatz wäre jetzt es mit Layern zu versuchen.

1. Layer= Hintergrundbild 100% Breite und Höhe, fixiert.

Falsch, bzw. kommt drauf an, was du mit Layer meinst. Das Hintergrundbild ist natürlich vom Design her gesehen ein Layer (eine Schicht), taucht aber im HTML nirgends auf. Dafür hat man ja CSS, mit dem man das Hintergrundbild dem body- oder dem html-Element zuweist.

2. Layer= Header 20% Höhe 100% Breite fixiert

Siehe oben: Wenn der Header rein passiv ist, also keine Textinhalte oder interaktiven Elemente enthält, kann er ins Hintergrundbild integriert sein.

3. Layer= Sitenavigation 20% Breite 80% Höhe immer unter Header, in sich scrollbar aber am Fenster fixiert
4. Layer= Content 80% Breite und Höhe, ebenfalls immer unterhalb Header, scrollbar

Warum zwei Layer für Navigation und Content? Solange sie sich nicht überlappen, können sie demselben Layer angehören.

Vielen Dank schon mal für Eure Hilfe. Mir raucht grad hefig der Kopf

Lass dich mal von den Beispiel-Layouts auf SELFHTML inspirieren (HTML und CSS). Die Beispiele 5, 7 und 9 kommen deiner Beschreibung schon recht nahe.
Bestimmt interessiert die auch der FAQ-Eintrag zum Auslagern von Teilen des Quellcodes.

So long,
 Martin

[Felix Riesterer]

Lieber Der Martin,

Lass dich mal von den Beispiel-Layouts auf SELFHTML inspirieren (HTML und CSS).

die kann man nun wahrlich nicht mehr guten Gewissens empfehlen. Hast Du da einmal in den Quelltext geschaut? Da wimmelt es von bgcolor und dergleichen mehr... *grusel*

Liebe Grüße,

Felix Riesterer.

[Der Martin]

Hallo Felix,

Lass dich mal von den Beispiel-Layouts auf SELFHTML inspirieren (HTML und CSS).
die kann man nun wahrlich nicht mehr guten Gewissens empfehlen. Hast Du da einmal in den Quelltext geschaut?

nein, hab ich nicht ...

Da wimmelt es von bgcolor und dergleichen mehr... *grusel*

Autschn. Danke für den guten Einwand.

Ciao,
 Martin

[Detlef G.]

Hallo Felix

die kann man nun wahrlich nicht mehr guten Gewissens empfehlen. Hast Du da einmal in den Quelltext geschaut? Da wimmelt es von bgcolor und dergleichen mehr... *grusel*

Die dürften so alt wie SELFHTML selbst sein, außer der Nummer 10, die sieht da schon besser aus.

Auf Wiederlesen
Detlef

[mrjerk]

Hallo,

Anders ausgedrückt. Nur der Inhalt soll sich verändern. Der Rest soll stehenbleiben

Den Artikel über fixe Positionierung bei Selfhtml kennst Du schon, oder?

Eigentlich müsste damit alles hinzurkriegen sein, was Du brauchst.

Lediglich Internet Explorer < Version 7 können das nicht und bräuchten einen Workaround (auf Grund der sinkenden Verbreitung solcher Browser würde ich in diesen Fällen aber einfach auf das "Feature" der fixierten Bereiche verzichten - Hauptsache die Seite bleibt trotzdem noch einigermassen sinnvoll bedienbar).

Scrollbare Container (also die "in sich scollbar" sind), bekommst Du mit der CSS-Eigenschaft overflow:auto hin ("overflow" gibt an, wie sich ein Container - also ein DIV z.b.  - verhalten soll, wenn sein Inhalt zu groß für die angegebene Breite/Höhe wird).

Vielleicht hilft Dir das weiter.

Viele Grüße,
Jörg