background-repeat + height

[seVes]

Nabend Ihr fleißigen Helfer!

Ich hänge momentan an einem "background-repeat" Problem.

Die div's "column_middle_left/right" füllen Ihr background-image nicht vertikal aus, trotz repeat und height Angabe.

Gebe ich den div's die feste Größe "height: 400px;" so klappt es, aber wieso nicht bei "height: 100%;" bzw. momentan "min-width: 100%;"?

Bei Google hab ich auch nichts genaues dazu gefunden, es wird zwar überall erklärt was repeat-y tut. Aber Zusammenhang hab ich auch nicht gefunden.

Vergess ich irgendeine Angabe?

Link ist angehangen. Browser: Chrome 8/Linux; IE7/VBox XP

[ChrisB]

Hi,

Die div's "column_middle_left/right" füllen Ihr background-image nicht vertikal aus, trotz repeat und height Angabe.

Das ist eine ziemlich unsinnige Formulierung.

Wenn, dann füllt der Hintergrund die Fläche eines Elements aus - nicht umgekehrt.

Gebe ich den div's die feste Größe "height: 400px;" so klappt es, aber wieso nicht bei "height: 100%;" bzw. momentan "min-width: 100%;"?

Weil sie dann schlicht und einfach nicht die Ausmaße haben, die du annimmst.

Höhenangaben in Prozent beziehen sich auf die explizite Höhe des Containing Block. Wenn dieser aber gar keine solche hat, sondern sie sich lediglich aus dem Inhalt ergibt - dann entsprechen Prozentangaben dem Wert auto.

Vergess ich irgendeine Angabe?

Du solltest gar nicht erst anfangen, Elemente im HTML unterzubringen, die keinerlei Inhalt haben, und rein optischen Zwecken dienen sollen.

Und vergessen hast du, uns überhaupt zu beschreiben, was du eigentlich erreichen willst. Wenn du uns das mal erklärst, statt nur „funzt so nich“ - dann können wir dir vielleicht auch Vorschläge machen, wie du es sinnvoll umsetzen kannst.

MfG ChrisB

[suit]

Und vergessen hast du, uns überhaupt zu beschreiben, was du eigentlich erreichen willst. Wenn du uns das mal erklärst, statt nur „funzt so nich“ - dann können wir dir vielleicht auch Vorschläge machen, wie du es sinnvoll umsetzen kannst.

Ich erschnüffle aber trotz der wenig detailreichen Beschreibung ein Faux Colums ;)

[seVes]

Morgen, es war schon spät. *g*

Du solltest gar nicht erst anfangen, Elemente im HTML unterzubringen, die keinerlei Inhalt haben, und rein optischen Zwecken dienen sollen.

Ich nehme an, Du beziehst Dich auf "<div id="line"></div>". Ich habe dies mit <hr> versucht, allerdings zeigt der IE das anders an, weswegen diese Variante, die einfachere war.

Und vergessen hast du, uns überhaupt zu beschreiben, was du eigentlich erreichen willst. Wenn du uns das mal erklärst, statt nur „funzt so nich“ - dann können wir dir vielleicht auch Vorschläge machen, wie du es sinnvoll umsetzen kannst.

Ich möchte, dass sich der grüne Balken nach unten fortsetzt, quasi ein "background: green repeat-y center". Dies tut es nicht.

[Beat]

Ich möchte, dass sich der grüne Balken nach unten fortsetzt,

Du möchtest also etwas, das allein mit border-color, und für ganz moderne Browser dann mit border-image zu erreichen ist.

mfg Beat

[seVes]

» Du möchtest also etwas, das allein mit border-color, und für ganz moderne

Ich wähle mich glaub etwas unbeholfen aus.

Später wird statt des grünen Hintergrundes ein Bild sein, welches sich nach unten repeat-y aufbauen soll. Das tut es weder mit dem Bild, noch wenn ich statt Bild einfach eine Farbe vergebe. Im CSS der Seite, sieht man den Teil mit dem Bild auskommentiert. Zu Testzwecken nutze ich einfache Farben, da die Bilder noch nicht zu 100% (optisch) passen.

Zum "Faux Columns": Ich hab das schon mal gelesen in einem anderen Zusammenhang. Offenbar hab ich das nicht ganz verstanden oder aber, ich mach irgendeinen Fehler der mir unklar ist.

height: auto; - Hab ich mal probiert, hilft mir nichts. Ich glaube ein Container einer Ebene höher verursacht mir Probleme. Ich sehs nur einfach nicht! :(

[ChrisB]

Hi,

Ich wähle mich glaub etwas unbeholfen aus.

Und ich glaube du meinst drücken statt wählen :-)

Später wird statt des grünen Hintergrundes ein Bild sein, welches sich nach unten repeat-y aufbauen soll. Das tut es weder mit dem Bild, noch wenn ich statt Bild einfach eine Farbe vergebe.

Natürlich - so lange die Elemente keine Höhe haben, gibt es auch keinen Hintergrund anzuzeigen, egal ob der ein Bild oder eine Farbe sein soll.

Zum "Faux Columns": Ich hab das schon mal gelesen in einem anderen Zusammenhang. Offenbar hab ich das nicht ganz verstanden oder aber, ich mach irgendeinen Fehler der mir unklar ist.

Hast du prizinpiell verstanden, wozu diese Technik (bzw. die unter diesem Begriff zusammengefassten Techniken) dienen, und warum sie überhaupt teilweise erforderlich sind?

height: auto; - Hab ich mal probiert, hilft mir nichts.

Natürlich nicht *seufz*
Kein Inhalt = automatische Höhe gleich Null.

Ich glaube ein Container einer Ebene höher verursacht mir Probleme.

Deine Unkenntnis im Umgang mit CSS ist es, die dir vor allem Probleme bereitet.

Um gezielt weiterhelfen zu können, ist deine Beschreibung dessen, was erreicht werden soll, immer noch zu unspezifisch. Wenn es nur ein Bild auf beiden Seiten sein soll, könnte man das bspw. im padding-Bereich des main-Containers einfach durchscheinen lassen.

MfG ChrisB

[seVes]

Nabend,

sorry, wenn ich mich erst jetzt melde. :/

Ich hab die Seite jetzt mal überarbeitet und auch was neues reingebracht: "position: fixed;". Bin ehrlich gesagt stolz auf mich, auch die IE-Bugs sind bisher weg. :)

Desweiteren habe ich mal das "grün" ersetzt mit den Original-Bildern. Diese sind optisch zwar noch nicht ausgereift, da die Übergang nicht stimmen, dennoch macht es die Sache vielleicht doch verständlicher.

Ich möchte, dass sich im Container "main" die Säule links/rechts (Container "column_middle_left/right") vertikal anpassen. Dies passiert nicht, da sie keine Höhe besitzen. Setze ich die Höhe auf einen Fixwert "height: 500px;" klappt es, jedoch nicht bei Wert "100% / auto". Warum?

Zur Thematik Faux-Columns sag ich mal: float, clear. Soweit hab ich das verstanden, aber der Zusammenhang zu "height" fehlt mir total. Ich habe 0 Ansatz woran der Browser scheitert. :/

Ich bin CSS-Neuling richtig. Meine Divise ist: Learning by Doing. Ich lese nach und wende an. Wenn es nicht klappt, probiere ich rum, bis es klappt und falls, dann versuch ich's zu verstehen. Allerdings gibt es einen Punkt, wo ich es nicht mehr verstehe. Dann führt mein Weg zu Euch.

Nun steh ich hier mit offenen hilfesuchenden Armen. :/ Was muss ich suchen oder wo ist der Wurm?

Mal am Rande noch was anderes: Im Chrome8 zeigt er mir unter dem Header den Container "main" an, gelöst durch "margin: 155px ...", da sonst der Container ganz oben beginnt. Im IE7 beginnt er dennoch oben. Warum? Gibt es da eine andere Lösung oder wieso zerbricht der IE7 das Bild?

Danke Helferlein! =)

[ChrisB]

Hi,

Ich möchte, dass sich im Container "main" die Säule links/rechts (Container "column_middle_left/right") vertikal anpassen. Dies passiert nicht, da sie keine Höhe besitzen. Setze ich die Höhe auf einen Fixwert "height: 500px;" klappt es, jedoch nicht bei Wert "100% / auto". Warum?

Weil die 100% sich auf die Höhe des Vorfahrenelements #menu beziehen, und das ist nun mal nur 50px hoch.

Und bzgl. auto, das sagte ich dir bereits - auto heißt, so hoch wie es der Inhalt erfordert, und diese Elemente haben aber keinen Inhalt!

Nun steh ich hier mit offenen hilfesuchenden Armen. :/ Was muss ich suchen oder wo ist der Wurm?

Der Wurm ist immer noch in deinem Ansatz, bedeutungslose, weil inhaltsleere Elemente ins HTML zu kleistern.

Wenn du sowieso mit einer festen Breite für den Inhaltsbereich arbeitest - wieso gibst du dem dann nicht einfach ein Hintergrundbild, dass dem sich wiederholenden Teil der Säulen darstellt? (Bzw. ggf. auch die Säulenköpfe und -körper in einem höheren Bild, die Säulenfüße könnten dann im Footer #conclusion untergebracht werden.

Mal am Rande noch was anderes: Im Chrome8 zeigt er mir unter dem Header den Container "main" an, gelöst durch "margin: 155px ...", da sonst der Container ganz oben beginnt. Im IE7 beginnt er dennoch oben. Warum?

Das kann ich zumindest mit dem IETester nicht nachvollziehen.
Wenn es ggf. daran liegt, dass die fixe Positonierung in älteren IE-Versionen nicht unterstützt wird - dann verwende für diese absolute stattdessen, bspw. per CSS-Hack.

MfG ChrisB

[seVes]

Wenn du sowieso mit einer festen Breite für den Inhaltsbereich arbeitest - wieso gibst du dem dann nicht einfach ein Hintergrundbild, dass dem sich wiederholenden Teil der Säulen darstellt? (Bzw. ggf. auch die Säulenköpfe und -körper in einem höheren Bild, die Säulenfüße könnten dann im Footer #conclusion untergebracht werden.

Ja das hab ich mich dann auch gefragt. Hab das alles umgeschrieben. Nun klappt es auch mit weniger div's zum gleichen Ergebnis. Super. :)

Danke Dir.

[ChrisB]

Hi,

Du solltest gar nicht erst anfangen, Elemente im HTML unterzubringen, die keinerlei Inhalt haben, und rein optischen Zwecken dienen sollen.

Ich nehme an, Du beziehst Dich auf "<div id="line"></div>".

Nein, in erster Linie auf die Elemente, die du explizit erwähnt hattest.

Ich möchte, dass sich der grüne Balken nach unten fortsetzt, quasi ein "background: green repeat-y center". Dies tut es nicht.

Diese grünen Balken sollten sich über border realisieren lassen, ganz ohne zusätzliche Elemente.

MfG ChrisB