3 Boxen Problem

[Florian]

Hallo!

Ich stehe irgendwie auf der Leitung:

Ich möchte ein Stylesheet erstellen mit einem fixen Content Element (von 900px) in der Mitte.

Rechts und links sollen vom Bildschirmrand bis zum ContentElement ein repeated background-image erscheinen.

Ich habe mir in etwa folgendes gedacht:

  
<div id="bg_left" style="float:left; height:100px"> </div>  
<div id="bg_right" style="float:right; height:100px"> </div>  
<div id="fixed_CE" style="margin:0 auto; height:100px; widht:900px;"> </div>  

Ich möchte den beiden floatenden divs keine Weite mitgeben, da es sich ja dynamisch am Bildschirm anpassen soll. Wie kann ich angeben dass er die Weite bis zum nächsten DIV nehmen soll?

Irgendwie steige ich da nicht dahinter. Kann mir wer vll. einen Input geben?

Danke!

[Gunnar Bittersmann]

@@Florian:

nuqneH

Ich möchte ein Stylesheet erstellen mit einem fixen Content Element (von 900px) in der Mitte.

Rechts und links sollen vom Bildschirmrand bis zum ContentElement

Viele Browserfenster sind schmaler als 900px, da gibt es kein rechts und links vom Content-Element.

Dieses passt nicht ins Browserfenster, Nutzer müssen horizontal scrollen (nicht nutzerfreundlich) oder die Ansicht verkleinern, was die Schrift womöglich unlesbar klein macht.

Feste Pixelbreiten für den Hauptinhalt sind keine gute Idee.

Brauchst du auch nicht. Du kannst dem Element eine Maximalbreite geben (sinnvollerweise in Abhängigkeit von der Schriftgröße, also in em).

Du brauchst nicht einmal divs.

ein repeated background-image erscheinen.

Das fürs html-Element, anderer Hintergrund für body. Fertig.

Qapla'

[Florian]

Gut dann stelle ich meine Frage anders:

Ich benötige 3 Boxen wobei die mittlere Box eine fixe Breite hat (egal wie breit das jetzt ist) und die boxen rechts und links sollen variabel vom Bildschirmrand bis zum content-Element reichen.

Viele Browserfenster sind schmaler als 900px, da gibt es kein rechts und links vom Content-Element.

Über die Sinnhaftigkeit des Designs möchte ich mich hier nicht streiten, mir geht es rein um die technische Machbarkeit.
Sagen wir halt die mittlere Box hat 350px (weil nur Bilder rein kommen mit dieser Größe) und rechts und links sollen unterschiedliche background-images erscheinen.

@@Florian:

nuqneH

Ich möchte ein Stylesheet erstellen mit einem fixen Content Element (von 900px) in der Mitte.

Rechts und links sollen vom Bildschirmrand bis zum ContentElement

Viele Browserfenster sind schmaler als 900px, da gibt es kein rechts und links vom Content-Element.

Dieses passt nicht ins Browserfenster, Nutzer müssen horizontal scrollen (nicht nutzerfreundlich) oder die Ansicht verkleinern, was die Schrift womöglich unlesbar klein macht.

Feste Pixelbreiten für den Hauptinhalt sind keine gute Idee.

Brauchst du auch nicht. Du kannst dem Element eine Maximalbreite geben (sinnvollerweise in Abhängigkeit von der Schriftgröße, also in em).

Du brauchst nicht einmal divs.

ein repeated background-image erscheinen.

Das fürs html-Element, anderer Hintergrund für body. Fertig.

Qapla'

[1UnitedPower]

Über die Sinnhaftigkeit des Designs möchte ich mich hier nicht streiten, mir geht es rein um die technische Machbarkeit.

Gunnar wollte auch keinen Streit vom Zaun brechen, sondern dich über ein Usability-Problem in deinem Design informieren.

Sagen wir halt die mittlere Box hat 350px (weil nur Bilder rein kommen mit dieser Größe) und rechts und links sollen unterschiedliche background-images erscheinen.

Sollen die seitlichen Boxen denn auch Inhalt haben können? Falls nicht ist es ausschließlich eine Designfrage und überflüssiges Markup hat dort nichts verloren. Du kannst mit CSS mehrere Hintergründe definieren.

[Florian]

Sagen wir halt die mittlere Box hat 350px (weil nur Bilder rein kommen mit dieser Größe) und rechts und links sollen unterschiedliche background-images erscheinen.

Sollen die seitlichen Boxen denn auch Inhalt haben können? Falls nicht ist es ausschließlich eine Designfrage und überflüssiges Markup hat dort nichts verloren. Du kannst mit CSS mehrere Hintergründe definieren.

Das stimmt, die seitlichen 2 Boxen benötigen nur ein Hintergrundbild. Daher sind sie scheinbar überflüssig.
Ich weiß nur nicht wie ich anders links und rechts ein unterschiedliches Hintergrundbild (vom Bildschirmrand bis zum Mittleren Container) laufen lassen kann.
Bei mehreren Hintergrundbildern ist es mir ja leider auch nicht möglich die Abgrenzungen meinen Erfordernissen nach zu definieren (in der Mitte fixiert und rechts und links zum Bildschirmrand laufend), oder irre ich mich da?

Mein Ansatz wäre es die Bildschirmbreite per js auszulesen und die daraus errechnete Größe dem Elementen links und rechts mitzugeben.
Gibt es da aber keine css Lösung dafür?

