Gleiche Anzeige auch bei 800x600Auflösung

[Claus]

Hallo,

habe einen Header- und Footer-Div-Container mit einer Breite von 100% definiert, den Content-Div-Container dazwischen mit einer Breite von 1000px.

Das hat aber bei kleinen Auflösungen wie z.B. 800x600 zur Folge, dass, sobald der horizontale Scrollbalken erscheint, Header und Footer abgeschnitten werden (was ja an sich logisch ist). Nehme ich aber beim Content-Contaier die feste Breite wegnehme, so brechen die sich darin befindlichen gefloateten Container um.

Hat jemand einen Lösungsansatz?

Danke und Gruss

Claus

[MudGuard]

Hi,

Das hat aber bei kleinen Auflösungen wie z.B. 800x600

Du meinst vermutlich Viewport-Größe, die Auflösung spielt so gut wie keine Rolle.

zur Folge, dass, sobald der horizontale Scrollbalken erscheint, Header und Footer abgeschnitten werden (was ja an sich logisch ist).

Das hängt davon ab, wie diese angeordnet werden.

Nehme ich aber beim Content-Contaier die feste Breite wegnehme, so brechen die sich darin befindlichen gefloateten Container um.

Das ist doch genau der Sinn von float.

Hat jemand einen Lösungsansatz?

Dafür, daß sich die gefloateten Elemente so verhalten, wie es sich für gefloatete Elemente gehört?
Ja: nichts tun. Das ist ja richtig so.

cu,
Andreas

[Claus]

Hi

Du meinst vermutlich Viewport-Größe, die Auflösung spielt so gut wie keine Rolle.

ja natürlich

zur Folge, dass, sobald der horizontale Scrollbalken erscheint, Header und Footer abgeschnitten werden (was ja an sich logisch ist).

Das hängt davon ab, wie diese angeordnet werden.

Nehme ich aber beim Content-Contaier die feste Breite wegnehme, so brechen die sich darin befindlichen gefloateten Container um.

Das ist doch genau der Sinn von float.

Das ist mir auch klar, su sollst mir ja nicht bestätigen, was ich schon geschrieben habe.

Hat jemand einen Lösungsansatz?

Dafür, daß sich die gefloateten Elemente so verhalten, wie es sich für gefloatete Elemente gehört?
Ja: nichts tun. Das ist ja richtig so.

Für mich kann das nicht richtig sein, es geht in meiner Frage ja auch nicht um das (richtige und mir durchaus einleuchtende) Verhalten der gefloateten Elemente, sondern um das der übergeordneten Header, Content und Footer.

Zum Teufel mit den Puristen, es sieht einfach bescheuert aus, wenn ich auf einem "Viewport" von 800x600 den horizontalen Scrollbalken bewege, um den rechten Teil des Contents zu sehen, dann aber Header und Footer abgeschnitten sehe. Kann mir nicht vorstellen, dass ich der einzige mit diesem Problem bin.

Gruss Claus

[Steel]

Hi!

Ich verstehe dein Problem nicht. Du gibst doch unterschiedliche Groessen (Breiten) fuer die Elemente an. Warum stoert es dich dann, wenn sie sich entsprechend verhalten? Oder andersrum: Wenn es Dich stoert, warum gibst du ihnen dann diese unterschiedlichen Vorgaben? Was moechtest Du ueberhaupt erreichen?

Im Augenblick klingt das fuer mich wie "Ich hab 2 Aepfel und ne Birne, jetzt schmecken Die aber unterschiedlich. Was soll ich machen?"

[meineke]

Hallo Steel,
hallo Struppi,

vielleicht habe ich mich missverständlich ausgedrückt:

Es geht nicht um das Floaten. Ich habe bewusst dem über geordneten Content-Container eine feste Breite zugeordnet (1000px) , damit die floatenden Kinder-Container (in der Summe inklusive border, margin und sonstigem Gedöns auch 1000px)entsprechend dem Textfluss nicht umbrechen. Das funktioniert auch richtig.

Dazu kommen jetzt Footer und Header mit einer Breite von 100%.
Das führt zu einer korrekten Anzeige bei den meisten Anwendern oder sagen wir bei den gängigsten Viewports.

Habe ich aber wie beschrieben einen Viewport von 1024 x 768 auf einem entsprechend kleinen 15-Zoll-Schirm (was ja auch noch vorkommen soll), ist von vorne herein ein horizontaler Scrollbalken, schiebe ich den nach rechts, so sind Header und Footer abgeschnitten (was wiederum von der Definition richtig und logisch ist)

Meine Frage ging ja auch um einen Lösungsansatz, Workaround oder ähnliches, nicht um ein Infragestellen.

