CSS/divs: Grafik mit "dynamischer" Breite in Kopfzeile

[althoffc]

Hallo zusammen,

ich hoffe, mir kann jemand helfen oder einen entscheidenden Tipp geben.

Ich habe für eine Website ein Layout mit divs erstellt, teilweise mit den Attributen position: absolute, teilweise float.

In der feststehenden Kopfzeile (scrollt nicht mit) habe ich zwei Grafiken:
Eine "Filler-Grafik" (Farbverlauf) und eine Bannergrafik.

Bei Firefox und Opera passiert bei verkleinern des Browser-Fensters wie gewünscht folgendes:
- die Filler-Grafik nimmt den verbleibenden Platz ein und wird bei Bedarf schmaler
- ist die Filler-Grafik vollständig "zusammengeschrumpft", dann wird die Banner-Grafik in dem verbleibenden Bereich abgeschnitten.

Beim Internet-Explorer 6.0 (andere Versionen habe ich bisher nicht getestet) jedoch passiert etwas Anderes:
- die Filler-Grafik erscheint erst gar nicht
- bei verkleinern des Fensters wird die Banner-Grafik nicht abgeschnitten, sondern ragt nach rechts über den Content-Bereich hinaus und bildet eine extrem hässliche "Nase".

Hat jemand vielleicht einen Verbesserungsvorschlag/Problemlösung hierzu?

Das ganze kann live bewundert werden unter Malteser Social Day: Malteser SocialDay
Ich habe einen Testbereich eingerichtet. Ihr könnt euch als Benutzer 'gast' mit Passwort 'gast' anmelden.
Dazu in der Fussleiste auf "Mitgliederbereich" klicken. (Ebenso zum Abmelden).

Danke und Gruß
Carsten

 

[ingoS]

Ich fürchte, die Probleme mit deinem Layout sind noch größer als du hier beschreibst, guck mal hier:
[Screenshot FF3]
Offensichtlich tritt das Problem mit der "Nase" nicht nur im IE6 auf. Außerdem bekomme ich bei egal welcher Viewport-Größe keine Scroll-Pfeile sondern nur den Scrollbalken. Möglicherweise ist das aber auch so gedacht (was ich etwas verwirrend fände...). Dafür gibt es einen horizontalen Scrollbalken und die "Nase" hat so eine Art "Schatten" in den weißen Hintergrund (der da bestimmt auch nicht hingehört) hinein.

Im Internet Explorer 7 sieht man auf der Startseite nur den Filler-Verlauf und das Banner-Bild überhaupt nicht. Ab und zu taucht das Bild aber auch auf; welchen Regeln das (wenn überhaupt) folgt, habe ich noch nicht rausfinden können. Außerdem hast du so einen komischen weißen Balken über Scrollbalken und Text und wieder einen horizontalen Scrollbalken, der in einen weißen Bereich ganz rechts führt. Nur die Fußzeile zieht sich über die ganze Breite, wodurch sie nicht unter dem Rest zentriert steht. Alles hier zu beobachten:
[Screenshot IE7]

Eine Lösung für das Problem mit den Grafiken wäre, beide oder eine von beiden einfach als Hintergrundbild statt direkt einzubinden. Dann werden/wird sie mit 100%iger Garantie abgeschnitten.

