HTML-Seite nach unten scrollen

    • Offizieller Beitrag

    Ich brauche mal Hilfe von jemanden mit HTML/CSS Erfahrung.
    Ich möchte, dass der Inhalt dieser Seite ganz unten auf der Seite angezeigt wird.

    Spoiler anzeigen
    HTML
    <html>
    <head>
    <title>Chatbox</title>
    <style type="text/css">body { background-color:#FFFFAA; padding:0px; margin:4px; } p { margin:4px; }</style>
    </head>
    <body>
    <p><font color="#FF0000" size="2">User1: Das ist ein Test</font></p>
    <p><font color="#0000FF" size="2">User2: Und noch ein anderer Text</font></p>
    </body>
    </html>


    Vor dem abschließenden </body> werden dann immer neue Zeilen eingefügt. Diese neue Zeile soll dann wieder ganz unten angezeigt werden. Der Rest soll dann bei zu vielen Zeilen nach oben wegscrollen.
    Gibt's da irgendein CSS- oder HTML-Befehl für?
    Zur Not auch Javascript. Wobei ich das vermeiden möchte.

  • also erstmal brauchst du ein position absolute/fixed
    dann musst du glaube ich die höhe der box wissen.

    Eine Box zentrieren tu ich immer so:
    #box {
    position:absolute;
    left:50%;
    width:300px;
    margin-left:-150px; /*hälfte der breite*/
    }

    Bzw. hab ich auch schon folgende methode gesehen:

    body { /*es muss das übergeordnete element von der box sein */
    text-align:center; /* für den IE */
    }

    #box {
    width:300px;
    margin-left:auto;
    margin-right:auto;
    }

    Das geht anscheinend auch.

    Das ganze kann man auch analog für die Höhe übernehmen. Wenn du dann evtl. mit dem top und margin-bottom/top Wert rumspielst könntest du es evtl so hinbekommen.

    MFG FireFlyer

    *Paradox ist, wenn man sich im Handumdrehen den Fuss bricht* :D

    • Offizieller Beitrag

    Vielleicht sollte ich das Problem ausführlicher beschreiben.
    Ich schreibe gerade an einer Chatbox-UDF (noch lange nicht fertig) und mein Problem ist, dass der Inhalt immer nach unten gescrollt werden soll.
    Hier mal ein Beispielscript:

    Spoiler anzeigen
    [autoit]


    #include <GUIConstantsEx.au3>
    #include <IE.au3>
    $hGui = GUICreate('Chatbox Beispiel', 400, 600)
    $hChat = _Chatbox_Create($hGui, 10, 10, 380, 450, 0xffffaa)
    GUICtrlCreateLabel('User1', 10, 480, 350, 20)
    $hUser1 = GUICtrlCreateInput('', 10, 500, 350, 20)
    GUICtrlCreateLabel('User2', 10, 540, 350, 20)
    $hUser2 = GUICtrlCreateInput('', 10, 560, 350, 20)
    GUISetState()
    For $i = 0 To 15
    _Chatbox_SetData($hChat, 'User1: blabla ' & Random(1000, 9999, 1), 0xff0000, 2)
    _Chatbox_SetData($hChat, 'User2: blubblub ' & Random(1000, 9999, 1), 0x0000ff, 2)
    Next
    While True
    Switch GUIGetMsg()
    Case $GUI_EVENT_CLOSE
    Exit
    Case $hUser1
    _Chatbox_SetData($hChat, 'User1: ' & GUICtrlRead($hUser1), 0xff0000, 2)
    GUICtrlSetData($hUser1, '')
    GUICtrlSetState($hUser1, $GUI_FOCUS)
    Case $hUser2
    _Chatbox_SetData($hChat, 'User2: ' & GUICtrlRead($hUser2), 0x0000ff, 2)
    GUICtrlSetData($hUser2, '')
    GUICtrlSetState($hUser2, $GUI_FOCUS)
    EndSwitch
    WEnd

    [/autoit] [autoit][/autoit] [autoit][/autoit] [autoit]

    Func _Chatbox_Create($hWnd, $iLeft, $iTop, $iWidth, $iHeight, $iBgColor = 0xffffff)
    Local $ahChat[3], $sTempFile, $oBody
    $ahChat[0] = _IECreateEmbedded()
    If @error Then Return SetError(1, 0, 0)
    GUISwitch($hWnd)
    $ahChat[1] = GUICtrlCreateObj($ahChat[0], $iLeft, $iTop, $iWidth, $iHeight)
    If $ahChat[1] = 0 Then Return SetError(2, 0, 0)
    $ahChat[2] = '<html>' & @CRLF & '<head>' & @CRLF & '<title>Chatbox</title>' & @CRLF & '<style type="text/css">body { background-color:#' & Hex($iBgColor, 6)
    $ahChat[2] &= '; padding:0px; margin:4px; } p { margin:4px; }</style>' & @CRLF & '</head>' & @CRLF & '<body>' & @CRLF & '</body>' & @CRLF & '</html>'
    $sTempFile = @TempDir & '\ChatboxTemp.html'
    $hFile = FileOpen($sTempFile, 2)
    FileWrite($hFile, $ahChat[2])
    FileClose($hFile)
    _IENavigate($ahChat[0], $sTempFile)
    Return $ahChat
    EndFunc

    [/autoit] [autoit][/autoit] [autoit]

    Func _Chatbox_SetData(ByRef $ahChat, $sMsg, $iColor, $iSize = 2)
    If Not IsArray($ahChat) Then Return SetError(1, 0, 0)
    If UBound($ahChat) <> 3 Then Return SetError(2, 0, 0)
    Local $sTempFile, $hFile, $oBody
    $sMsg = '<p><font color="#' & Hex($iColor, 6) & '" size="' & $iSize & '">' & $sMsg & '</font></p>'
    $sMsg = StringReplace($sMsg, @CRLF, '<br>')
    ;~ $ahChat[2] = StringRegExpReplace($ahChat[2], '(?s)(.+<body>.*)(</body>.+</html>)', '$1' & $sMsg & @CRLF & '$2')
    $oBody = _IETagNameGetCollection($ahChat[0], 'body', 0)
    _IEDocInsertHTML($oBody, $sMsg)
    ;~ $sTempFile = @TempDir & '\ChatboxTemp.html'
    ;~ $hFile = FileOpen($sTempFile, 2)
    ;~ FileWrite($hFile, $ahChat[2])
    ;~ FileClose($hFile)
    ;~ _IENavigate($ahChat[0], $sTempFile)
    Return 1
    EndFunc

    [/autoit]
  • Ja, das ist eine sehr große Zahl an Pixeln zum Scrollen. Genauer gesagt ist das die größte, die IE8 erlaubt. (Vorherige IE-Versionen haben auch größere akzeptiert.)

    • Offizieller Beitrag

    Ich hatte es durch ausprobieren schon rausbekommen, trotzdem danke.
    Es ist auch nicht so schlimm, dass keine größeren Zahlen zulässig sind, weil ich den Befehl ja bei jeder Zeile aufrufe. Von daher würde auch 16 oder so (je nach Zeilenhöhe) ausreichen.

    Kennst Du eine Seite, wo alle Methoden und Eigenschaften des IE-Objects aufgeführt sind?
    Ich habe schon gegoogelt, aber da findet man sehr viel, nur nicht das, was man sucht... :S