nicht angemeldet
passepartout im Anzeigebereich des Fensters
0 
Gunnar Bittersmann
0
passepartout im Anzeigebereich des Fensters
Hallo,
zuerst dachte ich, dass es sich um ein eher banales Problem handelt, aber inzwischen zweifle ich an mir selbst ;-) Vorallem die Höhe bereitet mir Probleme.
Wie schaffe ich es, einen 10px breiten Rahmen im Anzeigebereich des Fenster darzustellen?
Ein Beispiel:
Die innere Höhe beträgt z.B. 800px, die Höhe der eigentlich Seite z.B. 500px. Jetzt soll das passepartout nicht um die den Content, sondern entlang der Innenseite des Anzeigebereichs verlaufen. Wie gesagt, Breite funktioniert, aber das mit der Höhe bekomme ich nicht gebacken :-(
Kann mir jemand dabei Tipps geben?
Viele Grüße
sbm
-
@@sbm:
nuqneH
Kann mir jemand dabei Tipps geben?
Ja, die Tipps für Fragende in der Charta.
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
@@sbm:
nuqneH
»» Kann mir jemand dabei Tipps geben?
Ja, die Tipps für Fragende in der Charta.
Qapla'
Vielen Dank für die Antwort. Im Forum habe ich bereits gesucht (evtl. nach dem falschen Sachverhalt?), die Dokumentation habe ich auch schon konsultiert. Aber eine Lösung habe ich für mich nicht gefunden.
Welche Tipps in der Charta habe ich denn nicht beachtet?
Viele Grüße
sbm-
Hi!
Welche Tipps in der Charta habe ich denn nicht beachtet?
Was hast Du bislang unternommen?
Ein Stück Code oder besser noch: ein Online-Beispiel hilft sehr die Angelegenheit zu klären.off:PP
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
-
Hi!
»» Welche Tipps in der Charta habe ich denn nicht beachtet?
Was hast Du bislang unternommen?
Ein Stück Code oder besser noch: ein Online-Beispiel hilft sehr die Angelegenheit zu klären.off:PP
Hallo Peter Pan,
online ist nix, bislang alles lokal. Aber offensichtlich habe ich mich falsch ausgedrückt, denn es ist wohl schwerer zu verstehen, als ich dachte.
Der folgende Code ist nicht original, aber das relevante ist daraus zu entnehmen:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Unbenanntes Dokument</title> <style type="text/css"> * { margin:0; padding:0; } #site_bg { margin: 15px; background-color: #666666; } #wrap { } </style> <script type="text/javascript" language="javascript"> function setBorder() { document.getElementById("site_bg").style.height = window.innerHeight-30+"px"; } </script> </head> <body onload="setBorder()" onResize="setBorder()"> <div id="site_bg"> <div id="wrap"> In diesen container kommt der Content ...<br /> In diesen container kommt der Content ...<br /> In diesen container kommt der Content ...<br /> In diesen container kommt der Content ...<br /> In diesen container kommt der Content ...<br /> In diesen container kommt der Content ...<br /> In diesen container kommt der Content ...<br /> </div> </div> </body> </html>Das Blöde dabei ist, dass das Passepartout in den Content "hineinläuft", wenn das Fenster eine zu geringe Höhe aufweist. Das ist nicht schön, aber ich bekomme es im Moment nicht anders hin und erhoffe mir, hier ein paar Tipps zu bekommen. Außerdem wäre eine Lösung ohne JS auch nicht schlecht :-/
Vielen Dank schonmal.
Viele Grüße
sbm-
Mahlzeit sbm,
<body onload="setBorder()" onResize="setBorder()">
<div id="site_bg">
Wozu dient dieses <div>? Du könntest doch genauso gut dem <body> einen passenden http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding@title=Innenabstand geben ...
Was genau soll denn die Javascript-Funktion bewirken? Könntest Du das kurz erklären, ohne Code zu verwenden - nur rein umgangssprachlich. Mir ist nicht klar, was Du bewirken willst.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Mahlzeit sbm,
»» <body onload="setBorder()" onResize="setBorder()">
»»
»» <div id="site_bg">Wozu dient dieses <div>? Du könntest doch genauso gut dem <body> einen passenden http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding@title=Innenabstand geben ...
Was genau soll denn die Javascript-Funktion bewirken? Könntest Du das kurz erklären, ohne Code zu verwenden - nur rein umgangssprachlich. Mir ist nicht klar, was Du bewirken willst.
MfG,
EKKiDie Javascript-Funktion soll bewirken, dass die Höhe des Hintergrunds (grau) in Abhängigkeit von der Größe des Anzeigebereichs berechnet wird. Das ist vorallem dann notwendig, wenn der Anzeigebereich z.B. eine Höhe von 800px hat, die Höhe des Contents aber nur 400px. Schau Dir dazu mein Beispiel an: der eigentliche Content sind die 7 Zeilen "In diesen container kommt der Content ..". Der Hintergrund der Seite soll aber bis 15px vor dem unteren Rand des Anzeigebereichs fließen, so wie am oberen Rand.
Tja, und das von Dir genannte Div ist dazu da, um mein Ziel zu erreichen :-) Bislang vergeblich ...
Viele Grüße
sbm
-
-
-
-
@@sbm:
nuqneH
Welche Tipps in der Charta habe ich denn nicht beachtet?
Die für Fragende. Sagte ich doch schon.
Dort steht, was zu einer Problembeschreibung gehört.
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
@@sbm:
nuqneH
»» Welche Tipps in der Charta habe ich denn nicht beachtet?
Die für Fragende. Sagte ich doch schon.
Dort steht, was zu einer Problembeschreibung gehört.
Qapla'
Ok, ich bin davon ausgegangen, dass bekannt ist, was ein Passepartout und ein Anzeigebereich ist. Ich war der Meinung, dass diese Info reicht.
Grüße
sbm-
Mahlzeit sbm,
Ok, ich bin davon ausgegangen, dass bekannt ist, was ein Passepartout und ein Anzeigebereich ist. Ich war der Meinung, dass diese Info reicht.
Najaaa ... es kommt halt darauf an, aus welcher Richtung man das "Passepartout" betrachtet:
+--------------+
| |
| +--------+ |
| | Inhalt | |
| +--------+ |
| |
+--------------+Das "Passepartout" könnte sowohl der http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding@title=Innenabstand des äußeren Elements sein als auch der http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin@title=Außenrand des inneren Inhalts - je nachdem, wie Du es definierst oder verstehst ... deswegen wäre zumindest die HTML-Struktur, besser auch die bisherigen CSS-Versuche hilfreich.
Den Begriff "Passepartout" gibt es nunmal nicht im Bereich Webentwicklung, also darfst Du Dich nicht wundern, wenn die unterschiedlichsten Leser unterschiedlichste Vorstellungen davon haben. Verwende die richtigen (Fach-)Begriff und jeder versteht Dich ... :-)
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Mahlzeit sbm,
»» Ok, ich bin davon ausgegangen, dass bekannt ist, was ein Passepartout und ein Anzeigebereich ist. Ich war der Meinung, dass diese Info reicht.
Najaaa ... es kommt halt darauf an, aus welcher Richtung man das "Passepartout" betrachtet:
+--------------+
| |
| +--------+ |
| | Inhalt | |
| +--------+ |
| |
+--------------+Das "Passepartout" könnte sowohl der http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding@title=Innenabstand des äußeren Elements sein als auch der http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin@title=Außenrand des inneren Inhalts - je nachdem, wie Du es definierst oder verstehst ... deswegen wäre zumindest die HTML-Struktur, besser auch die bisherigen CSS-Versuche hilfreich.
Den Begriff "Passepartout" gibt es nunmal nicht im Bereich Webentwicklung, also darfst Du Dich nicht wundern, wenn die unterschiedlichsten Leser unterschiedlichste Vorstellungen davon haben. Verwende die richtigen (Fach-)Begriff und jeder versteht Dich ... :-)
MfG,
EKKiIch dachte, das hätte ich hiermit verdeutlicht: ".. Jetzt soll das passepartout nicht um die den Content, sondern entlang der Innenseite des Anzeigebereichs verlaufen ..". In der Antwort zu Peter Pan's Posting habe ich ein paar Zeilen Quellcode. Spät. danach sollte es klar sein, was ich meine.
Apropos Fachbegriffe: was ist denn der richtige Begriff für ein "Passepartout"? Margin? Padding? Wenn ich mich auf einen der Begriffe festgelegt hätte, dann wäre vielleicht eine andere Möglichkeit gar nicht mehr in Betracht gekommen. Und ein Passepartout ist nunmal genau das, was ich suche, nur lasse ich die Möglichkeiten offen und möchte mich nicht beschränken.
Und was der Anzeigebereich ist, sollte wohl jedem klar sein, der ein bisschen selfhtml liest.
Viele Grüße
sbm-
Mahlzeit sbm,
Ich dachte, das hätte ich hiermit verdeutlicht: ".. Jetzt soll das passepartout nicht um die den Content, sondern entlang der Innenseite des Anzeigebereichs verlaufen ..".
Wenn Du das wörtlich so meinst, ist doch auch absolut klar, was Du willst:
Anzeigebereich = <body>
Passepartout = Innenabstand = paddingApropos Fachbegriffe: was ist denn der richtige Begriff für ein "Passepartout"? Margin? Padding?
Wie ich schrieb: das kommt darauf an, ob Du es aus Sicht des inneren Inhalts siehst (dann margin) oder von außen betrachtest (dann padding).
Und was der Anzeigebereich ist, sollte wohl jedem klar sein, der ein bisschen selfhtml liest.
Sicher. Wieso dann also Deine Frage? Du willst ein Passepartout entlang der Innenseite des Anzeigebereichs. Etwas anderes als
body { padding: 10px; }kann dann (Deinen Worten zufolge) überhaupt nicht gemeint sein.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
@EKKI
Hast Du mein Beispiel angeschaut oder gehts Dir jetzt darum, mir ob meiner offensichtlich unglücklichen Begriffswahl eins reinzuwürgen? Und willst Du damit zum Ausdruck bringen, dass letztendlich doch Du recht hattest? Ok, dann bitte ich hiermit um Entschuldigung für meine Sturköpfigkeit und meine falsche Begriffswahl.Wie auch immer, Deine Lösung führt nicht zum gewünschten Ergebnis :-(
Ich bin weiterhin dankbar für jeden neuen Ansatz :-)
Viele Grüße
sbm-
Mahlzeit sbm,
Hast Du mein Beispiel angeschaut
Ja, habe ich. Ich habe mir sogar die Mühe gemacht und den Quellcode lokal abzuspeichern und meinen Firefox damit zu füttern. Und - was soll ich sagen: ich habe innen einen dunkelgrauen Bereich, in dem sich der Inhalt befindet ... und drumherum einen weißen "Rahmen" (oder "Passepartout"). Wenn ich die Fenstergröße verändere, wird die Höhe des dunkelgrauen Bereichs angepasst. Was genau soll hier (nicht) funktionieren?
Wie schaffe ich es, einen 10px breiten Rahmen im Anzeigebereich des Fenster darzustellen?
Hast Du doch schon.
Na sicher. Schließlich setzt Du die Höhe des inneren Bereichs ja auch so. Wenn Du das nicht willst, setze die Höhe nicht.
Oder berechne vorher die notwendige Höhe (falls möglich) - dann hast Du aber am unteren Bereich ggf. kein Passepartout.
Oder sorge dafür, dass im inneren Bereich <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=gescrollt werden kann>.
oder gehts Dir jetzt darum, mir ob meiner offensichtlich unglücklichen Begriffswahl eins reinzuwürgen?
Nein. Es geht mir darum, dass Du Dich - in Deinem eigenen Interesse - so ausdrücken solltest, dass Dich Deine Leser verstehen können. Damit sie wissen, was Du eigentlich willst. Niemand kann in Deinen Kopf hineinschauen, Du solltest also Dein Anliegen bzw. Problem so exakt wie möglich schildern.
Bisher ist mir immer noch nicht klar, was Du eigentlich willst (was nicht schon funktioniert) bzw. was Dich stört ...
Wie auch immer, Deine Lösung führt nicht zum gewünschten Ergebnis :-(
Ich bin weiterhin dankbar für jeden neuen Ansatz :-)
Wieso denn? Ist das, was Dein bisheriger Code bewirkt, nicht das, was Du willst?
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
@EKKI
Vielen Dank für Deine Geduld.Ich suche einfach eine elegantere und vorallem funktionierende Lösung und hatte gehofft, ein paar Ansätze und Ideen zu bekommen, die ich dann hier diskutieren kann (halt wie im richtigen Leben, wenn ich mal in den Luxus komme, mit anderen Entwicklern zu diskutieren) und evtl. zu einer Lösung führt, von der alle etwas haben. Vielleicht ist mit ein paar Kniffen eine reine CSS und oder HTML Lösung erreichbar, ich weiß es nicht. Ich bin im Moment am Ende mit meinem Latein.
Das was ich bislang umgesetzt habe funktioniert nur, wenn der Anzeigebereich des Fensters größer als die Höhe des Contents ist. Wenn das nicht der Fall ist, sieht es ziemlich bescheiden aus. Mit dem onload-Event bekomme ich leider nicht die Höhe des wrap-Divs raus. Das war dann auch der Punkt, an dem ich mich entschieden habe, hier einen Thread zur Ideenfindung zu eröffnen.
Viele Grüße
sbm-
Mahlzeit sbm,
Das was ich bislang umgesetzt habe funktioniert nur, wenn der Anzeigebereich des Fensters größer als die Höhe des Contents ist.
Wieviel Content wird auf der "fertigen" Seite zu sehen sein? Was spricht gegen eine Lösung, die weiterhin immer einen festes "Passepartout" innerhalb des <body> erzeugt, das innere <div> entsprechend verkleinert und dann dort einen Scrollbalken anbietet (wenn der Benutzer meint, sein Fenster so weit verkleinern zu müssen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Unbenanntes Dokument</title> <style type="text/css"> [code lang=css] * { margin: 0; padding:0; } body { background-color: #ffffff; } div#wrap { margin: 15px; padding: 5px; background-color: #666666; overflow: auto; }</style>
<script type="text/javascript" language="javascript">
function setBorder() { document.getElementById('wrap').style.height = (window.innerHeight - 40) + 'px'; }</script>
</head><body onload="setBorder()" onresize="setBorder()">
<div id="wrap">
In diesen container kommt der Content ...<br />
In diesen container kommt der Content ...<br />
In diesen container kommt der Content ...<br />
In diesen container kommt der Content ...<br />
In diesen container kommt der Content ...<br />
In diesen container kommt der Content ...<br />
In diesen container kommt der Content ...<br />
</div>
</body>
</html>[/code]MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
-
-
-
-
-
-
-
-
-
-