Gestaltungselemente am Wrapper ausrichten.

[Tha]

Hi folks,

ich hab kleines Problem mit nem Layout.
Und zwar habe ich einen Wrapper für den Inhalt 1024px breit. Neben diesem sollen schräge Streifen verlaufen und wollt mal ne qualifizierte Meinung, wie ich das am besten angeh.
Die Streifen sollen direkt am Wrapper anfangen und bis zum Bildschirmrand (auflösungsunabhängig).

[misterunknown]

Moin,

Und zwar habe ich einen Wrapper für den Inhalt 1024px breit. Neben diesem sollen schräge Streifen verlaufen und wollt mal ne qualifizierte Meinung, wie ich das am besten angeh.

In Zeiten mobiler Endgeräte sollte man keine pixelgenauen Layouts mehr machen. Stichwort Responsive Design.

Die Streifen sollen direkt am Wrapper anfangen und bis zum Bildschirmrand (auflösungsunabhängig).

Setze doch einfach ein streifiges Hintergrundbild und gebe dem Wrapper die eigentlich gewünschte Hintergrundfarbe.

Grüße Marco

[Der Martin]

Hallo,

ich hab kleines Problem mit nem Layout.

ja, offensichtlich: Es erfordert eine Breite des Browserfensters, die wohl in vielen Fällen nicht zur Verfügung steht.

Und zwar habe ich einen Wrapper für den Inhalt 1024px breit.

Dieser Wrapper ist sinnvollerweise das body-Element, also:

body { width: 1024px; }

Viele Nutzer werden sich ärgern, dass sie horizontal scrollen müssen.

Neben diesem sollen schräge Streifen verlaufen und wollt mal ne qualifizierte Meinung, wie ich das am besten angeh.
Die Streifen sollen direkt am Wrapper anfangen und bis zum Bildschirmrand (auflösungsunabhängig).

html { background-image: url(stripes.png); }

Dabei ist stripes.png relativ klein (z.B. eine 32x32 große Kachel) und so zugeschnitten, dass es horizontal und vertikal lückenlos anreihbar ist. Noch Fragen?

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

html { background-image: url(stripes.png); }

Gradienten können auch streifig sein.

  
html {  
   background-image: linear-gradient(135deg, white, white 25%, red 25%, red 50%,  
                                             white 50%, white 75%, red 75%, red);  
   background-size: 25px 25px; /* [1] */  
}

[1] - Streifenbreite einstellbar, (feste Streifenanzahl bei prozentualer Angabe)

Matthias

[Der Martin]

Hallo,

html { background-image: url(stripes.png); }
Gradienten können auch streifig sein.

an Gradienten habe ich wohl auch kurz gedacht, aber mir war nicht klar, dass sie auch diagonal verlaufen können.

html {

background-image: linear-gradient(135deg, white, white 25%, red 25%, red 50%,
                                             white 50%, white 75%, red 75%, red);
   background-size: 25px 25px; /* [1] */
}

>   
> [1] - Streifenbreite einstellbar, (feste Streifenanzahl bei prozentualer Angabe)  
  
Danke für die Ergänzung.  
  
Ciao,  
 Martin  

-- 
Fettflecke werden wieder wie neu, wenn man sie regelmäßig mit etwas Butter einschmiert.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(