Div mit variabler höhe und overflow

Computer: Software & Programmierung HTML & CSS
#1

Hallo!

Folgendes Problem: da ich keinesfalls mehr mit Frames arbeiten möchte, versuche ich momentan, eine Webseite zuprogrammieren, die nur mit divs auskommt. Ich habe oben den üblichen Logobalken mit einem Bildchen, darunter die Navigation, beide sind 100% breit. Jetzt kommt das Problem, den Bereich darunter habe ich in 2 Teile (links und rechts) aufgeteilt. Der linke soll der Content Bereich sein, und der müsste ggf. auch scrollbar sein. Ich habe sowas schonmal implementiert und overflow:auto funktioniert ja auch - wenn man dem Bereich eine fixe Höhe und Breite gibt. Aber in diesem Fall hat der Content Bereich keine fixe Höhe, er ist ja je nach Auflösung unterschiedlich hoch. Mit height:100% habe ichs bereits versucht, das geht nicht.

Ihr könnt euch hier anschauen wie das in etwa aussieht: http://www.amaterasu.at/zeugs/index.php ! Das rote oben wird ein Bild plus Navigation, links mit dem Bild und dem Blindtext das soll eben scrollbar sein und rechts sind die news die sollen bleiben wo sie sind.

Hat jemand einen Tip für mich?

Grüße,
Chi

#2

unterschiedlich hoch. Mit height:100% habe ichs bereits
versucht, das geht nicht.

Klar, denn relative Höhenangaben sind nur bei folgenden Doctype erlaubt:

**(in die erste Zeile der HTML Datei schreiben)

Achtung bei Overflow. Unter Windows zeigt einzig Opera als einziger dies Perfekt an. Der neueste Konqerer und Safari (Linux/BSD/Solaris mit KDE&Mac)
sollten keine Probleme haben.
Der Firefox braucht ne Höhen und breitenangabe bei Overflow. Aber das machst du ja sowiso. Also dürfte das auch kein Problem sein.

Der IE hat folgenden fehler: Beim erscheinen der Scrollbalken wird die Breite der Scrollbalken nicht vom Inhalt abgezogen. Ist zwar keine Funktionale einschrenkung. Sieht optisch aber nicht so schön aus. Umgehen kannst du dies, indem du permanent Scrollbalken zeigst.

Schau dir mal http://pics.cyber-fun.org/ an.
da hab ich mal probiert ein Bildergallariescript zu schreiben. (Ist noch nicht ganz fertig)
Schau dir mal den Bilderscroller an.(Am beste in der Galerie TEST)
Oder noch besser hier:
http://cyber-fun.org/galerie/picshow.php?name=test&t…
&test-over=1 heißt daszwischen den Bilder großer Abstandherrscht, um over flow zu teseten.
Serverseitig wird je nach browser anderer QuellText ausgegeben.
Mit Js hab ichs hinbekommen, das auch beim IE das Ganze halbwegs hübsch aussieht(Allerdings nichtmerh, wenn man die Fenstergröße ändert- Frag mich nit warum).

Gruß Thomas**

#3

Das löst mein Problem leider nicht. Ich hab die Zeile oben eingefügt, nur leider ändert das nichts. Ich hab dann einfach #tab{height:100%;overflow:auto} zugewiesen, leider ändert das überhaupt nichts. oder habe ich dich da falsch verstanden?

Deine Seite habe ich mir angeschaut, aber das is ja wieder was anderes. Das Ding hat eine fixe Größe und lässt sich damit eigentlich auch irgendwie so basteln wie mans haben will. Ich hab ja den height Wert leider nicht bzw. will IE ihn nicht erkennen…

oder hab ich da was nich verstanden?

Chi

Klar, denn relative Höhenangaben sind nur bei folgenden
Doctype erlaubt:

**(in die erste Zeile der HTML Datei schreiben)