Ob das allerdings die ganzen anderen Probleme löst, die sich bei deinem Layout zur Zeit ergeben, weiß ich nicht so recht. Eher nicht, glaube ich.
Ich fürchte, du wirst den momentanen Code zu großen Teilen (nicht unbedingt vollständig, aber eben zu großen Teilen) einstampfen und wieder neu aufbauen müssen. :(
Wenn du das aber machst, dann solltest du nicht wieder mit einem div-Layout anfang sondern mit korrekter Trennung von Inhalt und Layout. Neben den Layout-Problemen ist auch der Code deiner Seite so nämlich kaum haltbar.

Ich weiß, das war jetzt eher frustrierend als helfend, aber ein Neuaufbau vieler Bestandteile ist wahrscheinlich einfacher und schneller als weiteres Gebastel. :-|

 

[Efchen]

Ich habe für eine Website ein Layout mit divs erstellt

Tatsache! Das hast Du wirklich. Damit hast Du bewiesen, dass Du noch nicht ansatzweise verstanden hast, worum es bei CSS-Layout geht. Das soll nicht böse gemeint sein, Du bist einer von vielen, die es gründlich missverstanden haben. Dein Code ist um keinen Deut besser als mit Tabellenlayout.
Man macht kein Layout mit div! Mit gar keinen HTML-Tag, sondern mit CSS!

Hat jemand vielleicht einen Verbesserungsvorschlag/Problemlösung hierzu?

Also ganz wichtig ist erstmal, dass Du HTML verstehst, dann das Konzept von CSS-Layouts verstehst, und dann hilft eigentlich nur eines: Abreißen - neu machen.

Wenn Du jetzt auf der Basis versuchst, Fehler zu beheben und erst anschließend den HTML-Code korrigierst, ändert sich ja auch der Bezug vom Stylesheet, d.h. Du darfst die ganze CSS-Arbeit u.U. komplett neu machen. Weil Du mit anständigem HTML ganz andere Tags verwenden wirst, und Positionierung in CSS mit position ist idR auch nicht nötig, sondern erschwert so einfache Layouts nur unnötigerweise.

Auch wenn das jetzt nicht das war, was Du hören wolltest, aber von vorne anfangen erspart Dir am Ende eine Menge Zeit. Obwohl es ja schonmal lobenswert ist, dass Du Dich um verschiedene Viewportgrößen kümmerst und anscheinend weißt, dass das nichts mit der Auflösung zu tun hat. Dafür wiederum achtest Du nicht auf Schriftgrößenänderung und ab einer gewissen Größe beginnt dann der Inhalt auf Nimmerwiedersehen zu verschwinden (von "Malteser Bodensee" das "Bodensee").

Ich weiß, das ist jetzt viel, aber hier kriegst Du auf jeden Fall die benötigte Hilfe.

 

[althoffc]

Hallo IngoS, hallo efchen,

danke für eure schnelle Antworten, auch wenn diese für mich erst mal niederschmetternd sind. Aber Erkenntnis ist bekanntlich der erste Schritt zur Besserung.
Und der Wille, es besser zu machen, ist bei mir vorhanden ...

Als Grundlage für meine Seite habe ich das auf der Seite Layout mit 100 % Höhe bei fixiertem Header und Footer beschriebene Beispiel für ein Seitenlayout herangezogen und angepasst/verändert.
In diesem Beispiel wird ein fest stehender Header und Fußzeile, sowie drei Spalten realisiert.
Dies kam eigentlich meinen Vorstellungen entgegen.

Grundsätzlich, so wie ich es verstanden habe, sollte aber wohl eher das Layout durch "Block"-Elemente beschrieben und nicht wie von mir umgesetzt, durch ineinander geschachtelte div-Bereiche umgesetzt werden.

Könnt ihr ein gutes Buch/Tutorial zum Einstieg in CSS, Seitenlayout empfehlen?

Danke und Gruß
Carsten

 

[Efchen]

Grundsätzlich, so wie ich es verstanden habe, sollte aber wohl eher das Layout durch "Block"-Elemente beschrieben und nicht wie von mir umgesetzt, durch ineinander geschachtelte div-Bereiche umgesetzt werden.

Layout wird primär mit CSS gemacht. CSS gibt den HTML-Elementen bestimmte Eigenschaften, wie sich das Element verhalten soll. Je nachdem, ob es sich um ein Block- oder Inline-Element handelt, hat es aber auch bestimmte Eigenschaften, die dem Layout dienlich sind. CSS-Layout baut also auf jeden Fall auf die vorhandenen HTML-Elemente auf.

HTML hingegen legt die logische Struktur des Dokuments fest, die Bedeutung des Inhalts. <div> hat so gesehen keine Bedeutung, dient eigentlich dazu, mehrere Elemente zu gruppieren. Eine Überschrift (<h1>) nochmal in ein <div> zu packen, macht also primär erstmal keinen Sinn, vor allem, weil beide Elemente Block-Elemente sind und sich somit gleich verhalten.

Den ganzen Inhalt nur mit <div>s auszuzeichnen vergibt keinerlei Semantik. Man muss festlegen, wo die Überschriften sind, wo Textabsätze und es gibt noch etliche andere Tags, die dem Inhalt jeweils eine ganz bestimmte Bedeutung geben. In der Hinsicht steht das <div>-Tag noch unterhalb des <table>, weil man mit letzterem immerhin tabellarische Daten auszeichnet. Bei der Festlegung der Semantik macht man jedoch nichts für das Layout. In erster Linie nimmt man das Tag, das den Inhalt richtig beschreibt, egal, wie das dann im Browser aussieht. Die Optik macht man erst, wenn die Struktur steht, und das dann mit CSS.

Könnt ihr ein gutes Buch/Tutorial zum Einstieg in CSS, Seitenlayout empfehlen?

Dir fehlt im Moment weniger die CSS-Kenntnis, als vielmehr die HTML-Kenntnis. Und CSS-Layout braucht als Basis einen validen, semantisch korrekten HTML-Code.