Schaue ich mir die Seiten von Internetgrössen wie web.de an, dann sehe ich einen kompletten Header-Content-Footer-Bereich von einer Breite von 800px (ohne Werbung), da stellt sich so eine Frage nicht, da sehe ich auf 800x600 alles, auf einem 24-Zoll-Widescreen ist der halbe Schirm leer.

Das hat aber bei kleinen Auflösungen wie z.B. 800x600 zur Folge, dass, sobald der horizontale Scrollbalken erscheint, Header und Footer abgeschnitten werden (was ja an sich logisch ist). Nehme ich aber beim Content-Contaier die feste Breite wegnehme, so brechen die sich darin befindlichen gefloateten Container um.

Ich hoffe, ich habe miss jetzt einigermassen verständlich ausgedrückt.

Gruss

meineke

Hi!

Ich verstehe dein Problem nicht. Du gibst doch unterschiedliche Groessen (Breiten) fuer die Elemente an. Warum stoert es dich dann, wenn sie sich entsprechend verhalten? Oder andersrum: Wenn es Dich stoert, warum gibst du ihnen dann diese unterschiedlichen Vorgaben? Was moechtest Du ueberhaupt erreichen?

Im Augenblick klingt das fuer mich wie "Ich hab 2 Aepfel und ne Birne, jetzt schmecken Die aber unterschiedlich. Was soll ich machen?"

[Gunnar Bittersmann]

@@meineke:

nuqneH

Ich hoffe, ich habe miss jetzt einigermassen verständlich ausgedrückt.

Du hast dich doppelt ausgedrückt. Das wird hier nicht gern gesehen, auch innerhalb eines Threads nicht.

TOFU wird hier auch nicht gern gesehen.

Qapla'

[Steel]

Hi!

vielleicht habe ich mich missverständlich ausgedrückt:

Find ich nicht.

Es geht nicht um das Floaten. Ich habe bewusst dem über geordneten Content-Container eine feste Breite zugeordnet (1000px) , damit die floatenden Kinder-Container (in der Summe inklusive border, margin und sonstigem Gedöns auch 1000px)entsprechend dem Textfluss nicht umbrechen. Das funktioniert auch richtig.

Das hab ich verstanden und entsprechend geantwortet.

Dazu kommen jetzt Footer und Header mit einer Breite von 100%.

Ja. Genau das verstehe ich nicht. Du moechtest also, dass Dein Header eine andere Breite (100%) hat, als der Contentcontainer (1000px). Wunderst Dich aber darueber, wenn es so ist.

Das führt zu einer korrekten Anzeige bei den meisten Anwendern oder sagen wir bei den gängigsten Viewports.

Wenn Header und Footer in kompletter Seitenbreite dargestellt werden sollen (z.b. 1920), Content aber "nur" 1000 px breit, dann wird es auch bei einem kleineren Viewport korrekt angezeigt. Hier scheint es dich aber zu stoeren, dass Header und Footer nun weniger breit sind, als der Content.

Habe ich aber wie beschrieben einen Viewport von 1024 x 768 auf einem entsprechend kleinen 15-Zoll-Schirm (was ja auch noch vorkommen soll), ist von vorne herein ein horizontaler Scrollbalken, schiebe ich den nach rechts, so sind Header und Footer abgeschnitten (was wiederum von der Definition richtig und logisch ist)

Ja. Ich nehme an, Du sorgst irgendwie dafuer, dass dein Contentbereich breiter ist, als das Element in dem Header und Footer liegen.

Meine Frage ging ja auch um einen Lösungsansatz, Workaround oder ähnliches, nicht um ein Infragestellen.

Wo ist der Unterschied? Wenn ich dich frage, warum du etwas auf eine gewisse Art und Weise machst, faellt Dir ja vielleicht auf, dass Du es ja eigentlich so gar nicht haben wolltest, oder Du bekommst nen Geistesblitz. Auf alle Faelle weiss ich nicht, warum Du etwas auf eine bestimmte Art machst. Ich kenne dein Vorwissen und deine Faehigkeiten nicht. Ich weiss auch nicht, was genau du eigentlich moechtest. Code kenn ich auch keinen. Also frage ich, statt Glaskugelweisheiten in den Nebel zu schiessen.

Aber wenn Du es so willst:

Warum sind Header und Footer nicht einfach auch 1000px breit? (Ich nehme an, das ist viel zu naheliegend, als Dass es die Loesung sein koennte?)

Naechster Schuss:

Koennte min-width fuer Header und Footer oder den Container in dem sie sich befinden dein Problem loesen?

Aller guten Dinge sind 3:

Nimm das position: absolute aus dem CSS fuer den Contentbereich raus.

[Joachim]

Hi,

Hat jemand einen Lösungsansatz?

min-height, wird allerdings vom ie6 nicht interpretiert.

