Dreiteiliger vertikaler Background

[TheThrust]

Hallo Leute,

Folgendes Problem:

Mein Design für den Hintergrund ist (etwas übertrieben) in einer Rautenform.
Diese Form habe ich in 3 .png images verwandelt: die obere Hälfte, ein 1px-Streifen aus der Mitte (für repeat-y) und die untere Hälfte.

PNG war nötig um die halbtransparenten Ränder und überstehenden Ornamente einzubinden.

Ich möchte nun gerne, dass die Raute sich im Mittelteil "verlängert", wenn der Inhalt länger wird (klar, dann ist es keine Raute mehr, aber egal).

Bisher hatte ich nur mit zweiteiligen Backgrounds zu tun, das war dann ganz einfach zu lösen, indem man 2 DIVs inneinander und jeweils mit background-position die Background-teile jeweils an top und bottom verbannt hat, voilà, man hatte seinen "resizable" Background.

Jetzt ist das ganze jedoch schwerer, da ich aufgrund der PNGs nicht einfach ein drittes Div um die beiden anderen setzen kann (dann würde ja hinter der ersten und zweiten hälfte der Raute der mittlere Teil im repeat-y zu sehen sein).

Maximal kann ich im ersten Div (für die "reziable" Mitte) die Background-position so anpassen, dass der background erst exakt beim ende der ersten Hälfte der Raute beginnt, aber dann habe ich immer noch hinter der zweiten Hälfte der Raute den repeat-y aus dem ersten DIV zu sehen.

Ich hoffe ich habe das jetzt nicht zu unverständlich erklärt :)

Hier nochmal das Listing:

CSS:

  
#container {  
  width: 900px;  
  overflow: hidden;  
  position: relative;  
  left: 50%;  
  top: 0px;  
  margin-left: -450px;  
}  
  
#content_con {  
  width: 100%;  
}  
  
#content_begin {  
  background: url(images/content_begin.png) no-repeat left top;  
}  
  
#content_middle {  
  background: url(images/content_middle.png) repeat-y 0 320px;  
}  
  
#content_end {  
  background: url(images/content_end.png) no-repeat left bottom;  
}

(X)HTML:

  
<div id="container">  
  <div id="content_con">  
    <div id="content_middle">  
      <div id="content_begin">  
        <div id="content_end">  
  
          hello world<br />  
  
        </div>  
      </div>  
    </div>  
  </div>  
</div>  

Ich würde mich freuen, wenn jemandem eine schlaue Lösung einfällt, die um eine .jpg oder .gif als png ersatz herumkommt (das würde mein Design völlig zerstören).

Vielen Dank schonmal im Vorraus!

Gruß Thrust

[Detlef G.]

Hallo Thrust

Mein Design für den Hintergrund ist (etwas übertrieben) in einer Rautenform.
Diese Form habe ich in 3 .png images verwandelt: die obere Hälfte, ein 1px-Streifen aus der Mitte (für repeat-y) und die untere Hälfte.

Eventuell ist der 1px Steifen nicht nötig bzw. kompliziert es zusätzlich. PNG-Dateien werden oft nur unwesentlich größer, wenn die Bildgröße durch eine wiederholende Struktur größer wird.

Ich hoffe ich habe das jetzt nicht zu unverständlich erklärt :)

Verständlich ist es schon.
Trotzdem wäre es hilfreich, einen Link auf die Seite zu posten, oder wenigstens die Hintergrundbilder mitzuliefern.

CSS:

#container {
  width: 900px;
  overflow: hidden;
  position: relative;
  left: 50%;
  top: 0px;
  margin-left: -450px;
}

  
Das halte ich für die ungünstigste Variante einer horizontalen Zentrierung. Bei zu schmalen Browserfenstern kann dadurch ein Teil unerreichbar links außerhalb des Fensters verschwinden.  
Besser ist es einfach mit margin:auto zu zentrieren (eventuell für alte IEs noch text-align:center im Elternelement).  
  

> ~~~css

#content_con {  

>   width: 100%;  
> }

