Verständnisproblem und Anzeigeproblem

[Enrico]

Hallo,

ich habe eine essentielle Verständnisfrage zu unterschiedlichen Verhaltensweisen bei unterschiedlichen css-Definitionen:

Ich möchte den iframe, in dem bislang alle anzuzeigenden Seiten eingebettet waren, gegen div-Bereiche austauschen.

Ich habe mir folgendes Test-Konstrukt zusammengestellt:

<div id="Container_Anzeigebereich">
      <div class="Scrollbereich">
         <div class="Scrollbarabstand">

</div>
      </div>
   </div>

Bei nachfolgenden css-Defitionen...

#Container_Anzeigebereich
   {
      bottom: 88px;
      left:   39px;
      right:  39px;
      top:    88px;
   }

#Scrollbereich
   {
      bottom:     108px;
      left:       39px;
      overflow-Y: auto;
      overflow-x: hidden;
      right:      59px;
      top:        108px;
   }

#Scrollbarabstand
   {
      margin-right:  -20px;
      padding-right: 20px;
   }

...erstrecken sich die Texte im div-Bereich "Scrollbarabstand" über die gesamte Breite. Bei überlangem Text wird nur eine vertikale Scrollleiste angezeigt.

Wenn ich nun aber folgende css-Angaben ergänze...

body
   {
      border:     0px;
      height:     100%;
      margin:     0px;
      max-height: 100%;
      max-width:  1200px;
      overflow:   hidden;
      padding:    0px;
      width:      100%;
   }

div
   {
      position: absolute;
   }

...dann erstrecken sich die Texte im div-Bereich "Scrollbarabstand" nur noch auf ca. 1/4 der Bildschirmbreite und ich habe bei überlangem Text keinerlei Scrollleisten mehr, kann aber - über das Scrollrad - trotzdem noch scrollen.

Woran liegt dieses Verhalten genau?

Am Fuchs kann es, denke ich nicht liegen, da ja keinerlei ultraspezifische Sonder-Angaben enthalten sind.

Wie müsste ich die Angaben anpassen, um folgendes Verhalten zu bekommen?

-Erstreckung auf 100% Breite und 100% Höhe
-Nur vertikale Scrollleiste bei Überlänge

Vielen Dank und Gruß
Enrico

[ChrisB]

Hi,

div
   {
      position: absolute;
   }

Absolute Positionierung hat einige Nachteile und Fallstricke - und insb. für Anfänger, die diese noch nicht einzuschätzen wissen, ist sie meist eher ungeeignet.

*Warum* willst du alle DIV-Container absolut positionieren?

Zumla hier problematisch ist, dass du zu den eigentlichen Positionen gar keine Angaben machst - da beeinflusst das Verhalten dieser Positionierungs-Methode auch noch mal unterschiedlich.

Wie müsste ich die Angaben anpassen, um folgendes Verhalten zu bekommen?

-Erstreckung auf 100% Breite und 100% Höhe

100% Breite ist bei Block-Elementen der Normalfall, so lange du sie nicht bspw. per absoluter Positionierung aus dem Fluss nimmst. (Natürlich noch abzüglich margins/paddings.)
Und 100% Höhe sind ein sehr häufig diskutiertest Thema, dazu solltest du also selber Informationen finden können.

MfG ChrisB

[Enrico]

Hallo ChrisB,

Danke für Deine Antwort.

Absolute Positionierung hat einige Nachteile und Fallstricke - und insb. für Anfänger

Ja, aber an und für sich gibt es hier doch keinerlei Probleme/Nachteile, zumindest sind mir bislang keine aufgefallen, ausgenommen mein Testkonstrukt, das ich in meinem Eingangsposting kopiert habe.

*Warum* willst du alle DIV-Container absolut positionieren?

Ich bin der Meinung, dass ich bei absoluten Positionierungen, hmm, wie formuliere ich es am Besten, keine "Spielräume" bei der Anzeige lasse.

Wann sollte man denn, Deiner Meinung nach, absolut und wann relativ positionieren?

Was sind die Vor-/Nachteile der beiden Varianten?

Zumla hier problematisch ist, dass du zu den eigentlichen Positionen gar keine Angaben machst

Gut, der die einzelne div-Angabe ist unsinnig.

Und 100% Höhe sind ein sehr häufig diskutiertest Thema