Achtung bei Overflow. Unter Windows zeigt einzig Opera als
einziger dies Perfekt an. Der neueste Konqerer und Safari
(Linux/BSD/Solaris mit KDE&Mac)
sollten keine Probleme haben.
Der Firefox braucht ne Höhen und breitenangabe bei Overflow.
Aber das machst du ja sowiso. Also dürfte das auch kein
Problem sein.

Der IE hat folgenden fehler: Beim erscheinen der Scrollbalken
wird die Breite der Scrollbalken nicht vom Inhalt abgezogen.
Ist zwar keine Funktionale einschrenkung. Sieht optisch aber
nicht so schön aus. Umgehen kannst du dies, indem du permanent
Scrollbalken zeigst.

Schau dir mal http://pics.cyber-fun.org/ an.
da hab ich mal probiert ein Bildergallariescript zu schreiben.
(Ist noch nicht ganz fertig)
Schau dir mal den Bilderscroller an.(Am beste in der Galerie
TEST)
Oder noch besser hier:
http://cyber-fun.org/galerie/picshow.php?name=test&t…
&test-over=1 heißt daszwischen den Bilder großer
Abstandherrscht, um over flow zu teseten.
Serverseitig wird je nach browser anderer QuellText
ausgegeben.
Mit Js hab ichs hinbekommen, das auch beim IE das Ganze
halbwegs hübsch aussieht(Allerdings nichtmerh, wenn man die
Fenstergröße ändert- Frag mich nit warum).

Gruß Thomas**

#4

Das löst mein Problem leider nicht. Ich hab die Zeile oben
eingefügt, nur leider ändert das nichts. Ich hab dann einfach
#tab{height:100%;overflow:auto} zugewiesen, leider ändert das
überhaupt nichts. oder habe ich dich da falsch verstanden?

Deine Seite habe ich mir angeschaut, aber das is ja wieder was
anderes. Das Ding hat eine fixe Größe und lässt sich damit
eigentlich auch irgendwie so basteln wie mans haben will. Ich
hab ja den height Wert leider nicht bzw. will IE ihn nicht
erkennen…

oder hab ich da was nich verstanden?

Chi

Ich denke du solltest dich mit pixel positionierung anfreunden.
Da du kein Frame nimmst, der sich ja auch Broswergrösse bezieht.
Musst du wohl alles was mit höhen angaben zu tun hat. Selber errechnen oder mit Javascript nachpositionieren.
Das Problem gab schon immer, ne tabelle hilft da auch nicht :frowning:

#5

Nimm dieses HTML-Gerüst hier
Meine seite (cyber-fun.org) habe ich nur in bezug auf Intenet Explorer gemeint.

Ich denke du solltest dich mit pixel positionierung
anfreunden.

Hallte ich nichts von, da nicht jeder einen 1024x864 Pixel Monitor benutzt, und selbst wenn ist das noch keine garantie dafür, das er den Browser voll aufgeklappt hat.
Es gibt zwar funktionen- die die aktuelle Browsergröße angeben. Diese Funktionieren aber beim IE nicht richtig. Un den haben immerhin 70% aller User.

Also:
Ganz klassich tabellen.
Ich poste mal ein Gerüst

 Musterseite

HEAD
MENU
Punkt 1
Punkt 2
Punkt 3

INHALT TEXT TEXT

WERBUNG

FOOT

Diese Gerüst ist W3 Kompatibel, d.h. es hält sich an alle HTML Standarts und sollte somit mit allen Browser funktionieren.
Die 1% Großen Zellen werden bei dementsprechenden Inhalt überdehnt.
Deswegen hab ich in den Zellen nocheinmal die fixen Tabellen mit einer festen Höhe/Breite.
Da diese nur 1% Groß sind, übntersriten sie immer die größe des festen Inhalts.

Das Ergebniss sieht dann so aus:

Alle Zellen am Rand haben eine Feste größe.
Die in der Mitte passt sich dem Browserfenster entsprechend an.

Ich glaub sowas brauchst du, Das ganze muss halt noch an deine seite angepasst werden.