beliebig langer Text immer mit Abstand zum Bildschirmrand

[Bianca]

Hallo!

Die Ausgangslage ist Folgende: Ich möchte einen beliebig langen Text, der in der Länge flexibel bleiben muss, mit einem Abstand zu allen Seiten des Bildschirmrandes versehen. In diesem Beispiel wird der Text mit einer margin von 100px von allen Seiten des Bildschirmrandes fern gehalten. Links und rechts gibt es keine Probleme - der Abstand ist immer da. Ich möchte jedoch, dass auch oben und unten IMMER ein Abstand zum Bildschirmrand entsteht, auch dann, wenn ich nach unten rolle und der Text wegen seiner großen Länge die ganze Bildschirmhöhe ausfüllt. Wie gesagt: Der Text darf keine feste Höhe haben, sondern soll beliebig lang sein dürfen. Ich möchte auch kein Bild mit beispielsweise 100px Höhe und weißer Farbe oben und unten einfügen, das den Text zudecken könnte, denn das Ziel ist unter anderem, ein halbtransparentes Kopfbild oben auf der Website zu haben, das beim Scrollen jedoch nicht vom Text "unterlaufen" wird. Wie kann man nun erreichen, dass ein Element einen Abstand nach oben und unten erzeugt, ein Element, das den Text IMMER auf Abstand hält? Falls es tatsächlich eine Lösung dafür geben sollte, würde ich mich riesig freuen, wenn ihr sie mir mitteilt!

Unter www.test777.de.vu habe ich diesen Sachverhalt in einfacher Form veranschaulicht.

Gruß,
Bianca

[Thorsten]

Hallo Bianca,

was hast du bisher versucht?

Wenn dich ein oben und unten um 100px verkleinerter Scrollbalken nicht stört, wäre ein Container mit der Eigenschaft overflow:scroll eine Idee.
Allerdings wirst du noch ein paar weitere Kniffe anwenden müssen.

Viele Grüße
Thorsten

[Steel]

Hi,

wenn Du moechtest, dass ein Text zum Bildschirmrand (ich nehm an du meinst Viewportrand) immer 100px Abstand halten soll, dann sag doch Deinem CSS auch genau das. Solltest Du wirklich Bildschirmrand meinen musst du schon zu Javascript greifen.

Was Du im Augenblick tust ist dem Elemnt zu sagen, dass es 100px Abstand nach Links, rechts, oben und unten zu halten. Das tut es ja auch. Da ausser diesem Element nichts weiter drumherum steht haelt es diesem Abstand zum body, der im Augenblick gleichzusetzen ist mit HTML, also dem Dokument. Die lange des dokuments wird gewoehnlich vom Inhalt definiert, (deinem Text) also ist das Dokument in jede Richtung 100px groesser als der Inhalt. Genau das sagst Du ihm und genau das machst Du.

Du schreibst aber Bildschirmrand (Viewportrand). Dann musst du deinem Dokument nur mitteilen, dass es bitte nicht groesser als der Viewport zu sein hat. Dafuer eignen sich Prozentangaben prima. Dann kannst du deinem Dokument padding mit 100px verpassen oder einem Element darin einen margin von 100px. Je nachdem wo Du dann die Scrollbalken wuenscht ist das deine freie Entscheidung.

Ein Beispiel soetwas zu erreichen waere:

html {
 padding:100px;
 height:100%;
 width:100%;
 overflow:hidden;
}

body {
 margin:0px;
 height:100%;
 padding:0px;
 background-color:#336699;
 overflow:scroll;
}

[Bianca]

Danke für eure Antworten! Ich habe dein Beispiel im Prinzip umgesetzt, Steel, und auf www.test777.de.vu eingesetzt. Nun gibt es aber noch eine Sache, die mir dabei nicht gefällt: Der Abstand nach unten hat keine feste Höhe, sondern ist je nach Bildschirmauflösung variabel. Doch wegen der Prozentangaben lässt sich das wohl kaum ändern, nicht wahr?

[Steel]

Hallo,

Das sieht auf den ersten Blick ja schon nach was aus.

Aber:

erstmal solltest du das CSS in einem Bereich definieren. Nicht fuer jede Anweisung einen eigenen Bereich nutzen.

<style type="text/css">  
html {  
 height: 100%;  
 overflow: hidden;  
 padding: 100px 100px 0;  /* Padding unten 0 was? Hamster?*/  
}  
  
