div container mit background-image auf unbekannte höhe repeaten.

[franky]

Hi,

brech mir gerade irgendwie ein Bein beim Versuch einen runden Rahmen um ein wenig Inhalt zu legen. Hab zwar extrem viel im Netz gefunden, aber entweder sind meine Suchwörter nicht optimal oder es gibt zu dem Thema einfach zuviel. Da ich auch nicht unbedingt der größte CSS Held bin, krieg ichs halt schlicht nicht gebacken.

Ich habe 8 Bilder, 4 für die Ecken und 4 1-Pixel slices für den Rahmen dazwischen. Mein Problem sind die 1 Pixel slices die nicht wirklich so dargestellt werden wie ich das möchte, was vermutlich daran liegt das ich alles so variabel wie möglich halten will, wenn ich für Breite und Höhe fixe Werte angebe klappts natürlich super, ist aber nicht wirklich brauchbar. Dazu kommt das mir aufgefallen ist das manche div's wenn kein Inhalt für diese angegeben ist einfach garnicht angezeigt werden, obwohl über css ein Hintergrundbild zugewiesen ist.

Wenn mich jemand auf ein vernünftiges Tutorial weisen könnte, wäre mir vermutlich schon geholfen, Tipps nehme ich auch gerne preiswert entgegen.

Herzlichen dank im Voraus
Frank

[Hannes]

Tag,

Ich habe 8 Bilder, 4 für die Ecken und 4 1-Pixel slices für den Rahmen dazwischen.

manche div's

einzelne Rahmenbilder setzt du das besser in eine Tabelle, das ist einfacher und auf HTML-Ebene nicht minder verkorkst. Genau genommen ist es eigentlich noch verkorkster, mit divs eine Methode zur Grafikplatzierung umzusetzen, wie sie mit Tabellenlayout eingeführt wurde.

Wenn du einen Rahmen mit gerundeten Ecken in CSS haben willst, nimm' border-radius (die border-radius-Angabe musst du ergänzen um -webkit-border-radius und -moz-border-radius mit den gleichen Werten) oder border-images.

Schönen Abend,
Hannes

[suit]

einzelne Rahmenbilder setzt du das besser in eine Tabelle, das ist einfacher und auf HTML-Ebene nicht minder verkorkst. Genau genommen ist es eigentlich noch verkorkster, mit divs eine Methode zur Grafikplatzierung umzusetzen, wie sie mit Tabellenlayout eingeführt wurde.

WTF? Dein Ratschlag ist potentiell gefährlich.

Pervers viel unflexiblen HTML-Code mit minimum 7 und Maximal 13 HTML-Elementen vs 1. optimalerweise 1 HTML-Element bzw. als Fallback 3 oder maximal 5 Elemente siehst du als Vorteil?

Wenn du einen Rahmen mit gerundeten Ecken in CSS haben willst, nimm' border-radius (die border-radius-Angabe musst du ergänzen um -webkit-border-radius und -moz-border-radius mit den gleichen Werten) oder border-images.

Ein weiser rat, aber wenns Ecken und kanten sein sollen, die aus bildern bestehen, kommt man um mehrere Hintergrundbilder oder die verwendung der ::outside-Pseudo-Elemente nicht herum.

Wenn CSS3 nicht zur Verfügung steht: die nötigen Elemente mit JavaScript einhängen oder hardcodieren.

Alternativtechniken gibt's genug.

[Hannes]

einzelne Rahmenbilder setzt du besser in eine Tabelle, das ist einfacher und auf HTML-Ebene nicht minder verkorkst.

WTF? Dein Ratschlag ist potentiell gefährlich.

Genau! Der Bildschirm könnte explodieren!! Hui!!!!1

Pervers viel unflexiblen HTML-Code mit minimum 7 und Maximal 13 HTML-Elementen vs 1. optimalerweise 1 HTML-Element bzw. als Fallback 3 oder maximal 5 Elemente siehst du als Vorteil?