Ist das nötig? Blockelemente nehmen standardmäßig die gesamte zur Verfügung stehende Breite ein.

Ich würde mich freuen, wenn jemandem eine schlaue Lösung einfällt, …die um eine .jpg oder .gif als png ersatz herumkommt (das würde mein Design völlig zerstören).

Die dürfte es mit Hilfe von negativen Margins geben.

Auf Wiederlesen
Detlef

[TheThrust]

Hier die Background-images:

für #content_begin:
http://benjamin-wulff.de/images/content_begin.png

für #content_middle:
http://benjamin-wulff.de/images/content_middle.png

für #content_end:
http://benjamin-wulff.de/images/content_end.png

Danke für den Tipp mit margin: auto;! Der ist super, ich hatte mich schon oft gefragt, wieso horizontalen zentrieren so komplizierten code erfordert.

Wie meinst du das mit den negativen Margins?

[Detlef G.]

Hallo Thrust

Hier die Background-images:

Danke, damit kann man sich noch besser vorstellen, wie es aussehen soll.
Allerdings sehen die irgendwie unvollständig aus, wodurch sich mir die Frage stellt, ob deine Zuordnung von Hintergrundbildern zu den Seitenelementen wirklich optimal ist.

Danke für den Tipp mit margin: auto;! Der ist super, ich hatte mich schon oft gefragt, wieso horizontalen zentrieren so komplizierten code erfordert.

So ähnlicher oder anderer ähnlich komplizierter Code ist notwendig, wenn eine vertikale Zentrierung gewünscht ist.

Wie meinst du das mit den negativen Margins?

ungefähr so:

#content_begin {  
  margin-top:-321px;        /* entsprechend margin + padding zurück */  
  background: url(images/content_begin.png) no-repeat left top;  
}  
  
#content_middle {  
  margin:320px 0 249px 0; /* die Höhe der oberen und unteren Grafik Platz lassen */  
  padding:1px 0;          /* collapsin-margins vermeiden */  
  background: url(images/content_middle.png) repeat-y;  
}  
  
#content_end {  
  margin-bottom:-250px;  /* entsprechend margin + padding zurück */  
  min-height:571px;      /* Mindesthöhe damit nichts abgeschnitten wird */  
  background: url(images/content_end.png) no-repeat left bottom;  
}  
* html #content_end {    /* Mindesthöhe für alte IEs */  
  height:571px;  
}

Ob das so in allen relevanten Browsern funktioniert oder noch Anpassungen nötig sind solltest du noch testen.

Auf Wiederlesen
Detlef

[TheThrust]

Hallo Thrust

Hier die Background-images:

Danke, damit kann man sich noch besser vorstellen, wie es aussehen soll.
Allerdings sehen die irgendwie unvollständig aus, wodurch sich mir die Frage stellt, ob deine Zuordnung von Hintergrundbildern zu den Seitenelementen wirklich optimal ist.

Ja, das sehen sie auch jetzt noch, aber es fehlen nur noch einige kleine Anpassungen der Schatten, dann sollte es sitzen ;)

Danke für den Tipp mit margin: auto;! Der ist super, ich hatte mich schon oft gefragt, wieso horizontalen zentrieren so komplizierten code erfordert.

So ähnlicher oder anderer ähnlich komplizierter Code ist notwendig, wenn eine vertikale Zentrierung gewünscht ist.

Ob das so in allen relevanten Browsern funktioniert oder noch Anpassungen nötig sind solltest du noch testen.

Super! Das passt schon (fast) perfekt.
Ich habe ein paar kleine Anpassungen gemacht, aber im IE7 will er den margin-bottom des #content_middle nicht anerkennen :(

Hier nun einmal der Komplette Link:
http://benjamin-wulff.de/test/

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Thrust

Super! Das passt schon (fast) perfekt.
Ich habe ein paar kleine Anpassungen gemacht, aber im IE7 will er den margin-bottom des #content_middle nicht anerkennen :(

