Probleme mit DIV-Elementen

[Kamil Garbacz]

Guten Tag!

1. Ich hab bereits im Forum nach einer Lösung gesucht, aber keine gefunden, darum => Post.

2. Meine Frage bezieht sich auf folgende Seite:

http://www.helpmode.de/mypage/page.html

3. Das Problem:

Bei einem maximierten Fenster sieht das ganze so aus, wie ich es mir vorgestellt habe. Dazu sei gesagt, dass ich zum ersten Mal mit DIV Elementen und des Positionierung arbeite. Wenn ich das Fenster, sowohl im IE, Opera, Mozilla und Netscape verkleiner bzw. zusammenziehe, dann taucht rechts die Scrollbar auf. Das problem aber ist, dass wenn ich nun herunterscrolle, nehmen alle Elemente (height: 100%;) zwar die volle Höhe des grad angezeigten Fensterausschnitts an, aber gehen auch "sozusagen nicht darüber hinaus" wenn ich herunterscrolle. Erst recht verschiebt sich das ganze, wenn ich Elemente wie Bilder oder Ähnliches hinzufüge!

Hier der css-Code:

BODY.index {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
min-height: 100%;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-attachment: fixed; /* Wasserzeichen-Effekt */
}

DIV.part_01 {
position:absolute;
left: 200;
height: 100%;
width: 16;
z-index: 3;
        background-image: url(images/start_part01.jpg);
background-repeat: y-repeat;
}

DIV.logo {
position:absolute;
top: 0px;
left: 200;
height: 406;
width: 63;
z-index: 2;
}

DIV.part_02 {
position:absolute;
left: 258;
height: 100%;
width: 16;
z-index: 3;
        background-image: url(images/start_part01.jpg);
background-repeat: y-repeat;
}

DIV.style_background_01 {
position: absolute;
left: 274;
height: 100%;
width: 223;
z-index: 1;
        background-color: #565C64;
}

DIV.style_background_02 {
position: absolute;
left: 497;
height: 100%;
width: 115;
z-index: 1;
        background-image: url(images/background_element_02.jpg);
background-repeat: y-repeat;
}

DIV.text_01 {
position: absolute;
left: 10px;
top: 10px;
}

DIV.text_02 {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
}

Hier noch einige Screenshots, falls jemand nicht weis, was ich meine:

normal: http://www.helpmode.de/mypage/screen1.jpg
fehlerhaft: http://www.helpmode.de/mypage/screen2.jpg

Dankeschön!

[MudGuard]

Hi,

Das problem aber ist, dass wenn ich nun herunterscrolle, nehmen alle Elemente (height: 100%;) zwar die volle Höhe des grad angezeigten Fensterausschnitts an,

Du sagst also, daß das Element so hoch wie der Viewport sein soll, und wunderst Dich dann, wenn das Element so hoch wie der Viewport ist?
Seltsam ...

left: 200;

200 Elefantenrüssellängen?

width: 16;

16 Ameisenbeindurchmesser?

left: 10px;

Aha - Du weißt also, daß Einheiten existieren.

cu,
Andreas

[Kamil Garbacz]

Hi,

Das problem aber ist, dass wenn ich nun herunterscrolle, nehmen alle Elemente (height: 100%;) zwar die volle Höhe des grad angezeigten Fensterausschnitts an,

Du sagst also, daß das Element so hoch wie der Viewport sein soll, und wunderst Dich dann, wenn das Element so hoch wie der Viewport ist?
Seltsam ...

Nein, hab mich falsch ausgedrückt. Ich meine damit, dass sobald ich scrollen kann/muss, was eigenlich gar nicht nötig ist, weil nichts auf der Page liegt, was über die vorhandene Höhe hinausgeht, bleiben alle Elemente fixiert und ich scrolle ins nichts runter! Sieht man ja auch auf den beiden Screenshots.

left: 200;

200 Elefantenrüssellängen?

width: 16;

16 Ameisenbeindurchmesser?

left: 10px;

Aha - Du weißt also, daß Einheiten existieren.

Ein einfaches "Du hast die Einheiten vergessen." hätte gereicht.

cu,
Andreas

[Nico]

Hallo!

Nein, hab mich falsch ausgedrückt. Ich meine damit, dass sobald ich scrollen kann/muss, was eigenlich gar nicht nötig ist, weil nichts auf der Page liegt, was über die vorhandene Höhe hinausgeht, bleiben alle Elemente fixiert und ich scrolle ins nichts runter! Sieht man ja auch auf den beiden Screenshots.