Lesen und verstehen ist nicht deine Stärke, was? Ich habe ausdrücklich geschrieben, dass die Tabellengeschichte "nicht minder verkorkst" ist und zwei bessere Alternativen aufgezeigt.
Eigentlich gäbe es da nichts weiter hinzuzufügen, aber wenn du es unbedingt hören willst: Ja, eine Tabelle, die wenigstens sofort und sicher funktioniert, halte ich für akzeptabler als Energie in eine browserübergreifend schwer zu beherrschende div-Wüste zu stecken (wie es der Fragende gerade tut), die anderswo besser investiert wäre, in interessante Inhalte beispielsweise. Gut, manche Leute können sich auf viele tolle divs auch einen runterholen oder glauben, hinter einer Tabelle stecke der Antichrist ...

[Joachim]

Hi,

browserübergreifend schwer zu beherrschende div-Wüste

quark. Für runde Ecken mit Hintergrundbildern brauchts grade mal 2 zusätzliche Elemente. Und auch wenn Gunnar jetzt wieder mit mir schimpft halte ich das für besser, als wieder Tabellen zu stöpseln.

Gruesse, Joachim

[suit]

browserübergreifend schwer zu beherrschende div-Wüste
quark.

Wer redet von Wüste?

Wie wärs mit der Holzhammer-Methode und einem Stück Code wie diesem hier

<div class="foo">  
	<p>bar baz</p>  
	<div class="qux"></div>  
	<div class="quux"></div>  
	<div class="quuux"></div>  
	<div class="quuuux"></div>  
</div>

Das ist zwar mehr als nötig aber für jeden einfach verständlich - 1 div je Ecke.

Mit einer Tabelle sieht das meistens etwa so aus:

<table>  
	<tr>  
		<td><img src="qux" /></td>  
		<td></td>  
		<td><img src="quux" /></td>  
	</tr>  
	<tr>  
		<td></td>  
		<td><p>foo bar</p></td>  
		<td></td>  
	</tr>  
	<tr>  
		<td><img src="quuux"/></td>  
		<td></td>  
		<td><img src="quuuux"/></td>  
	</tr>  
</table>  

66% mehr Markup - wofür?

Für runde Ecken mit Hintergrundbildern brauchts grade mal 2 zusätzliche Elemente. Und auch wenn Gunnar jetzt wieder mit mir schimpft halte ich das für besser, als wieder Tabellen zu stöpseln.

Ich zähle bei deiner Lösung vier zusätzliche Elemente, das span-Element in der Überschrift sowie die Überschrift selbst ;) Es ist aber durchaus mit nur (in Summe) zwei elementen Möglich

[Joachim]

Hi,

Ich zähle bei deiner Lösung vier zusätzliche Elemente, das span-Element in der Überschrift sowie die Überschrift selbst

Nur weil Du nicht weisst was ich Dir mit "Blubber" sagen möchte lässt Du die h3 nicht gelten? Du bist gemein!
;-)

Gruesse, Joachim

[zaphod1984]

Ich habe 8 Bilder, 4 für die Ecken und 4 1-Pixel slices für den Rahmen dazwischen.

Ich werf mal noch ein Sprite mit in den Topf...

[suit]

Ich habe 8 Bilder, 4 für die Ecken und 4 1-Pixel slices für den Rahmen dazwischen.

Ich werf mal noch ein Sprite mit in den Topf...

Dafür brauchst du dann entweder 2 Sprites (bei flexibler Größe) oder bist auf eine maximale Ausdehnung des Kastens beschränkt.

[zaphod1984]

[...] oder bist auf eine maximale Ausdehnung des Kastens beschränkt.

Korrekt, aber png komprimiert Elemente, die sich wiederholen, ziemlich gut. (prefiltering und deflate)
Ein Sprite das 600x600 groß ist, tut da nicht weiter weh. (Und sollte locker ausreichen)

[franky]

Vielen herzlichen Dank für die ganzen hilfreichen Tipps, ich denke da ist das ein oder andere dabei das mir weiterhilft.

Viele Grüsse
Frank