Alternative zu Frames?

Computer: Software & Programmierung HTML & CSS
#1

Hallo! :smile:

Ich hab heute eine vielleicht etwas ungewöhnliche Frage:

Gibt es irgendeine Alternative zu Frames, die es mir ermöglicht, ein CSS-Stylesheet auf einen bestimmten Bereich der Seite zu beschränken?

Mit einem Frame geht das ja klar, ist ja nichts anderes als ein „Fenster“ mit Blick auf eine andere Seite. Dementsprechend hat das dort angewendete Stylesheet auch nur dort Einfluss. Aber gibt es denn irgendeine Möglichkeit das Stylesheet anders, z.B. auf ein Div zu beschränken?

Hintergrund:
Ich würde gerne innerhalb eines Formulars bestimmte Werte direkt in einem anderen Layout editieren. Wenn ich das Formular abschicke, sollen sowohl die Werte innerhalb, als auch außerhalb der Layout-Vorschau verarbeitet werden. Das CSS einfach so zu schreiben, dass alle Stylesheet-Konfigurationen explizit auf das Vorschau-Div beschränkt sind (also z.B. #preview .wasweißich { /* … */ } ) fällt weg, da das Vorschau-Layout-Stylesheet auch tatsächlich als Hauptlayout genutzt wird, also auch Selektoren wie z.B. body { /* … */ } enthält. Diese Selektoren sollen aber keinen Einfluss auf das Wirts-Layout haben, in dem die Vorschau liegt.

Noch ein kleines Schaubild mit dem Versuch mein Problem zu visualisieren:

—Wirts-Layout-------------------------------------------------------
| |
| —Formular----------------------------------------------------- |
| | | |
| | [Inputfield1] | |
| | [Inputfield2] | |
| | | |
| | —Layout-Vorschau (mit allem drum und dran)-------------- | |
| | | | | |
| | | [Inputfield3] | | |
| | | [Inputfield4] | | |
| | | | | |
| | ---------------------------------------------------------- | |
| | | |
| | [Submit-Button] | |
| | | |

----------------------------------------------------------------

Ich bin wirklich gespannt, ob irgendjemand eine Idee hat, wie man dies einfach umsetzen könnte… :smile:

Schonmal vielen, vielen Dank für jede Antwort!

#2

Hallo Putzi,

Gibt es irgendeine Alternative zu Frames, die es mir
ermöglicht, ein CSS-Stylesheet auf einen bestimmten Bereich
der Seite zu beschränken?

Das ist ja der Sinn der ganzen abgeleiteten Selektoren.
„Cascading“ Style Sheets, nicht wahr?

Mit einem Frame geht das ja klar, ist ja nichts anderes als
ein „Fenster“ mit Blick auf eine andere Seite. Dementsprechend
hat das dort angewendete Stylesheet auch nur dort Einfluss.
Aber gibt es denn irgendeine Möglichkeit das Stylesheet
anders, z.B. auf ein Div zu beschränken?

Wie gesagt, *das* ist ja der Punkt, warum man style sheets
nimmt!?

Hintergrund:
Ich würde gerne innerhalb eines Formulars bestimmte Werte
direkt in einem anderen Layout editieren. Wenn ich das
Formular abschicke, sollen sowohl die Werte innerhalb, als
auch außerhalb der Layout-Vorschau verarbeitet werden. Das CSS
einfach so zu schreiben, dass alle Stylesheet-Konfigurationen
explizit auf das Vorschau-Div beschränkt sind (also z.B.
#preview .wasweißich { /* … */ } ) fällt weg, da das
Vorschau-Layout-Stylesheet auch tatsächlich als Hauptlayout
genutzt wird, also auch Selektoren wie z.B. body { /* … */ }
enthält. Diese Selektoren sollen aber keinen Einfluss auf das
Wirts-Layout haben, in dem die Vorschau liegt.

Kapier ich nicht.Ich vermute mal, Du konstruierst Dir
ein Problem, wo gar keines ist.

—Wirts-Layout-------------------------------------------------
—Formular-----------------------------------------------------
| | —Layout-Vorschau (mit allem drum und
dran)-------------- | |
| | | [Inputfield3]
| | | [Inputfield4]
---------------------------------------------------------- |
| | [ Submit-Button

Ich bin wirklich gespannt, ob irgendjemand eine Idee hat, wie
man dies einfach umsetzen könnte… :smile:

Ich hab wirklich nicht kapiert, wozu das gut sein soll, -
wie ist denn die Seite konkret aufgebaut? Besteht sie
aus mehreren html-Bausteinen, die in verschiedenen
Dateien liegen?

Hmmm.

Grüße

CMБ

#3

Hallo CMB! :smile:

Erstmal vielen Dank, dass du geantwortet hast! :smile:

Ich erkläre am besten nochmal von vorne, was ich damit anstellen will:
Ich programmiere gerade ein Content Management System. In diesem CMS kann man verschiedene Layout anlegen (also ganz normal mit HTML und Css) und dann jeder erzeugten Seite eines der Layouts zuweisen.

Mein Problem betrifft jetzt die Funktion, mit der man die Seite „zusammenbaut“. Hierzu benutze ich ein HTML-Formular, in dem man einmal den Titel der Seite, eine Beschreibung, das Layout, das angezeigt werden soll, etc. eingibt. Die Textarea (gekoppelt mit einem WYSIWYG-Editor) in die dann die Inhalte der Seite eingegeben werden, möchte ich gerne direkt in dem für diese Seite gewählten Layout haben.
Hierfür füge ich den für dieses Layout eingegebenen HTML-Code (natürlich nur den Body) in das Div ein, in dem die Vorschau liegen soll und binde das zugehörige CSS ein.
Wenn das Layout nun aber z.B. mit absoluten Positionen definiert ist, eine andere Schriftart benutzt, etc., dann zerschießt mir das natürlich das komplette Layout des CMS. D.h. ich brauche etwas, um das Layout des CMS vor dem CSS des Vorschau-Layouts zu schützen. Und die einzige Möglichkeit, die mir hierzu einfällt sind eben Frames.

Ich hoffe mein Problem ist nun etwas klarer geworden. :wink:
Wäre echt toll, wenn ich mir ein Problem baue, wo keines ist und du mir sagen kannst, wie ich es besser machen kann.

#4

Hallo Putzi

Hierfür füge ich den für dieses Layout eingegebenen HTML-Code
(natürlich nur den Body) in das Div ein, in dem die Vorschau
liegen soll und binde das zugehörige CSS ein.
Wenn das Layout nun aber z.B. mit absoluten Positionen
definiert ist, eine andere Schriftart benutzt, etc., dann
zerschießt mir das natürlich das komplette Layout des CMS.
D.h. ich brauche etwas, um das Layout des CMS vor dem CSS des
Vorschau-Layouts zu schützen. Und die einzige Möglichkeit, die
mir hierzu einfällt sind eben Frames.

Ach so. Ich glaube zumindest, dass ich nun
etwas verstanden haben könnte.

Was spricht dagegen, das zugehörige Layout-HTML
mit seinem CSS so aufzubauen, dass man

  • * {} und body {} nirgends nicht direkt anspricht,

  • grundsätlich noch ein div um das „innere“ Ding, mit id #layout

Dann kann man das komplette CSS von dem zeugs über #layout
kaskadieren, z.B.:

  • übergeordnetes CSS (CMS):

    body {
    color:#3A415C;
    font-size:10pt; line-height:12pt;
    font-family:Georgia, „Times New Roman“, Times, serif;
    }

  • CSS des Layouts

    body #layout {
    color:blue;
    font-size:8pt; line-height:10pt;
    font-family:Arial, Helvetica, sans-serif;
    }

Gänge das? Du musst halt darauf sehen,
alle „aussen“ definierten Properties innen (#layout)
noch mal zu definieren. Wer weiss … ?

Grüße

CMБ

#5

Hallo CMБ!

Ach so. Ich glaube zumindest, dass ich nun
etwas verstanden haben könnte.

Ja, ich glaube jetzt sprechen wir dieselbe Sprache… :smile:

Was spricht dagegen, das zugehörige Layout-HTML
mit seinem CSS so aufzubauen, dass man

  • * {} und body {} nirgends nicht direkt anspricht,
  • grundsätlich noch ein div um das „innere“ Ding, mit id #layout
    Dann kann man das komplette CSS von dem zeugs über #layout
    kaskadieren

Das wäre eine Möglichkeit, wenn ich das Layout vordefinieren würde - aber dann bräuchte ich auch kein CMS… :wink:
Die Anwender sollen ihr Layout völlig autonom vom CMS gestalten können. Wenn ich ihnen nun vorschreiben würde, dass sie bei jeder ihrer Spezifikationen noch ein #layout einfügen müssen, darauf achten, dass sie keine meiner CMS-Spezifikationen überschreiben, etc., würde ich sie dadurch ziemlich einschränken und die Gefahr eingehen, dass alles zerschießt, wenn sie einen Fehler machen - und das alles nur, damit es im CMS richtig angezeigt wird? Ich glaube das ist dem Nutzer nicht wirklich zumutbar und sehr fehleranfällig…

Eine Alternative, die mir einfällt wäre, das Inner-Layout-Stylesheet vom CMS noch vor der Anzeige parsen zu lassen und automatisch an jeder entsprechenden Stelle ein #layout einzufügen… Allerdings wäre ein solcher Parser denke ich doch sehr umfangreich…

Hättest du denn eine Idee, wie ich - wenn ich nun doch ein Frame nutzen würde - es hinkriege, dass sowohl das Formular außerhalb, als auch das Formular innerhalb meines Frames abgeschickt und die Daten gemeinsam verarbeitet werden?

#6

Also wenn du ein CMS hast. Dann kannst Du es aber genauso machen wie mein vorredner das gesagt hat.
Nur muss eben dein CMS es umwandeln in #Layout bla bla bla.
Ich mach das so, ich lass die user ihren style in eine DB eintragenm und kriere dann daraus ein preview css. Billiger gehts nicht und schwer ist es nun garnicht. Ausser man ist kein Programmierer und nur schnippsel copierer.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#7

Hallo RakonDark, danke für deinen Beitrag.

Also wenn du ein CMS hast. Dann kannst Du es aber genauso
machen wie mein vorredner das gesagt hat.
Nur muss eben dein CMS es umwandeln in #Layout bla bla bla.
Ich mach das so, ich lass die user ihren style in eine DB
eintragenm und kriere dann daraus ein preview css.

Ich muss also einen Parser schreiben und vor jeden Selektor des Preview-css ein #layout schreiben. Richtig, das ist noch nicht schwer. Außerdem muss ich den Selektor body auch durch #layout ersetzten, auch noch nicht schwer. Was mach ich denn, wenn ein Layout absolut positioniert ist? Dann muss ich auf die absoluten Positionen die Werte des Vorschau-Divs addieren. Damit wird der Parser schon umfangreicher. Da ich dem Nutzer wirklich alle Freiheiten lassen will, muss man dabei schon an einige Dinge denken. Klar, schwer ist keine dieser Funktionen - aber umfangreich. Ich wollte nur sichergehen, dass es keine leichtere Lösung gibt, die ich nur nicht sehe.

Billiger gehts nicht und schwer ist es nun garnicht. Ausser man ist
kein Programmierer und nur schnippsel copierer.

Hab ich dir irgendwas getan um eine solche Unterstellung zu provozieren? Nur mal so am Rande… :wink:

Nochmals danke für eure Beteiligung! Ich werde es jetzt einfach so machen, wie ihr vorgeschlagen habt…

#8

Billiger gehts nicht und schwer ist es nun garnicht. Ausser man ist
kein Programmierer und nur schnippsel copierer.

Hab ich dir irgendwas getan um eine solche Unterstellung zu
provozieren? Nur mal so am Rande… :wink:

Hab ich was unterstellt ??
Du ziehst Dir den Schuh an, nicht ich.

Du bist total darauf angesprungen. Kann es sein das Du eher schnippsel copierer bist ??

#9

Hallo,

als Alternative zu Inline-Frames (mit Scrollbalken oder ohne) fällt mir der Elementbereich ein, den Du beliebig am Bildschirm positionieren kannst, zusammen mit dem „overflow“ Attribut.
Schau Dir das mal an:
http://de.selfhtml.org/css/eigenschaften/positionier…

Ciao,
Andreas