DIV mit Seite scrollen

[Sven]

Hi,

ich hab jetzt schon 45 Minuten gegoogelt, aber leider nichts gefunden.

Mein Problem:

Ich habe ne Seite, bei der der Content in einem DIV steht.
Dort habe ich jetzt nen Haufen Tabellen für einen Kalender rein gehauen. Jetzt möchte ich die Termine als DIVs an bestimmte Positionen setzen.

Klappt so weit auch, aber die Dinger scrollen nicht mit, wenn das haupt-DIV gescrollt wird.
Dann sind die Termine natürlich nicht mehr da, wo sie hin sollen :)

<div class="appointment" style="left:50px; top:150px; width:138px; position:absolute; z-index:10000">
     <table cellpadding="0" cellspacing="0" style="bgcolor:#FFFFFF">
       <tr>
         <td>Test</td>
       </tr>
     </table>
</div>

so hab ich es jetzt. steige allerdings durch die ganzen position Werte nicht wirklich durch, was daran liegen könnte, dass keiner den gewünschten Effekt hatte...

Help please :)

[Marcus]

<div class="appointment" style="left:50px; top:150px; width:138px; position:absolute; z-index:10000">
     <table cellpadding="0" cellspacing="0" style="bgcolor:#FFFFFF">
       <tr>
         <td>Test</td>
       </tr>
     </table>
</div>

Hallo Sven,
von deiner Codierung zeigst du a bisserl wenig, um eine analyse vorzunehmen. Wie sieht dein Haupt-DIV aus? wie sieht deine Klasse appointment aus? position: absolute scrollt normalerweise mit, während fixed stehen bleibt und relative sich immer von der aktuellen Positionsstand ausgeht.

[Sven]

appointment hat noch keinen Inhalt, da sollen die Werte erst rein, wenn es manuell ordentlich funktioniert ;)

Das ist ne Menge Code, deshalb net alles.
Ich kürze das mal etwas zusammen:

Aus dem CSS file:
div.main {
 height: 500px;
 background-color: rgb(204, 216, 230);
 width: 800px;
 overflow:hidden;
}

div.main_tbodybig {
 height: 500px;
 background-color: rgb(204, 216, 230);
 overflow:auto;
}

Codeauszug der Seite:

<div class="main">

<div class="main_tbodybig">

<table cellpadding="0px" cellspacing="0px" border="0px" style="border-collapse:collapse;">
//hier sind dann die ganzen Tabellen mit drin

</table>

</div>

<div class="appointment" style="left:50px; top:150px; width:138px; position:absolute; z-index:10000">
     <table cellpadding="0" cellspacing="0" style="bgcolor:#FFFFFF">
       <tr>
         <td>Test</td>
       </tr>
     </table>

</div>
</div>

[wahsaga]

hi,

div.main_tbodybig {
overflow:auto;

Gut, Elemente innerhalb dieses Div, welche über dessen definierte Masse hinausgehen, können also durch Scrollen in diesem Div erreicht werden.

<div class="main_tbodybig">

<table cellpadding="0px" cellspacing="0px" border="0px" style="border-collapse:collapse;">
//hier sind dann die ganzen Tabellen mit drin

</table>

</div>

OK, diese "ganzen Tabellen" lassen sich dann also in diesem Div scrollen.

<div class="appointment" style="left:50px; top:150px; width:138px; position:absolute; z-index:10000">

Dieses Ding befindet sich ausserhalb des Div-Elementes, dessen Inhalt du scrollbar gemacht hast - es hat also überhaupt keinen Grund, sich beim Scrollen in diesem Div in irgendeiner Weise mit zu bewegen.

gruß,
wahsaga

[Sven]

<div class="appointment" style="left:50px; top:150px; width:138px; position:absolute; z-index:10000">

Dieses Ding befindet sich ausserhalb des Div-Elementes, dessen Inhalt du scrollbar gemacht hast - es hat also überhaupt keinen Grund, sich beim Scrollen in diesem Div in irgendeiner Weise mit zu bewegen.

wenn ich es vor das </div> setze, ist es zwar noch an der richtigen Postion, scrollt aber trotzdem nicht mit.

Wenn ich es vor das </table> setze, scrollt es zwar mit, ist aber nicht mehr an der gewünschten Position, sondern fest unter den Tabellen :(

[wahsaga]

hi,

wenn ich es vor das </div> setze, ist es zwar noch an der richtigen Postion, scrollt aber trotzdem nicht mit.

Wenn sich die absolute Positionierung am Viewport orientiert, ist das ebenfalls kein Wunder.

gruß,
wahsaga

[Sven]

hi,

wenn ich es vor das </div> setze, ist es zwar noch an der richtigen Postion, scrollt aber trotzdem nicht mit.

Wenn sich die absolute Positionierung am Viewport orientiert, ist das ebenfalls kein Wunder.

gruß,
wahsaga

Hört sich toll an, sagt mir nur leider nichts :)
was muss ich ändern?

Gruß

Sven

[Joe]

hi,
Hört sich toll an, sagt mir nur leider nichts :)
was muss ich ändern?