Du willst also, dass die divs mitscrollen? Dann brauchst du wahrscheinlich position:fixed

Nico

[Kamil Garbacz]

Hallo!

Nein, hab mich falsch ausgedrückt. Ich meine damit, dass sobald ich scrollen kann/muss, was eigenlich gar nicht nötig ist, weil nichts auf der Page liegt, was über die vorhandene Höhe hinausgeht, bleiben alle Elemente fixiert und ich scrolle ins nichts runter! Sieht man ja auch auf den beiden Screenshots.
Du willst also, dass die divs mitscrollen? Dann brauchst du wahrscheinlich position:fixed

Nico

Auch nicht. (bzw. ich hab es ausprobiert mit min-height und position fixed etc.) Aber ich meine:
Nehmen wir, ein User hat eine Auflösung von 800x600, ich packe nun aber ein Bild mit einer Höhe von 1000px auf meine Page. Folglich muss herunter gescrollt werden. Auf den ersten Blick sieht der User nun die oberen 600px des Bildes und muss nun herunterscrollen. Sobald er nun aber herunterscrollt, siehst er zwar den rest des Bildes, aber die Page hört sozusagen unterhalt dieser 600px auf! Das Bild springt also sozusagen raus. In dem Sinne soll sie aber nicht mitscrollen, sondern so agieren wie eine table mit height="1000" beim scrollen.

Komischerweise tritt dieses problem auch auf wenn ich gar kein Bild drin hab, dann aber sobald ich das fenster minimiere/verkleiner. Man kann auf einmal scrollen und unten kommt nix. Man scrollt also aus der Page raus sozusagen.

Ich hoffe Sie verstehen was ich meine.

[Nico]

Also du willst, dass das Bild auf die richtige Größe skaliert wird, oder? Da kannst du einfach in dem img-Tag die Breiten und Höhen angeben.

Ich hoffe Sie verstehen was ich meine.

Ich glaube nicht. Ausserdem bin ich ein "du".

Nico

[Kamil Garbacz]

Also du willst, dass das Bild auf die richtige Größe skaliert wird, oder? Da kannst du einfach in dem img-Tag die Breiten und Höhen angeben.

Nein :) Das mit dem Bild war ja nur ein Beispiel. Man soll schon scrollen können, aber sobald die Scrollbalken (IE -> rechts) auftauchen und ich nach unten scrolle, sind alle mit height:100% definierten DIV-Elemente zu Ende bzw. bleiben stehn. Man erkennt es ja ganz gut auf dem Screenshot.

http://www.helpmode.de/mypage/screen1.jpg

bei dieser Fenstergröße ist noch alles Okay. Alle Elemente sind auf height: 100% gestellt und der Scrollbalken deaktiviert.

http://www.helpmode.de/mypage/screen2.jpg

So, jetzt habe ich die fenstergröße verkleinert und auf einmal kann man scrollen, was mich wundert, denn es gibt kein Element was nicht in diese verkleinerte Fenstergröße passen würde. Und wenn ich nun herunterscrolle, hören alle Elemente auf und man sieht nur noch das Hintergrundbild!

Woran liegt das?

Diese grauen Balken beispielweise sollen immer bis zum ende der Page laufen, auch wenn gescrollt wird.

[Nico]

Achso!...
Wenn du die Elemente mit height=100% ausstattest, sind sie auch so groß wie das Browserfenster. Spontan würde mir da jetzt nur Javascript einfallen... Ich schau nochmal nach.

Nico

[Kamil Garbacz]

Achso!...
Wenn du die Elemente mit height=100% ausstattest, sind sie auch so groß wie das Browserfenster. Spontan würde mir da jetzt nur Javascript einfallen... Ich schau nochmal nach.

Nico

Da hat jemand das gleiche Problem wie ich, hat es ein wenig besser beschrieben :)

Link: http://forum.de.selfhtml.org/?t=109503&m=684296

[Nico]

Hallo!

Erstens ist es doch eigentlich klar, dass, wenn du angibst height=100%, die Höhen eben nur so hoch wie das Browserfenster ist. Vielleicht hilft dir min-height:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height

Nico

[Detlef G.]

Hallo Kamil

Bei einem maximierten Fenster sieht das ganze so aus, wie ich es mir vorgestellt habe. Dazu sei gesagt, dass ich zum ersten Mal mit DIV Elementen und des Positionierung arbeite.