Hmm, das ist mir neu, ok, da ich mich auch nur zeitlich begrenzt immer wieder mit Homepages befasse, bin ich nicht so tief in der Materie drinnen.

100% Höhe sagt doch faktisch nur aus, "verwende die gesamte zur Verfügung stehende Höhe" ?!

Warum diskutiert man darüber?

Gruß
Enrico

[ChrisB]

Hi,

Ja, aber an und für sich gibt es hier doch keinerlei Probleme/Nachteile, zumindest sind mir bislang keine aufgefallen, ausgenommen mein Testkonstrukt, das ich in meinem Eingangsposting kopiert habe.

Aha. Und dass du, mangels Kenntnissen, nicht damit klarkommst, erscheint dir kein Nachteil zu sein?

Ich bin der Meinung, dass ich bei absoluten Positionierungen, hmm, wie formuliere ich es am Besten, keine "Spielräume" bei der Anzeige lasse.

Ja, mit absoluter Positionierung kann man ein Layout „so richtig schön festzimmern“ ... nur ist das im Web selten sinnvoll.

Wann sollte man denn, Deiner Meinung nach, absolut und wann relativ positionieren?

Ein normales Webseiten-Layout, das vor allem (Text-)Inhalte transportieren will, sollte man möglichst so gestalten, dass man die Elemente im normalen Fluss behält. So, dass es sich an die Gegebenheiten beim Nutzer - Fenstergröße, Schriftgröße, etc., die alle nicht deiner Kontrolle unterliegen - bestmöglich anpassen kann.

Und 100% Höhe sind ein sehr häufig diskutiertest Thema

Hmm, das ist mir neu, ok, da ich mich auch nur zeitlich begrenzt immer wieder mit Homepages befasse, bin ich nicht so tief in der Materie drinnen.

100% Höhe sagt doch faktisch nur aus, "verwende die gesamte zur Verfügung stehende Höhe" ?!

Warum diskutiert man darüber?

Weil „man“ damit Probleme hat - auch meist mangels Grundkenntnissen.
Weil „man“ weder so richtig verstanden hat, worauf sich prozentuale Höhenangaben beziehen, noch wie das Box Model funktioniert.

MfG ChrisB

[Enrico]

Hallo ChrisB,

Aha. Und dass du, mangels Kenntnissen, nicht damit klarkommst, erscheint dir kein Nachteil zu sein?

Mangelnde Kenntnisse sind natürlich immer problematisch, da hast Du recht.

Ja, mit absoluter Positionierung kann man ein Layout „so richtig schön festzimmern“ ... nur ist das im Web selten sinnvoll.

Gut, der Eindruck kann natürlich entstehen, wenn nur Testkonstrukte oder Ausschnitte aus dem Code gepostet werden, verständlich.

Ich habe eine Mischung aus floatenden Containern und *darin* absolut positionierte Elemente etc, es ist also nur das "Innenleben" innerhalb der div-Bereiche absolut festgelegt, der Rest flexibel.

Aber ich habe nun festgestellt, dass das Testkonstrukt hoffnungslos überladen ist und es genügt hätte, einfach eine negative
"margin-right"-Angabe zu machen, in Verbindung mit einer "padding-right"-Definition mit dem gleichen, jetzt aber positiv formuliertem Wert und schon hat man einen Abstand zur Scrollleiste, sofern angezeigt, ansonsten, also bei fehlender Scrollbar, passt das Layout insgesamt auch wieder.

Es geht mitunter also auch viel einfacher :-)

Gruß
Enrico

[ChrisB]

Hi,

Es geht mitunter also auch viel einfacher :-)

Oft geht vieles einfacher, als man manchmal anfänglich denkt.

Helfen übrigens meist auch, wenn der Fragende erst mal beschreibt, was er *erreichen* möchte, statt gleich mit Detailfragen zum bereits eingeschlagenen Holzweg zu beginnen ;-)

MfG ChrisB

[Enrico]

Hallo ChrisB,

statt gleich mit Detailfragen zum bereits eingeschlagenen Holzweg zu beginnen ;-)

Autsch, das hat gesessen ;-)

Wobei... Mein Testkonstrukt, ach, lassen wir das, Du hast Recht ;-)

Gruß
Enrico

[Beat]

Wann sollte man denn, Deiner Meinung nach, absolut und wann relativ positionieren?

Wenn man einen neuen Layer braucht (also z-index im Spiel ist) muss man von position:static abrücken.

mfg Beat