Ähnliches Verhalten wie iframe, Inhalte scrollen

[tobeit]

Hallo,

mit kleinem Wink auf meine Seite [url]http://www.tobeit.net/news.html[/url] damit Ihr nachvollziehen könnt, was ich möchte! Und zwar hätte ich gerne denselben Effekt wie jetzt mit dem iframe also dass dieses scrollt wenn die Inhalte zu "groß" werden, aber der Rahmen, das Design, fix bleiben, sprich nur der Textbereich soll scrollbar sein! Ist dies irgendwie über div's machbar?? Wie geh ich bei der Formatierung mit css vor?? Vllt könnt Ihr mir auch nur einen Hinweis auf Quellen für Seitenlayout geben ...

Vielen Danke

Grüße

tobeit

[Antipitch]

Hi tobeit,

dafür wird die CSS Eigenschaft overflow in Verbindung mit festen Größenangaben eingesetzt (in deinem Fall die Höhe des div).

Guck hier:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow

Gruß
Antipitch

[tobeit]

Hmm,

die Lösung is mir auch schon unter gekommen, jedoch würd ich dies gern über Prozentangaben machen ...

Danke schon mal, Grüße

[tobeit]

Hi tobeit,

dafür wird die CSS Eigenschaft overflow in Verbindung mit festen Größenangaben eingesetzt (in deinem Fall die Höhe des div).

Guck hier:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow

Gruß
Antipitch

Nun, wie eben schon erwähnt, könnte ich einen Pixel-festen Container mit Rahmen machen, jedoch ist dies nicht so gewünscht! Ich möchte einen Rahmen der sich dem Fenster anpasst, aber seine Inhalte wiederum begrenzt, so dass ich diese dann mit overflow behandeln kann, sei es abschneiden oder scrollbar machen! Jemand eine Idee?? Bzw. ist meine Vorstellung überhaupt nachvollziehbar??

Grüße

tobeit

[Antipitch]

Hi tobeit,

du meinst den gesamten Viewport ausfüllen ohne scrollen, Bereich oben feste Höhe in em oder px und den Rest durch das scrollbare div, right?

Ich wills nicht definitiv beschwören, aber ich fürchte, das wird in deinem Fall schwierig. Bei "normalen" divs kann man mit reinem CSS jede Menge anstellen mit Headern, Footern und 100% Höhe (denn die bräuchtest du ja de facto für das Scroll-div). Dann wird aber mit negativen margins, paddings etc. gearbeitet und da werden dann die Anfangs- und Startpunkte deiner Scrollleiste zum Problem.

Auf die schnelle fallen mir nur zwei Lösungen ein:

1. Das obere div bekommt auch eine Höhenangabe in Prozent, so dass du insgesamt auf 100% kommst

oder

2. JS: Höhe des Viewports auslesen und das untere div anpassen

Gruß
Antipitch

[tobeit]

Hi,

Danke mal wieder :) ich würde wohl diese Lösung bevorzugen ...

1. Das obere div bekommt auch eine Höhenangabe in Prozent, so dass du insgesamt auf 100% kommst

Kann man eigentlich nicht in irgendeiner Form so eine Angabe machen??

height:100%-60px

Grüße

[Harlequin]

Yerf!

Kann man eigentlich nicht in irgendeiner Form so eine Angabe machen??

height:100%-60px

Über absolute Positionierung über 2 Eckpunkte (also Angabe von left, top, right und bottom) könnte man so etwas in der Art erreichen. Leider kann das der IE nicht (man könnte das ganze über Javascript noch hinbiegen, ist dann aber wirklich nicht mehr schön...)

Gruß,

Harlequin

[Detlef G.]

Hallo Harlequin

Über absolute Positionierung über 2 Eckpunkte (also Angabe von left, top, right und bottom) könnte man so etwas in der Art erreichen.

Ja

Leider kann das der IE nicht (man könnte das ganze über Javascript noch hinbiegen, ist dann aber wirklich nicht mehr schön...)

Javascript ist dazu nicht unbedingt nötig. Das nichtstandardkonforme Boxmodell des IE im Qirksmodus kann dazu ausgenutzt werden. Beispiel (wurde allerdings nicht mit IE7 getestet bzw. für diesen angepasst)

Auf Wiederlesen
Detlef

[Harlequin]

Yerf!

Javascript ist dazu nicht unbedingt nötig. Das nichtstandardkonforme Boxmodell des IE im Qirksmodus kann dazu ausgenutzt werden. Beispiel (wurde allerdings nicht mit IE7 getestet bzw. für diesen angepasst)

Ah, da war noch was... hatte den "guten" Quirksmode schon fast verdrängt. Sollte im IE7 ebenfalls funktionieren, da laut Microsoft der Quirksmode "auf ewig" erhalten bleibt und dann genutzt werden sollte, wenn man "zukunftssicher" in jeder IE-Version das selbe Ergebnis will...

Gruß,

Harlequin

[Detlef G.]

Hallo Harlequin

… Sollte im IE7 ebenfalls funktionieren, da laut Microsoft der Quirksmode "auf ewig" erhalten bleibt und dann genutzt werden sollte, wenn man "zukunftssicher" in jeder IE-Version das selbe Ergebnis will...