Absolute Positionierungen sind sehr häufig absolut unnötig und bereiten
mehr Probleme als Nutzen.

Wenn ich das Fenster, sowohl im IE, Opera, Mozilla und Netscape verkleiner bzw. zusammenziehe, dann taucht rechts die Scrollbar auf.

Natürlich, genau dann, wenn die im Browserfenster verfügbare Höhe unter
406px ist.

Das problem aber ist, dass wenn ich nun herunterscrolle, nehmen alle Elemente (height: 100%;) zwar die volle Höhe des grad angezeigten Fensterausschnitts an, aber gehen auch "sozusagen nicht darüber hinaus" wenn ich herunterscrolle.

Natürlich, height:100% bedeutet ja auch 100% der angegebenen Höhe des
Elternelementes, also des body.

Erst recht verschiebt sich das ganze, wenn ich Elemente wie Bilder oder Ähnliches hinzufüge!

Natürlich, diese sorgen ja auch für Scrollbalken, ohne die angegebene
Höhe für body (und damit auch der anderen Elemente) zu ändern.

min-height: 100%;

Hier das angegebene Maß, darauf beziehen sich die enthaltenen Elemente,
also 100% der Bildschirmhöhe.

height: 406;

Aha, hier haben wir also die 406px.

Überdenke deine Layoutumsetzung, verwende position:absolute nur in
Ausnahmefällen.
Die Elemente werden durch position:absolute aus dem Elementefluss genommen,
sie haben dadurch keinen Einfluss mehr auf die Größe ihrer Eleternelemente.

Auf Wiederlesen
Detlef

[Kamil Garbacz]

Danke, aber was wäre die Alternative? Im Gründe bleibt mir dann doch nichts anderes übrig als das gesamte Konzept mit Tabellen zu realisieren, aber es heißt immer man solle Tabellen dazu nicht mißbrauchen?!

Danke.

[Ashura]

Hallo Kamil.

Danke, aber was wäre die Alternative?

Auf absolute Positionierung zu verzichten. Ordne die Elemente zuallererst einmal im HTML-Code sinnvoll an, bevor zu dich an das Layout mit CSS wagst.
Und vermeide bitte unsauberes HTML, wie <font class="index">.
Wenn du CSS verwendest, warum dann nicht überall?

Im Gründe bleibt mir dann doch nichts anderes übrig als das gesamte Konzept mit Tabellen zu realisieren,

Nein, du kannst dich auch ein wenig mit CSS-basierten Layouts befassen.

aber es heißt immer man solle Tabellen dazu nicht mißbrauchen?!

Richtig. Versuche dich vom Tabellen- und Spaltendenken zu lösen, mit CSS ist weitaus mehr möglich, wie du sehr schön auf http://www.csszengarden.com/ sehen kannst.

Gruß, Ashura

[Kamil Garbacz]

Und vermeide bitte unsauberes HTML, wie <font class="index">.

Was ist daran unsauber?

[Ashura]

Hallo Kamil.

Und vermeide bitte unsauberes HTML, wie <font class="index">.

Was ist daran unsauber?

Das Element. Zudem ist es überflüssig, da du mittels CSS jedes Element formatieren kannst. Bei dir ist jedoch das font-Element in einem div-Element geschachtelt. Warum formatierst du nich das div-Element?

Gruß, Ashura

[Kamil Garbacz]

Das Element. Zudem ist es überflüssig, da du mittels CSS jedes Element formatieren kannst. Bei dir ist jedoch das font-Element in einem div-Element geschachtelt. Warum formatierst du nich das div-Element?

Stimmt. :) Danke. Habe garnicht daran gedacht. Ich merk schon, dass ich mir das ganze Prinzip mit Div-Containern genau anschauen muss, bin auch schon fleißig dabei. Solange muss ich halt auf Tabellen zur Struktur ausweichen, denn anders kann ich das momentan noch nicht. :)

Gruß Jan

[Detlef G.]

Hallo Kamil

... Prinzip mit Div-Containern genau anschauen muss, ...

^^^^^^^^^^^^^^

Bitte nicht ;)
Der Sinn eines CSS-Layouts besteht nicht darin, Div-Container (statt Tabellen)
zu verwenden!

Lies dazu mal im Archiv z.B.:
DIV und TABLE - Pro und Kontra?
DIVs und Internet Explorer...
Dieses CSS gefährdet Ihre Gesundheit

Auf Wiederlesen
Detlef