[Gunther]

Hallo!

Ich verstehe deinen Ansatz irgendwie nicht!?
Du willst deinen eigentlichen Seitenbereich (also der Teil mit Inhalt) mit einer festen Breite auf dem Viewport zentriert anzeigen lassen, soweit noch richtig?

Ferner willst du, falls der Viewport breiter ist als dein "Content-Bereich", links und rechts davon ein Hintergrundbild erscheint?

Da du im Endeffekt ja nie wissen kannst, wie breit der Viewport eines Users ist, sehe ich da jetzt verschiedene Varianten:

1. Ein Hintergrundbild, welches du horizontal zentrierst. Aufgrund der fixen Breite deines überlagernden Content-Bereichs könntest du sogar pixelgenau die beiden Ränder in deinem Hintergrundbild festlegen.

2. Du erstellst dir 2 Container-Elemente, die du beide absolut positionierst. Eins links am Rand, das andere rechts am Rand und beide jeweils 50% breit. Somit kannst du jedem Container ein unterschiedliches Hintergrundbild (oder auch mehrere) zuweisen.

Es wäre aber trotzdem hilfreich, wenn du die Art deines gewünschten Hintergrund(bildes) mal näher erläutern würdest. Soll das bspw. nur ein horizontaler Farbverlauf sein, oder so aussehen, als ob "etwas" hinter der Seite hervorguckt etc.?

Gruß Gunther

[Florian]

Hallo!

Ferner willst du, falls der Viewport breiter ist als dein "Content-Bereich", links und rechts davon ein Hintergrundbild erscheint?

Ganz exakt. Das will ich.

2. Du erstellst dir 2 Container-Elemente, die du beide absolut positionierst. Eins links am Rand, das andere rechts am Rand und beide jeweils 50% breit. Somit kannst du jedem Container ein unterschiedliches Hintergrundbild (oder auch mehrere) zuweisen.

Ja diese Möglichkeit habe ich auch schon probiert, ist aber in meinem speziellen Fall leider nicht möglich.

Es wäre aber trotzdem hilfreich, wenn du die Art deines gewünschten Hintergrund(bildes) mal näher erläutern würdest.

Das Problem ist folgendes:
Ich habe über die gesamte Breite des Bildschirms ein halbtransparentes durchgängig wiederholendes Muster (ähnlich einer komplexen Autoreifenspur).
Zentriert befindet sich die Seite mit einer Topnavigation. Hier muss das Muster an bestimmten Stellen abgeschwächt bzw. unterbrochen werden.
Rechts und links von der zentrierten Seite sollen (sofern es noch einen anzuzeigenden Bereich gibt) Farbverläufe das Muster so manipulieren als käme es aus dem Hintergrund. Allerdings darf das Muster nicht unterbrochen werden, da sonst der Effekt weg ist.

Aus dem Grund muss auch das linke und rechte Element genau dort einsetzen wo das zentrierte Content-Element aufhört und darf nicht darüber hinausragen (Daher kann ich auch keine width von 50 % mitgeben - ich kann das Bild nicht unter den Main Content schieben).

Ich dachte eigentlich dass das ein kleineres CSS Problem darstellt, da ich ja nur einen Fixen Wert habe und 2 Container die Anweisung geben möchte: dehne dich aus bis du auf einen fixen Bereich stößt.

[Florian]

Ich habe eine Lösung gefunden!

Das ist wirklich kein triviales Problem, aber durchaus mit CSS zu lösen.

Der Trick ist alles nach links floaten zu lassen.
Rechts und Links mit 50% width die Mitte zu berechnen und mit einem Minus Margin den Raum in der Mitte schaffen.

Ein Beispiel dazu findet sich hier.

[Gunnar Bittersmann]

@@Florian:

nuqneH

Zentriert befindet sich die Seite mit einer Topnavigation. Hier muss das Muster an bestimmten Stellen abgeschwächt bzw. unterbrochen werden.

(Transparenter) Hintergrund fürs body-Element.

Rechts und links von der zentrierten Seite sollen (sofern es noch einen anzuzeigenden Bereich gibt) Farbverläufe das Muster so manipulieren als käme es aus dem Hintergrund.

Muster und Gradient für html-Element.

Qapla'

[Florian]

Zur besseren Veranschaulichung des CSS Problems:
Dieses CSS Beispiel stellt genau den umgekehrten Bereich dar den ich fixieren möchte.

Ich würde gerne den mittleren Bereich zentriert lassen und den rechten u linken Breich "floaten" lassen.

Ist es möglich dass das gar nicht mittels CSS lösbar ist?

[Gunnar Bittersmann]

@@Florian:

nuqneH

Ich weiß nur nicht wie ich anders links und rechts ein unterschiedliches Hintergrundbild (vom Bildschirmrand bis zum Mittleren Container) laufen lassen kann.
Bei mehreren Hintergrundbildern ist es mir ja leider auch nicht möglich die Abgrenzungen meinen Erfordernissen nach zu definieren (in der Mitte fixiert und rechts und links zum Bildschirmrand laufend), oder irre ich mich da?

Ja.

Mein Ansatz wäre es die Bildschirmbreite per js auszulesen und die daraus errechnete Größe dem Elementen links und rechts mitzugeben.

JavaScript?? Nein.

Gibt es da aber keine css Lösung dafür?

Nein. Es gibt eine CSS-Lösung. Mit ohne Deppenleerzeichen.

Qapla'