Nur nicht so.
Der Quirsmode dürfte bei der Seite im IE7 nicht mehr ausgelöst werden. Für diesen ist meines Wissens mehr erforderlich als ein xml-Prolog.

Auf Wiederlesen
Detlef

[Harlequin]

Yerf!

Nur nicht so.
Der Quirsmode dürfte bei der Seite im IE7 nicht mehr ausgelöst werden. Für diesen ist meines Wissens mehr erforderlich als ein xml-Prolog.

Ok, das stimmt. Aber ein HTML-Kommentar in der ersten Zeile sollte helfen. Oder ein Transitional-Doctype ohne DTD (der dann allerdings alle Browser betrifft).

Gruß,

Harlequin

[tobeit]

Hallo Detlef,

Javascript ist dazu nicht unbedingt nötig. Das nichtstandardkonforme Boxmodell des IE im Qirksmodus kann dazu ausgenutzt werden. Beispiel (wurde allerdings nicht mit IE7 getestet bzw. für diesen angepasst)

Hab mich nun an Deinem Beispiel orientiert und es funktioniert soweit tadellos bei mir, bis auf das Kopf-div, das ragt gelegentlich beim Neuladen im IE über das Aussen-div hinaus. Woran könnte dies liegen??

Hier mein Code dazu:

  
<html>  
  
<head>  
  
<style type="text/css">  
div  
{  
 border-color:#FFFFFF;  
 border-style:solid;  
         border-collapse:collapse;  
}  
#aussen  
{  
 position:absolute;  
 top:5px;  
 right:5px;  
 bottom:5px;  
 left:5px;  
}  
#kopf  
{  
 height:100px;  
 border-left-width:6px;  
 border-top-width:6px;  
 border-right-width:6px;  
 overflow:hidden;  
}  
#inhalt  
{  
 position:absolute;  
 top:106px;  
 right:0;  
         bottom:0;  
 left:0;  
 border-left-width:6px;  
 border-bottom-width:6px;  
 border-right-width:6px;  
 padding-left:15%;  
 padding-right:15%;  
 overflow-y:scroll;  
}  
#aussen>#fuss  
{  
 bottom:0;  
 left:0;  
 right:0;  
}  
* html #aussen  
{  
 position:static;  
 height:100%;  
}  
* html #kopf  
{  
 position:absolute;  
 width:100%;  
 height:106px;  
}  
* html #inhalt  
{  
 position:static;  
 height:100%;  
 border-top:106px solid black;  
}  
</style>  
  
</head>  
  
<body>  
  
<div id="aussen">  
  
<!-- Kopf -->  
<div id="kopf">  
  
<!-- Bilderreihe -->  
<table>  
...  
</table>  
  
<!-- Navigation -->  
<table id="navi">  
...  
</table>  
  
</div>  
  
<!-- Inhalt -->  
<div id="inhalt">  
...  
</div>  
  
</div>  
  
</body>  
  
</html>  

Grüße und Danke

[Detlef G.]

Hallo tobeit

Hab mich nun an Deinem Beispiel orientiert und es funktioniert soweit tadellos bei mir, bis auf das Kopf-div, das ragt gelegentlich beim Neuladen im IE über das Aussen-div hinaus. Woran könnte dies liegen??

Das weiß ich jetzt auch nicht.
In welchem IE tritt das Problem auf?

Auf Wiederlesen
Detlef

[tobeit]

Nochmal ich zu später Stunde ...

Das weiß ich jetzt auch nicht.
In welchem IE tritt das Problem auf?

IE-Version: 6.0.2900.x na den Rest spar ich mir jetzt, auf alle Fälle SP2

Hab auch mal ein Screenshot von dem Effekt gemacht, der wie gesagt sehr sporadisch auftritt ...

Mitternächtliche Grüße

[Detlef G.]

Hallo tobeit

Hab mich nun an Deinem Beispiel orientiert und es funktioniert soweit tadellos bei mir, bis auf das Kopf-div, das ragt gelegentlich beim Neuladen im IE über das Aussen-div hinaus. Woran könnte dies liegen??

Hier mein Code dazu:

Kannst du das bitte online stellen.

Anhand der Schnipsel, kann ich das Problem nicht nachvollziehen und weiß auch nicht, was wirklich fehlt, und was du nur beim Posten weggelassen hast.

Auf Wiederlesen
Detlef

[tobeit]

Guten Morgen,

Kannst du das bitte online stellen.

Anhand der Schnipsel, kann ich das Problem nicht nachvollziehen und weiß auch nicht, was wirklich fehlt, und was du nur beim Posten weggelassen hast.

also im Prinzip hab ich die Seite schon im Einsatz und online. Es genügt ja für die Formatierung, wenn Du schon den interpretierten PHP-Code siehst, der sich lediglich noch um das Laden der Inhalte kümmert. Bsp ...

http://www.tobeit.net/seite.php?verz=01_News

Nich erschrecken, is ein kleiner Wust, wurschtel da auch noch etwas mit JS rum um den Schriftzug oben in der Mitte zu positionieren. Da wäre auch schon mein nächstes Problem, der Abstand von oben des Wörtchens "tobeit", immerhin liegt es schon wie gewünscht über den Bildern ...

Danke schon mal im Voraus für Deinen prüfenden Blick!

Grüße