✔ Text-Positionierung in einem div?!

sunstyle

sunstyle

Mitglied
Hallo an alle,

ich hab eine Frage zwecks einer Text-Positionierung.

Ich habe eine Tabelle (Breite 600px, Höhe 100px) und darin ein DIV mit den gleichen Dimensionen.

Jetzt wird in das Div Text geladen. Damit die Tabelle nicht aus den "Nähten platzt", ist im DIV overflow:hidden eingestellt.

Jetzt zu meiner Frage: der "versteckte" Teil des Textes soll jetzt nicht mehr unten sein, sondern oben, sprich: der sichtbare Teil des Textes soll von unten ausgehen und nicht von oben. Wie in einer Konsole. Irgendwie sehr schwer zu umschreiben, ich hoffe ihr versteht mein Problem.

Vielen Dank schonmal im Voraus.
 
Ich hab da jetzt irgendwie ein Verständnisproblem. Soll der Text in der Box umgekehrt dargestellt werden (der Textanfang befindet sich unten und sein Ende oben), oder soll beim Seitenaufruf in der Box zum unteren Textende gesprungen werden?

Letzteres liesse sich mit der scrollIntoView()-Methode umsetzen.

sL*$uN hat gesagt.:
[...] Damit die Tabelle nicht aus den "Nähten platzt", ist im DIV overflow:hidden eingestellt.
Zum Vergrößern anklicken....

Verstehe ich das richtig, daß der Inhalt nicht scrollfähig sein soll?
 
Also mit scrollIntoView() geht es nicht, danke aber trotzdem für den Versuch ;)

Ich habe mal eine Grafik angehängt die mein Problem verdeutlichen soll, ich hoffe diese reicht aus. (Ein Bild sagt mehr als tausend Worte)
 

Anhänge

  • 26852attachment.jpg
    26852attachment.jpg
    184 KB · Aufrufe: 16
Kannst du auch verraten, warum es bei dir nicht mit scrollIntoView() geht?

Grundsätzlich funktioniert die Methode nämlich einwandfrei:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<script type="text/javascript">
function Test () {
  document.getElementById("Anker").scrollIntoView(true);
}
</script>

<style type="text/css">
<!--
div.textBox {
width: 600px;
height: 100px;
overflow: auto;
border: 1px solid #000;
}

div.textBox p {
margin: 0;
padding: 5px 5px 0 5px;
}
-->
</style>

</head>
<body onload="Test()">

<div class="textBox">
     <!-- Hier folgt der Inhalt -->
     <p>dummy text 1</p>
     <p>dummy text 2</p>
     <p>dummy text 3</p>
     <p>dummy text 4</p>
     <p>dummy text 5</p>
     <p>dummy text 6</p>
     <p>dummy text 7</p>
     <p>dummy text 8</p>
     <p>dummy text 9</p>
     <p>dummy text 10</p>
     <p>dummy text 11</p>
     <p>dummy text 12</p>
     <p>dummy text 13</p>
     <p>dummy text 14</p>
     <p>dummy text 15</p>
     <p>dummy text 16</p>
     <p>dummy text 17</p>
     <p>dummy text 18</p>
     <p>dummy text 19</p>
     <p>dummy text 20</p>
     <!-- Hier endet der Inhalt -->
     <!-- "Sprungmarke" -->
     <span id="Anker"></span>
</div>

</body>
</html>
 
Ok, danke vielmals, jetzt hat es geklappt.
Hatte keinen Span genommen sondern einfach dem div die id "Anker" zugewiesen, hatte wohl die Ausführung dieser Funktion missverstanden ;)
 
Hallo,
ich hätte das überhaupt nicht mit JavaScript sondern mit CSS gelöst:
Code: 
.aDIV {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
}
.iDIV {
    position: absolute;
    bottom: 0;
}
HTML: 
<div class="aDIV">
<div class="iDIV">
    <script type="text/javascript">
    for(i=1; i<50; i++)
        document.write("<br>Zeile " + i);
    </script>
</div>
</div>
Funktioniert dann auch bei deaktiviertem JS.
 
@hela: den "CSS-Vorschlag" hatte ich auch im Hinterkopf. Deshalb habe ich auch rückgefragt, ob der Inhalt tatsächlich nicht scrollfähig sein soll. Da vom Autor aber keine Rückmeldung kam, habe ich die Alternative wieder verworfen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück