Repeat-x funktioniert nicht

[greengor]

Hallo,

ich hätte da ein kleines Problem, welches wahrscheinlich sowieso sehr einfach zu lösen ist:

Ich habe ein Design, bei dem man zwei vertikale Hintergrundbilder verwenden muss (bzw. kann, bzw. sollte), also habe ich dem Body eines der Bilder gegeben und ein Seitenlayout mit einer rechten Spalte erstellt in welches ich das zweite Bild packen möchte. Die Idee dahinter ist, dass sich die Hintergrundbilder bis zu den Browser-Rändern „repeaten” sollen. Das Problem ist nur, dass das rechte Bild bei einer Auflösung von 1024 nur einen Pixel breit sein soll, sich aber bei Vergrößerung des Browserfensters repeaten soll. Funktionieren tut es wahrscheinlich nur nicht, weil Contao der rechten Spalte automatisch 4 Pixel breite gibt(?). (min-width + max-width habe ich auch schon probiert.) Ich hoffe, dass ich es halbwegs verständlich beschrieben habe und mir jemand bei meinem Problem helfen kann. Danke im Voraus.

Lg, greengor

PS.: Ich hätte auch noch eine Frage zur Erweiterung „hyperlinkhover”, weiß aber nicht an wen ich mich wenden soll, bzw. in welche Kategorie das gehört.

[stiefel]

Hi greengor,

hab nicht ganz genau verstanden, was du erreichen willst...

Du hast ein Layout, das 1024px breit ist, inklusive ein Pixel breiter rechter Spalte und die soll sich bei breiteren Bildschirmen ausdehnen?
Hast Du viell. den Link parat, damit man sich den Stand ansehen kann?

Bin zwar selbst kein CSS-Papst, aber mal sehen...

Schöne Grüße

[greengor]

So... ich hoffe, dass man es so ein bisschen besser versteht.

[stiefel]

bin zu doof -
verstehe leider immer noch nicht, wohin es gehen soll.

Sollen die grünen Linien Bereiche darstellen?
Auf den ersten Blick ist das doch ein Dreispalter?
Ist denn der Hauptbereich immer 1024px breit?

Sorry, dass ich viell. zu sehr auf dme Schlauch steh...

[greengor]

Ja, die grünen Linien sollen drei Bereiche darstellen. Der mittlere ist desswegen irrelevant, da sich das body-Hintergrundbild hinter dem mittleren weiter-repeatet. (Es sind also nur zwei bereiche: links + mitte und der Zweite ist rechts. ... aber du/Sie hast/haben schon recht, man könnte es auch Dreispaltig einrichten.) Der grau-weiß-Verlauf mit dem roten Streifen ist also vom linken Browser-Rand bis zum „rechte Spalte repeat-x” und erst danach kommt der normale Verlauf. Das Grund-Design ist in der Tat 1024px breit, soll aber auch auf höheren Auflösungen den weiß-grau-Verlauf aufweisen.

[stiefel]

Danke für die genaueren Infos.

Das klingt, also solle die rechte Spalte eigentlich keinen Inhalt bekommen - richtig?
Und eine Linke Spalte braucht es auch nicht wirklich?

Dann würde ich einfach einen "Ein-Spalter" anlegen, den auf 1024px Breite einstellen und ihm das Hintergrundbild mitgeben, das nun der Body hat ("grau-weiß-Verlauf mit dem roten Streifen"?).
Und der Body hat dann einfach den anderen Hintergrund ("normale weiß-grau-Verlauf"?)

Oder bin ich heute nur einfach zu müde

[stiefel]

ach ja, und falls es doch aus irgendeinem Grund einen Linken und einen Mittleren Bereich geben soll, dann kann man natürlich dafür eine Linke Spalte einrichten und den Hintergrund ("grau-weiß-Verlauf mit dem roten Streifen"?) zwischen linkem (Browser)Rand und rechtem Rand z.B. dem "#wrapper" zuweisen.

[greengor]

Ich bin gerade draufgekommen, dass ich nicht erwähnt habe, dass der rote Balken sich immer bis zum linken Browser-Rand wiederholen soll. Die Methode deines/Ihres zweiten Posts habe ich vor der jetzigen Problemstellung probiert, mir jedoch gedacht, dass es so einfacher gehen könnte(?).

Jetzt nochmal zusammengefasst: Ich habe als Hintergrundbild (1px breit und 768px hoch, repeat-x) einen Verlauf von weiß auf grau. Anfangs habe ich versucht einfach nur diesen roten Balken in einer linken Spalte nach links „repeaten” zu lassen und im body den normalen weiß-grau-Verlauf als Hintergrund einzustellen. Da dies nicht funktioniert hat, wollte ich das Hintergrundbild in zwei Teile aufteilen: links den Verlauf inklusive dem roten Balken und rechts einfach nur den Verlauf in einer extra Spalte (ginge natürlich auch anders, wie beispielsweise mit drei Spalten oder nur einem weiß-grau-Hintergrundbild mit dem roten Balken in der linken Spalte, ...). Das Problem ist: egal welche Methode ich anwende macht mir Contao nie ein repeat-x bis zum Browser-Rand, da er sich selbst eine breite (genau 4px, welche nirgends deklariert sind) für die Spalten setzt. Diese Spalten sollten bei einer Bildschirmauflösung von 1024, 0px breit sein und bei Vergrößerung immer mitgehen.

Vielen dank, dass du/Sie dich/sich so sehr bemühst/bemühen, mir bei meinem Problem zu helfen.

[stiefel]

Hallo,

so langsam versteh ich es, hoffe ich ;-)
Wie sind denn die Layouteinstellungen im Backend?
"feste Breite" (1024)?
Welche Spalten?
Soll die Seite bei breiteren Bildschirmen zentriert sein?
Ich versuch mal au die schnelle, das zu zeichnen...

Bei einer Bildschirmbreite von 1024 soll es so aussehen?
screen_1024.jpg

Und bei mehr als 1024 Breite so (linksbündig)?
screen_1024+_1.jpg

...oder so (zentriert)?
screen_1024+.jpg

Ach ja, und ich glaube, hier im Forum duzen sich alle ;-)

PS: bin jetzt erstmal unetrwegs - hier in FR scheint die Sonne, heute Abend wieder am Start.

[greengor]

Die zentrierte Version (also das die 1024 immer in der Mitte des Browser-Fensters sind) ist genau das, was ich versuchen will, sofern sich der Teil links von „A” nach links „repeatet” und der Teil rechts von „B” sich nach rechts „repeatet”! Es soll also bei jeder Auflösung über 1024 links der Verlauf mit und rechts der Verlauf ohne den roten Balken zu sehen sein. Weißt du wie ich das hinbekomme?

Die Backend-Einstellungen habe ich mit einem statischen Design ausgestattet, welches 1024 breit und zentriert ist und zusätzlich habe ich mir extra für den fehlenden repeat eine linke oder eine rechte Spalte eingerichtet.

[stiefel]

Hi greengor,

musste mal Sonne tanken, aber jetzt geht es weiter.

Hab mir schon gedacht, dass es die dritte Variante ist, die dich umtreibt. Ist auch gar nicht mal so trivial...

Mit den Spalten kannst Du das m.E. nicht machen, da die Spalten ja Bestandteile des 1024 breiten Layouts sind, d.h. somit immer "innerhalb" liegen.

Die erste Möglichkeit, die mir einfällt, wäre die, dem body eine - zentrierte (center) - Hintergrundgrafik mitzugeben, die Du einfach seeeeehr breit machst (z.B. 3000px oder mehr - vorher mal schauen, was die Dateigröße macht!). Diese grafik ist dann zwei geteilt: linke Hälfte mit rotem Strich, rechte Hälfte ohne.
Damit das dann aber nicht immer innerhalb des Inhaltsbereichs wechselt, sondern erst rechts davon, musst Du dem (oder den) Inhaltsbereich(en), die eine rote Linie haben sollen, ebenfalls eine passende Grafik zuweisen. Für den Fall, dass es keine rechte Spalte ohne rot gibt, kann das der #wrapper sein, falls es eine rechte Spalte (mit Inhalten) geben soll ohne Hintergrund, dann musst Du das eben für #left und #main machen. Damit die rote Linie nicht springt, musst Du ggf. ganz genau überlegen, welche vertikalen Abstände (z.B. vom oberen Browserrand) du ggf. einrichten willst.

Übrigens ist das dann ein kein x-repeat mehr.
An der Stelle auch ein Wort zu der fixen Höhe Deines Farbverlaufs - der würde dann bei höheren Auflösungen immer bei 768px (ihrer Höhe) abbrechen. Wenn Du das auch vermeiden willst, kannst Du auch hier durch eine seeehr große Höhe tricksen.

Alternativ könntest Du versuchen, der Hintergrundgrafik im Body eine absolute Position zu geben. Das musst Du in das Feld "eigener Code" eintragen (z.B. so "background-position: XXXpx"). Ich fürchte aber, dass dies nicht hinhaut, weil bei Body der Nullpunkt nicht in der linken oberen Ecke Deines Layouts liegt, sondern links oben im Browser - ich versuch es bei Gelegenheit morgen mal.

Mehr fällt mir leider nicht ein dazu .... wirklich nicht ganz einfach - den Fall hatte ich noch nie.
Toitoitoi jedenfalls.

Schöne Grüße!

[stiefel]

...grad fiel mir noch was ein - und zwar zur ersten Möglichkeit:

es könnte auch klappen, die Hintergrundgrafik für den Body gleich so einzurichten, dass die rote Linie genau da aufhört, wo sie soll.

Bei einem Einspalter von 1024 wäre das so.
Die Trennlinie zwischen Grafik mit und Grafik ohne roter Linie wäre dann nicht in deren Mitte, sondern eben um 1024/2=512px nach rechts versetzt (bei 3000px wäre die rote Linie dann 2012px breit).

Bei einem Zweispalter mit einer rechten Spalte mit Inhalt, die ohne rote Linie sein soll (das wäre nämlich genau die dritte Variante meiner Grafiken), müsste man vom Versatz dann die Spaltenbreite abziehen ; d.h. 1024/2-RechteSpaltenBreite.

Sollte eigentlich hinhauen?!

[greengor]

Den letzten Vorschlag habe ich umgesetzt. Zu schade, dass es keine elegantere Lösung gibt. Mit einem 16KB Hintergrundbild muss der Kunde jetzt leben lernen.

Vielen Dank nochmal für deine Hilfsbereitschaft und Vorschläge,
lg greengor

[stiefel]

tja, mehr fiel mir dazu nicht ein.
Finde die Sache auch nicht wirklich unelegegant - und mit 16kB kann man doch heutzutage wunderbar leben (selbst für mobile Endgeräte kein Riesending mehr).

Unelegant könnte die Sache wegen der begrenzten Höhe werden; oder hast Du die Grafik jetzt auch dahingehend deutlich vergrößert?

Weiterhin viel Erfolg und auch Spaß wünscht
Stefan