Deine Art zu entwickeln. Wie wärs denn, wenn du verstehen würdest was du da schreibst dann hättest du das Problem schon längst beseitigt.

Also ganz viel CSS Kenntnisse anlesen ;) oder warten bis wahsaga
wieder antwortet

[Sven]

hi,
Hört sich toll an, sagt mir nur leider nichts :)
was muss ich ändern?

Deine Art zu entwickeln. Wie wärs denn, wenn du verstehen würdest was du da schreibst dann hättest du das Problem schon längst beseitigt.

Also ganz viel CSS Kenntnisse anlesen ;) oder warten bis wahsaga
wieder antwortet

hmm, joa, durchaus hilfreich...
hab ich bloß keine Zeit zu. wenn ich was nicht hin kriege, google ich ne Runde und dann finde ich das nötige Wissen irgendwo, hier komme ich aber nunmal nicht weiter.

Learning by doing ist wohl nicht mehr in was? :)

[wahsaga]

hi,

Learning by doing ist wohl nicht mehr in was? :)

Doch, ist es.
Also do(www->search()) and do(yourself->inform()), and learn.

gruß,
wahsaga

[Sven]

hi,

Learning by doing ist wohl nicht mehr in was? :)

Doch, ist es.
Also do(www->search()) and do(yourself->inform()), and learn.

gruß,
wahsaga

jup und wegen inform() bin ich hier, aber tolle sprüche klopfen macht wohl mehr spass, also ne hilfreiche antwort zu geben^^

[Marcus]

Lieber Sven!!!

Also ganz viel CSS Kenntnisse anlesen ;) oder warten bis wahsaga
wieder antwortet

hmm, joa, durchaus hilfreich...
hab ich bloß keine Zeit zu.

Keine Zeit? Ja, dann kannst du das Problem nicht lösen. Für eine solche Aufgabe braucht man eben Kenntnisse. Und wenn man die nicht hat, dann muss man sich diese erarbeiten. Wenn man dazu jedoch keine Zeit hat, dann muss man es eben lassen!!!
»»

wenn ich was nicht hin kriege, google ich ne Runde

Ja, ja, dann google mal eine Runde, wenn du Zeit hast. Besser wäre ein systematisches Lernen in SelfHTML und wenn dann noch Fragen offen sind, dann im Forum Fragen und nicht umgekehrt.

Gruß Marcus

[Sven]

Keine Zeit? Ja, dann kannst du das Problem nicht lösen. Für eine solche Aufgabe braucht man eben Kenntnisse. Und wenn man die nicht hat, dann muss man sich diese erarbeiten. Wenn man dazu jedoch keine Zeit hat, dann muss man es eben lassen!!!

Dann dürfte es in diesem Forum ja kaum Einträge geben, wenn jeder die Kenntnisse hätte, alles selbst zu lösen.
Wenn ich es selbst hin kriegen würde, wäre ich wohl kaum hier.

Ja, ja, dann google mal eine Runde, wenn du Zeit hast. Besser wäre ein systematisches Lernen in SelfHTML und wenn dann noch Fragen offen sind, dann im Forum Fragen und nicht umgekehrt.

ich HABE mir die Seiten zur Positionierung durchgelesen (nicht nur hier), habe es nicht richtig verstanden/umsetzen können und DANN hier gepostet.

