Textinhalt soll 'hinter' fixer border scrollen

Dieses Thema im Forum "Web Page Design" wurde erstellt von kaifreund, 16.06.2005.

  1. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    MacUser seit:
    30.07.2004
    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
     

    Anhänge:

  2. dms

    dms Gast

    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. :)
     
  3. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    MacUser seit:
    30.07.2004
    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
     
  4. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    MacUser seit:
    30.07.2004
    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;
    }
     
  5. dms

    dms Gast

    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.
    Code:
    <!--[if IE]>
       <link type="text/css" rel="stylesheet"  href="ie.css" />
    <![endif]-->
     
  6. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    MacUser seit:
    30.07.2004
    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
     
  7. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    MacUser seit:
    30.07.2004
    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
     
Die Seite wird geladen...

Diese Seite empfehlen