body {  
 height: 70%; /*warum nun doch nur 70% der hoehe?*/  
 background: transparent url(hintbi.jpg) no-repeat top left;  
 overflow: scroll;  
 padding: 0px;  
 margin: 0px;  
}  
  
.text {  
 padding:30px;  
 background: #ffffff;  
}  
</style>

Die Bloecke muessen so nicht sein, sind aber uebersichtlicher. Man kann z.b. prima Kommentare reinschreiben! ;) Am besten ist es sogar, wenn man das CSS in eine Datei auslagert. Dann laesst es sich auch noch prima wiederverwenden.

Wie du siehst habe ich schon 2 Schwachpunkte Deines Designs kommentiert. Sicher: bei 0 darf das px auch gern fehlen. Ich mach es dort aber trotzdem gern rein, damit bei einer Aenderung auch dran gedacht wird.

Wenn du einem Element sagst, dass es nur 70% des zur verfuegung stehenden Platzes einnehmen soll, ist ihm ziemlich egal, ob da irgendwo ein oder kein Padding ist. Soll es bis zum unteren Viewportrand reichen, musst du es also 30% nach unten setzen oder ihm sagen dass es so lang sein soll. Also 100% Hoehe haben soll. Oder was genau ist Deine Absicht hier?

[Længlich]

Teanastellen!

<style type="text/css">

padding: 100px 100px 0;  /* Padding unten 0 was? Hamster?*/
</style>

  
Das ist schon okay so. 0 · Hamster = 0 · Teppiche = 0° = 0m = 0em = 0px = 0. Deswegen ist es bei einem Wert von 0 (und nur bei diesem) auch in CSS erlaubt, die Einheit wegzulassen.  
  
Viele Grüße vom Længlich

[Steel]

Hoi,

Das ist schon okay so. 0 · Hamster = 0 · Teppiche = 0° = 0m = 0em = 0px = 0. Deswegen ist es bei einem Wert von 0 (und nur bei diesem) auch in CSS erlaubt, die Einheit wegzulassen.

Hatte ich ja auch geschrieben. Ich finde lediglich, dass es praktisch ist trotzdem die Einheit dazuzuschreiben. Dann  hat man die bei Wertaenderungen da schon stehen. Sonst wird aus margin:0 auch fix mal margin:10. Aber das ist Geschmackssache.

[Bianca]

Dir zuliebe habe ich nun die CSS-Angaben in Blöcken aufgeteilt. :-) Normalerweise schreibe ich sie in einer bestimmten Reihenfolge auf eine Linie, und wenn man dies konsequent macht, findet man die verschiedenen Angaben sofort. Das ist platzsparend, aber natürlich auch Gewöhnungssache.
Ich habe außerdem deshalb keine externe CSS verwendet, damit die Forennutzer in einer Datei alle Informationen finden. Nur muss ich zugeben, dass die Anzeige des Quelltextes bei diesen de.vu-Domains nicht korrekt funktioniert, da von de.vu noch eine zusätzliche htm-Datei ausgegeben wird. Man sieht das jeweils beim Laden der Seite (www.test777.de.vu).

Die Höhe habe ich aus zwei Gründen nicht auf 100% gesetzt: 1. wäre in den meisten Auflösungen nicht der ganze Text sichtbar (auch nicht, wenn man ganz nach unten scrollt), 2. hätte ich unten keinen Abstand, bei dem das Hintergrundbild sichtbar wird.

Also, meine Absicht ist immer noch Folgende: Ich möchte ein Layout, bei dem auf allen Seiten immer ein Abstand entsteht, was jetzt auch der Fall ist. Nur sollte dieser Abstand IMMER die gleiche feste Größe haben, also sich nicht bei unterschiedlicher Bildschirmauflösung prozentual verändern. Aber ich befürchte, dass es keine Lösung dafür gibt...

[Steel]

Hi!

Hm. macht meine Loesung das nicht?

Die Seite wird auf 100% des Browserfensters fesgelegt und bekommt 100px Rand drumrum. In diesem eingenistetem Bereich ist alles scrollbar.

<----- 100% ----->
------------------------
|                      |
|  ------------------  | |
|  |                |  | |
|  |   scrollbar    |  | 100%
|  |                |  | |
|  ------------------  | |
|                      |
------------------------

Sieht das bei dir nicht so aus?