Dreiteiliger vertikaler Background – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Dreiteiliger vertikaler Background Sun, 26 Jul 09 11:04:01 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382791?srt=yes#m1382791 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382791?srt=yes#m1382791 <p>Hallo Leute,</p> <p>Folgendes Problem:</p> <p>Mein Design für den Hintergrund ist (etwas übertrieben) in einer Rautenform.<br> 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.</p> <p>PNG war nötig um die halbtransparenten Ränder und überstehenden Ornamente einzubinden.</p> <p>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).</p> <p>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.</p> <p>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).</p> <p>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.</p> <p>Ich hoffe ich habe das jetzt nicht zu unverständlich erklärt :)</p> <p>Hier nochmal das Listing:</p> <p>CSS:</p> <pre><code class="block language-css"> <span class="token selector">#container</span> <span class="token punctuation">{</span> width<span class="token punctuation">:</span> 900px<span class="token punctuation">;</span> overflow<span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> position<span class="token punctuation">:</span> relative<span class="token punctuation">;</span> left<span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> top<span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> margin-left<span class="token punctuation">:</span> -450px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#content_con</span> <span class="token punctuation">{</span> width<span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#content_begin</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>images/content_begin.png<span class="token punctuation">)</span></span> no-repeat left top<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#content_middle</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>images/content_middle.png<span class="token punctuation">)</span></span> repeat-y 0 320px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#content_end</span> <span class="token punctuation">{</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>images/content_end.png<span class="token punctuation">)</span></span> no-repeat left bottom<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>(X)HTML:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content_con<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content_middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content_begin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content_end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> hello world<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>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).</p> <p>Vielen Dank schonmal im Vorraus!</p> <p>Gruß Thrust</p> Dreiteiliger vertikaler Background Sun, 26 Jul 09 13:15:37 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382792?srt=yes#m1382792 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382792?srt=yes#m1382792 <p>Hallo Thrust</p> <blockquote> <p>Mein Design für den Hintergrund ist (etwas übertrieben) in einer Rautenform.<br> 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.</p> </blockquote> <p>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.</p> <blockquote> <p>Ich hoffe ich habe das jetzt nicht zu unverständlich erklärt :)</p> </blockquote> <p>Verständlich ist es schon.<br> Trotzdem wäre es hilfreich, einen Link auf die Seite zu posten, oder wenigstens die Hintergrundbilder mitzuliefern.</p> <blockquote> <p>CSS:</p> <pre><code class="block language-css"></code></pre> </blockquote> <blockquote> <p>#container {<br>   width: 900px;<br>   overflow: hidden;<br>   position: relative;<br>   left: 50%;<br>   top: 0px;<br>   margin-left: -450px;<br> }</p> </blockquote> <pre><code class="block"> 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%; > } </code></pre> <p>Ist das nötig? Blockelemente nehmen standardmäßig die gesamte zur Verfügung stehende Breite ein.</p> <blockquote> <p>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).</p> </blockquote> <p>Die dürfte es mit Hilfe von negativen Margins geben.</p> <p>Auf Wiederlesen<br> Detlef</p> <div class="signature">-- <br> - Wissen ist gut<br> - Können ist besser<br> - aber das Beste und Interessanteste ist der Weg dahin! </div> Dreiteiliger vertikaler Background Sun, 26 Jul 09 13:35:12 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382793?srt=yes#m1382793 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382793?srt=yes#m1382793 <p>Hier die Background-images:</p> <p>für #content_begin:<br> <a href="http://benjamin-wulff.de/images/content_begin.png" rel="nofollow noopener noreferrer">http://benjamin-wulff.de/images/content_begin.png</a></p> <p>für #content_middle:<br> <a href="http://benjamin-wulff.de/images/content_middle.png" rel="nofollow noopener noreferrer">http://benjamin-wulff.de/images/content_middle.png</a></p> <p>für #content_end:<br> <a href="http://benjamin-wulff.de/images/content_end.png" rel="nofollow noopener noreferrer">http://benjamin-wulff.de/images/content_end.png</a></p> <p>Danke für den Tipp mit margin: auto;! Der ist super, ich hatte mich schon oft gefragt, wieso horizontalen zentrieren so komplizierten code erfordert.</p> <p>Wie meinst du das mit den negativen Margins?</p> Dreiteiliger vertikaler Background Sun, 26 Jul 09 15:14:48 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382794?srt=yes#m1382794 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382794?srt=yes#m1382794 <p>Hallo Thrust</p> <blockquote> <p>Hier die Background-images:</p> </blockquote> <p>Danke, damit kann man sich noch besser vorstellen, wie es aussehen soll.<br> Allerdings sehen die irgendwie unvollständig aus, wodurch sich mir die Frage stellt, ob deine Zuordnung von Hintergrundbildern zu den Seitenelementen wirklich optimal ist.</p> <blockquote> <p>Danke für den Tipp mit margin: auto;! Der ist super, ich hatte mich schon oft gefragt, wieso horizontalen zentrieren so komplizierten code erfordert.</p> </blockquote> <p>So ähnlicher oder anderer ähnlich komplizierter Code ist notwendig, wenn eine vertikale Zentrierung gewünscht ist.</p> <blockquote> <p>Wie meinst du das mit den negativen Margins?</p> </blockquote> <p>ungefähr so:</p> <pre><code class="block language-css"><span class="token selector">#content_begin</span> <span class="token punctuation">{</span> margin-top<span class="token punctuation">:</span>-321px<span class="token punctuation">;</span> <span class="token comment">/* entsprechend margin + padding zurück */</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>images/content_begin.png<span class="token punctuation">)</span></span> no-repeat left top<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#content_middle</span> <span class="token punctuation">{</span> margin<span class="token punctuation">:</span>320px 0 249px 0<span class="token punctuation">;</span> <span class="token comment">/* die Höhe der oberen und unteren Grafik Platz lassen */</span> padding<span class="token punctuation">:</span>1px 0<span class="token punctuation">;</span> <span class="token comment">/* collapsin-margins vermeiden */</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>images/content_middle.png<span class="token punctuation">)</span></span> repeat-y<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#content_end</span> <span class="token punctuation">{</span> margin-bottom<span class="token punctuation">:</span>-250px<span class="token punctuation">;</span> <span class="token comment">/* entsprechend margin + padding zurück */</span> min-height<span class="token punctuation">:</span>571px<span class="token punctuation">;</span> <span class="token comment">/* Mindesthöhe damit nichts abgeschnitten wird */</span> background<span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>images/content_end.png<span class="token punctuation">)</span></span> no-repeat left bottom<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">* html #content_end</span> <span class="token punctuation">{</span> <span class="token comment">/* Mindesthöhe für alte IEs */</span> height<span class="token punctuation">:</span>571px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ob das so in allen relevanten Browsern funktioniert oder noch Anpassungen nötig sind solltest du noch testen.</p> <p>Auf Wiederlesen<br> Detlef</p> <div class="signature">-- <br> - Wissen ist gut<br> - Können ist besser<br> - aber das Beste und Interessanteste ist der Weg dahin! </div> Dreiteiliger vertikaler Background Sun, 26 Jul 09 15:53:42 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382795?srt=yes#m1382795 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382795?srt=yes#m1382795 <blockquote> <p>Hallo Thrust</p> <blockquote> <p>Hier die Background-images:</p> </blockquote> <p>Danke, damit kann man sich noch besser vorstellen, wie es aussehen soll.<br> Allerdings sehen die irgendwie unvollständig aus, wodurch sich mir die Frage stellt, ob deine Zuordnung von Hintergrundbildern zu den Seitenelementen wirklich optimal ist.</p> </blockquote> <p>Ja, das sehen sie auch jetzt noch, aber es fehlen nur noch einige kleine Anpassungen der Schatten, dann sollte es sitzen ;)</p> <blockquote> <blockquote> <p>Danke für den Tipp mit margin: auto;! Der ist super, ich hatte mich schon oft gefragt, wieso horizontalen zentrieren so komplizierten code erfordert.</p> </blockquote> <p>So ähnlicher oder anderer ähnlich komplizierter Code ist notwendig, wenn eine vertikale Zentrierung gewünscht ist.</p> </blockquote> <blockquote> <p>Ob das so in allen relevanten Browsern funktioniert oder noch Anpassungen nötig sind solltest du noch testen.</p> </blockquote> <p>Super! Das passt schon (fast) perfekt.<br> Ich habe ein paar kleine Anpassungen gemacht, aber im IE7 will er den margin-bottom des #content_middle nicht anerkennen :(</p> <p>Hier nun einmal der Komplette Link:<br> <a href="http://benjamin-wulff.de/test/" rel="nofollow noopener noreferrer">http://benjamin-wulff.de/test/</a></p> <blockquote> <p>Auf Wiederlesen<br> Detlef</p> </blockquote> Dreiteiliger vertikaler Background Sun, 26 Jul 09 18:23:35 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382798?srt=yes#m1382798 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382798?srt=yes#m1382798 <p>Hallo Thrust</p> <blockquote> <p>Super! Das passt schon (fast) perfekt.<br> Ich habe ein paar kleine Anpassungen gemacht, aber im IE7 will er den margin-bottom des #content_middle nicht anerkennen :(</p> </blockquote> <p>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).</p> <blockquote> <p>Hier nun einmal der Komplette Link:<br> <a href="http://benjamin-wulff.de/test/" rel="nofollow noopener noreferrer">http://benjamin-wulff.de/test/</a></p> </blockquote> <p>Kommt sonst noch etwas auf die Seite?</p> <p>Ich würde versuchen, nicht mehr Div-Container zu verwenden als nötig sind.<br> 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.</p> <p>Bei header_bar.png und badge.png hast du einen Doppelschatten.<br> 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.)</p> <p>Auf Wiederlesen<br> Detlef</p> <div class="signature">-- <br> - Wissen ist gut<br> - Können ist besser<br> - aber das Beste und Interessanteste ist der Weg dahin! </div> Dreiteiliger vertikaler Background Sun, 26 Jul 09 23:13:17 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382796?srt=yes#m1382796 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382796?srt=yes#m1382796 <p>Hallo Thrust</p> <blockquote> <p><a href="http://benjamin-wulff.de/test/" rel="nofollow noopener noreferrer">http://benjamin-wulff.de/test/</a></p> </blockquote> <p>willst du dieses Design _tatsächlich_ realisieren?<br> Auf mich - pardon - wirkt es wie die Speisekarte eines Landgasthauses, dem ich schnellstens den Rücken kehren würde.</p> <p>Beste Grüße,<br> gelu</p> Dreiteiliger vertikaler Background Mon, 27 Jul 09 13:33:20 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382797?srt=yes#m1382797 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382797?srt=yes#m1382797 <blockquote> <p>Hallo Thrust</p> <blockquote> <p><a href="http://benjamin-wulff.de/test/" rel="nofollow noopener noreferrer">http://benjamin-wulff.de/test/</a></p> </blockquote> <p>willst du dieses Design _tatsächlich_ realisieren?<br> Auf mich - pardon - wirkt es wie die Speisekarte eines Landgasthauses, dem ich schnellstens den Rücken kehren würde.</p> </blockquote> <p>Genau das ist es ja auch ;)<br> Ein Gasthaus. Wurde bei der Stadt gepachtet und nun als Gaststätte ausgebaut ;)</p> <blockquote> <p>Beste Grüße,<br> gelu</p> </blockquote> <p>Gruß Thrust</p> Dreiteiliger vertikaler Background Mon, 27 Jul 09 13:43:41 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382799?srt=yes#m1382799 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382799?srt=yes#m1382799 <p>Hallo Detlef</p> <blockquote> <p>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).</p> </blockquote> <p>Ich habe auch keinen IE7, deswegen benutze ich immer den <a href="http://www.my-debugbar.com/wiki/IETester/HomePage" rel="nofollow noopener noreferrer">IE-Tester</a></p> <p>Dass es im IE6 passt, liegt wie du schon sagtest daran, dass es keine png-transperenz gibt.</p> <blockquote> <p>Ich würde versuchen, nicht mehr Div-Container zu verwenden als nötig sind.<br> 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.</p> </blockquote> <p>Das stimmt, badge.png und header_begin.png kann man wirklich zusammen lassen.<br> 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.</p> <blockquote> <p>Bei header_bar.png und badge.png hast du einen Doppelschatten.<br> Das kleine Stückchen von header_bar das rechts und links an badge.png klebt würde ich weglassen.</p> </blockquote> <p>Stimmt, das kommt weg.</p> Dreiteiliger vertikaler Background Mon, 27 Jul 09 22:06:53 Z https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382800?srt=yes#m1382800 https://forum.selfhtml.org/self/2009/jul/26/dreiteiliger-vertikaler-background/1382800?srt=yes#m1382800 <p>Hallo Thrust</p> <blockquote> <p>Dass es im IE6 passt, liegt wie du schon sagtest daran, dass es keine png-transperenz gibt.</p> </blockquote> <p>Ja, das hatte ich übersehen.<br> Auf meiner Testseite ohne die Bilder hatte es funktioniert.<br> Eigentlich wusste ich doch, dass IE6 immer Probleme bei negativen margins macht, deshalb hatte ich beim <a href="http://d-graff.de/selfhtml/papier1.html" rel="nofollow noopener noreferrer">Papier</a> und den <a href="http://d-graff.de/selfhtml/rundeecken.html" rel="nofollow noopener noreferrer">runden Ecken</a> auch mit position:relative verschoben, statt negative margins zu verwenden.<br> 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.)</p> <blockquote> <p>Das stimmt, badge.png und header_begin.png kann man wirklich zusammen lassen.<br> 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.</p> </blockquote> <p>Es sind nur 60 Pixel, die die Dateigröße nicht nennenswert erhöhen, stattdessen wird die Gesamtdatei noch kleiner.</p> <p>Auf Wiederlesen<br> Detlef</p> <div class="signature">-- <br> - Wissen ist gut<br> - Können ist besser<br> - aber das Beste und Interessanteste ist der Weg dahin! </div>