Gruesse, Joachim

[Claus]

Hi,

Hallo,

Hat jemand einen Lösungsansatz?
min-height, wird allerdings vom ie6 nicht interpretiert.

habe bei all meinen Containern height und min-height im Einsatz

z.B. so

#header        { margin:          0;
                 padding:         0;
                 background:      #003;
                 min-height:      120px;  /* kennt IE nicht */
                 border-bottom:   #f00 1px solid;
                 width:           100%;
               }
* html #header { height:          120px; /* Star-HTML-Hack */
               }

Aber was hat Höhe mit Breite zu tun?

[Gunnar Bittersmann]

@@Claus:

nuqneH

min-height:      120px;  /* kennt IE nicht */

Der Kommentar ist falsch. Uralte IEs (IE < 7) kennen 'min-height' nicht, heute relevante IEs (IE ≥ 7) kennen es.

* html #header { height:          120px; /* Star-HTML-Hack */

Der Kommentar ist unsinnig. Dass es sich um einen Star-HTML-Hack handelt, sieht man am Selektor. Wenn dies einer weiteren Kommentierung bedarf, dann sowas der Art: /* Minimalhöhe für IE < 7 */

Qapla'

[suit]

Der Kommentar ist unsinnig. Dass es sich um einen Star-HTML-Hack handelt, sieht man am Selektor.

Natürlich, aber nicht jeder kennt den Star-HTML-Hack vom bloßen hinsehen, besonders wenn er nicht mit Hacks vertraut ist. Mit dem Suchbegriff im Kommentar lässt sich weitere Rechereche betreiben.

Wenn dies einer weiteren Kommentierung bedarf, dann sowas der Art: /* Minimalhöhe für IE < 7 */

Dem stimme ich uneingeschränkt zu.

[Struppi]

Das hat aber bei kleinen Auflösungen wie z.B. 800x600 zur Folge, dass, sobald der horizontale Scrollbalken erscheint, Header und Footer abgeschnitten werden (was ja an sich logisch ist). Nehme ich aber beim Content-Contaier die feste Breite wegnehme, so brechen die sich darin befindlichen gefloateten Container um.

Ich verstehe deine Frage nicht. Was meinst du konkret mit "brechen um" - den textfluss? Der muss ja umbrechen, wenn der Text passen soll oder du verwendest nowrap. Aber was hat das mit gefloateten Elementen zu tun? Diese passen sich so an, wie Fläche vorhanden ist.

Struppi.

[meinke]

Hallo Struppi,

vielleicht habe ich mich missverständlich ausgedrückt:

Es geht nicht um das Floaten. Ich habe bewusst dem über geordneten Content-Container eine feste Breite zugeordnet (1000px) , damit die floatenden Kinder-Container (in der Summe inklusive border, margin und sonstigem Gedöns auch 1000px)entsprechend dem Textfluss nicht umbrechen. Das funktioniert auch richtig.

Dazu kommen jetzt Footer und Header mit einer Breite von 100%.
Das führt zu einer korrekten Anzeige bei den meisten Anwendern oder sagen wir bei den gängigsten Viewports.

Habe ich aber wie beschrieben einen Viewport von 1024 x 768 auf einem entsprechend kleinen 15-Zoll-Schirm (was ja auch noch vorkommen soll), ist von vorne herein ein horizontaler Scrollbalken, schiebe ich den nach rechts, so sind Header und Footer abgeschnitten (was wiederum von der Definition richtig und logisch ist)

Meine Frage ging ja auch um einen Lösungsansatz, Workaround oder ähnliches, nicht um ein Infragestellen.

Schaue ich mir die Seiten von Internetgrössen wie web.de an, dann sehe ich einen kompletten Header-Content-Footer-Bereich von einer Breite von 800px (ohne Werbung), da stellt sich so eine Frage nicht, da sehe ich auf 800x600 alles, auf einem 24-Zoll-Widescreen ist der halbe Schirm leer.

Das hat aber bei kleinen Auflösungen wie z.B. 800x600 zur Folge, dass, sobald der horizontale Scrollbalken erscheint, Header und Footer abgeschnitten werden (was ja an sich logisch ist). Nehme ich aber beim Content-Contaier die feste Breite wegnehme, so brechen die sich darin befindlichen gefloateten Container um.

Ich hoffe, ich habe miss jetzt einigermassen verständlich ausgedrückt.

Gruss

meineke

Ich verstehe deine Frage nicht. Was meinst du konkret mit "brechen um" - den textfluss? Der muss ja umbrechen, wenn der Text passen soll oder du verwendest nowrap. Aber was hat das mit gefloateten Elementen zu tun? Diese passen sich so an, wie Fläche vorhanden ist.

Struppi.