Tut mir leid, habe leider keinen IE7 zum testen, kann es deshalb nicht nachvollziehen, zumal es selbst im IE6 so passt (außer des Unvermögens die PNG-Transparenz darzustellen).

Hier nun einmal der Komplette Link:
http://benjamin-wulff.de/test/

Kommt sonst noch etwas auf die Seite?

Ich würde versuchen, nicht mehr Div-Container zu verwenden als nötig sind.
So ist es vielleicht nicht wirklich sinnvoll badge.png und content_begin.png voneinander zu trennen, genauso, wie content_foot.png und content_end.png.

Bei header_bar.png und badge.png hast du einen Doppelschatten.
Das kleine Stückchen von header_bar das rechts und links an badge.png klebt würde ich weglassen. Dann header_bar.png horizontal zentrieren, sonst ist sie je nach Fenstergröße seltsam verschoben. (dazu eventuell besser in der Mitte zwischen den Rauten trennen.)

Auf Wiederlesen
Detlef

[TheThrust]

Hallo Detlef

Tut mir leid, habe leider keinen IE7 zum testen, kann es deshalb nicht nachvollziehen, zumal es selbst im IE6 so passt (außer des Unvermögens die PNG-Transparenz darzustellen).

Ich habe auch keinen IE7, deswegen benutze ich immer den IE-Tester

Dass es im IE6 passt, liegt wie du schon sagtest daran, dass es keine png-transperenz gibt.

Ich würde versuchen, nicht mehr Div-Container zu verwenden als nötig sind.
So ist es vielleicht nicht wirklich sinnvoll badge.png und content_begin.png voneinander zu trennen, genauso, wie content_foot.png und content_end.png.

Das stimmt, badge.png und header_begin.png kann man wirklich zusammen lassen.
Nur header_foot.png ist etwas (ich glaub es waren 160px) breiter, als header_end.png, da wollte ich nicht das Bild unnötig groß werden lassen.

Bei header_bar.png und badge.png hast du einen Doppelschatten.
Das kleine Stückchen von header_bar das rechts und links an badge.png klebt würde ich weglassen.

Stimmt, das kommt weg.

[Detlef G.]

Hallo Thrust

Dass es im IE6 passt, liegt wie du schon sagtest daran, dass es keine png-transperenz gibt.

Ja, das hatte ich übersehen.
Auf meiner Testseite ohne die Bilder hatte es funktioniert.
Eigentlich wusste ich doch, dass IE6 immer Probleme bei negativen margins macht, deshalb hatte ich beim Papier und den runden Ecken auch mit position:relative verschoben, statt negative margins zu verwenden.
Mit nur einem negativen margin, einer anderen Reihenfolge der verschachtelten Elemente und den Rest dann über eine Verschiebung dürfte es selbst im IE6 funktionieren (und nach kleinen Anpassungen auch im 7er.)

Das stimmt, badge.png und header_begin.png kann man wirklich zusammen lassen.
Nur header_foot.png ist etwas (ich glaub es waren 160px) breiter, als header_end.png, da wollte ich nicht das Bild unnötig groß werden lassen.

Es sind nur 60 Pixel, die die Dateigröße nicht nennenswert erhöhen, stattdessen wird die Gesamtdatei noch kleiner.

Auf Wiederlesen
Detlef

[gelu]

Hallo Thrust

http://benjamin-wulff.de/test/

willst du dieses Design _tatsächlich_ realisieren?
Auf mich - pardon - wirkt es wie die Speisekarte eines Landgasthauses, dem ich schnellstens den Rücken kehren würde.

Beste Grüße,
gelu

[TheThrust]

Hallo Thrust

http://benjamin-wulff.de/test/

willst du dieses Design _tatsächlich_ realisieren?
Auf mich - pardon - wirkt es wie die Speisekarte eines Landgasthauses, dem ich schnellstens den Rücken kehren würde.

Genau das ist es ja auch ;)
Ein Gasthaus. Wurde bei der Stadt gepachtet und nun als Gaststätte ausgebaut ;)

Beste Grüße,
gelu

Gruß Thrust