Textinhalt soll 'hinter' fixer border scrollen

[kaifreund]

Hallo Forum,
schwierig zu beschreiben... daher anbei ein jpg.
Wie stelle ich es an das der Text von unten in das Fenster einscrollen kann (scrollbar ist nicht dargestellt) der schwarze 1px Rahmen aber stehen bleibt? Versuche dem Body, einer Tabelle oder einer Zelle einen Rahmen zu verpassen scheitern daran das dieser immer "mitscrollt". Hat jemand eine Idee?


gruesse kai

 

[dms]

Da gibts mehrere Möglichkeiten, die aber alle nicht perfekt sind:

1. Frames, wozu ich aber nicht raten würde

2. Ein scrollbares Div, mit overflow:auto; Klick

Bei diese beiden Lösungen wäre der Scrollbalken aber innerhalb des Rahmens.

3. Ein Bild dahinterlegen mit position:fixed; Wird meines Wissens nach jedoch nur von Opera unterstützt.

4. Ein Hintergundbild verwenden mit background-position:fixed;

Bei diesen beiden Lösungen wäre allerdings der Text unter- und überhalb des Rahmens auch sichtbar. Diesen könnte man verstecken indem man noch ein Div drüberlegt, was aber zu Verwirrungen beim Scrollbalken führen könnte.

Mit einem Div-Konstrukt das entsprechend positioniert und in der Höhe/Breite Variabel ist und entsprechende (Hintergrund-)Grafiken oder jeweils eine Border enthält könnte man das ganze auch skalierbar machen.

Ist wie gesagt alles nicht perfekt. Such Dir was aus.

 

[kaifreund]

hi dms,
herzlichen dank, version 2 habe ich ausprobiert und die ist definitiv echt hässlich ;-) aber darauf wird es hinauslaufen... version 3 und 4 fürchte ich macht nur probleme...

gruss
kai

 

[kaifreund]

Lösung 2 aber nun der Explorer und padding...

@ dms
Sh... ganz einfach scheint das dann doch nicht... findest du den Fehler?

Im Firefox 1.04 habe ich einen 588px breiten Text und die Scrollbars mit padding-right um 145px ganz nach rechts an den Rahmen gerückt... das padding-bottom interessiert FF hier nicht.

Der Explorer 6 dagegen zeigt die Scrollbars viel weiter links an. Und zwar schiebt IE die Scrollbar auf die Breite des Textes (588px) und zieht von diesen dann das padding (145px) ab. Was tun?

fragt kai

div.text {
vertical-align:top;
font-weight:normal;
padding-top:15px;
padding-left:15px;
padding-right:145px;
padding-bottom:15px;
font-size: 10px;
width:588px;
height:290px;
overflow: auto;
}

div.textborder {
vertical-align:top;
width:748px;
height:320px;
border:1px solid #999999; border-top: 0px;
overflow: auto;
}

 

[dms]

Ich kanns selbst leider nicht testen, da ich keinen IE habe.

Ich vermute mal es liegt am unterschiedlichen Box-Modell des IE. Versuche mal für den IE eine andere Style-Definition (margin/border-Angaben) zu deklarieren.

<!--[if IE]>
   <link type="text/css" rel="stylesheet"  href="ie.css" />
<![endif]-->

 

[kaifreund]

ich denke für den tip.
mit viel gewürge geht das, auch wenn ich es nicht wirklich verstehe... traue mich garnicht jetzt die anderen browser zu checken....
gruss
kai

 

[kaifreund]

Lösung

Das Problem was ich ncoh beschrieben hatte ist das reine Box-Modell Feature des IE 5.x PC. Die zieht padding Werte von der Breite tatsächlich ab anstatt sie wie alle anderen dazuzu addieren.
Lösung: Doctope auf strict (damit macht der IE 6 keine Zicken mehr und für den IE 5.x ein kleines javascript

if(navigator.appVersion.indexOf("MSIE 5")>-1)
document.write('<link rel="Stylesheet" href="ie5.css" type="text/css" />')

Nicht schön aber hilfreich.
Gruss kai