Sonst wäre ich auch wohl kaum hier gelandet.
oder meinst du googlen ist bei mir
http://www.google.de/search?hl=de&q=HTML+forum+wo+man+alles+gemacht+kriegt+wenn+man+keine+ahnung+hat&meta=

??

[wahsaga]

hi,

Hört sich toll an, sagt mir nur leider nichts :)
was muss ich ändern?

Erst mal deinen Zitierstil bitte, danke. Zitiere sinnvoll, das worauf du dich konkret beziehst - und nicht immer gedankenlos alles.

Und dann dein Verständnis von absoluter Positionierung - informiere dich, worauf sie ausser dem Viewport Bezug nehmen kann, und überlege dir, wie du das so einsetzen kannst, dass es in deinem Falle mit dem Inhalt des Divs mitscrollt.

gruß,
wahsaga

[Marcus]

Hallo Sven,

Aus dem CSS file:
div.main {
height: 500px;
background-color: rgb(204, 216, 230);
width: 800px;
overflow:hidden;

Mit overflow:hidden schneidest du höhen über 500px ab!

}

div.main_tbodybig {
height: 500px;
background-color: rgb(204, 216, 230);
overflow:auto;
}

Codeauszug der Seite:

<div class="main">

<div class="main_tbodybig">

<table cellpadding="0px" cellspacing="0px" border="0px" style="border-collapse:collapse;">
//hier sind dann die ganzen Tabellen mit drin

</table>

Jetzt sind hier plötzlich deine Tabellen.

</div>

<div class="appointment" style="left:50px; top:150px; width:138px; position:absolute; z-index:10000">
     <table cellpadding="0" cellspacing="0" style="bgcolor:#FFFFFF">
       <tr>
         <td>Test</td>
       </tr>
     </table>

In deinem erstgen Betrag hat es noch so ausgesehen, als wären hier deine Tabellen, - was nun?

</div>
</div>

»»
Mir erscheint es, dass du hier einige Unklarheiten hast. Ich verstehe nicht ganz weshalb in der Klasse main die Daten über height:500px abgeschnitten werden sollen, jedoch dann in Klasse main_tbodybig mit overflow:auto eine Scrollleiste definieren lässt und dann noch unter diesem div eine weitere Tabelle mit dem div-Block calss="appointment" setzt, in dem du bezüglich overfolw nichts angibst. Definiere mal in den Styles die Klasse appointment und setze dort overflow:auto, dann hast du jedoch zwei Scrollbereiche. Wie das dann mit der übergeordneten Klasse main, in der du overflow:hidden angegeben hast, funktioniert, kann ich so nicht sagen. Möchstest du die beiden inneren div-Blöcke gemeinsam scrollen, dann musst du in der Klasse main overflow:auto setzen und dieses Attribut in main_tbodybig entfernen.
Gruß Markes.

[Sven]

Mir erscheint es, dass du hier einige Unklarheiten hast. Ich verstehe nicht ganz weshalb in der Klasse main die Daten über height:500px abgeschnitten werden sollen, jedoch dann in Klasse main_tbodybig mit overflow:auto eine Scrollleiste definieren lässt und dann noch unter diesem div eine weitere Tabelle mit dem div-Block calss="appointment" setzt, in dem du bezüglich overfolw nichts angibst. Definiere mal in den Styles die Klasse appointment und setze dort overflow:auto, dann hast du jedoch zwei Scrollbereiche. Wie das dann mit der übergeordneten Klasse main, in der du overflow:hidden angegeben hast, funktioniert, kann ich so nicht sagen. Möchstest du die beiden inneren div-Blöcke gemeinsam scrollen, dann musst du in der Klasse main overflow:auto setzen und dieses Attribut in main_tbodybig entfernen.
Gruß Markes.

Danke, werde ich morgen testen. Bin diese Forenansicht nicht gewohnt und hab den Beitrag nicht gesehen.

appointment hatte ich nur schon mal eingetragen um die styles, wenn es dann funktioniert, dort rein zu schieben.

Ja, die beiden sollen zusammen scrollen.

[Sven]

Habe den Fehler gefunden.
position:relative im enthaltenden Div und jetzt geht es...