DIV-Verschachtelung für variable Seitenmarkierung

[Gast3243456]

Hallo zusammen,

ich grüble nun schon mehrere Stunden über mein Problem, aber mangels sinnvoller Stichwörter für die Suche hier oder Google bin ich leider noch zu keiner Lösung gekommen :-(

Ich möchte eine variable Seitenleiste bauen, welche sich rechts vom Content befindet und vom Content mittels vertikaler Grafik abgetrennt werden soll. Die Grafik habe ich in 3 Teile zerschnitten, Oben, Mitte, Ende, wobei die "Mitte" 1px hoch ist und mittels repeat-x wiederholt werden soll.

Schematische Darstellung:

Die beiden grauen Enden sind etwa 50px hoch, und der Text soll 20px vom oberen Ende aus anfangen und 20px vor dem unteren Ende aufhören. Der orangene Teil soll halt mit dem Text skalieren.

Aber mir fällt keine sinnvolle DIV-Verschachtelung ein, sodass der Text oberhalb des orangenen Teils anfängt und unterhalb aufhört, die Grafik aber dennoch mit skaliert. :-(

Kann mir da jemand einen Tipp geben?

Besten Dank vorab!

[Gast3243456]

Bild nachgeliefert, ging irgendwie beim 1. mal nicht:

[Klawischnigg]

Hi there,

Bild nachgeliefert, ging irgendwie beim 1. mal nicht:

Auch wenn mich jetzt alle steinigen, aber das schaut entweder nach Verrenkung oder nach Tabelle aus...

[MudGuard]

Hi,

Bild nachgeliefert, ging irgendwie beim 1. mal nicht:

Auch wenn mich jetzt alle steinigen, aber das schaut entweder nach Verrenkung oder nach Tabelle aus...

Das schaut für mich nach 3 Hintergrund-Bildern aus - in geeigneter Reihenfolge angegeben, damit die Endstücke über dem wiederholten Mittelteil liegen. (Ich müßte jetzt auch erst raussuchen, in welcher z-Reihenfolge mehrere Hintergrundbilder im selben Element gerendert werden ...)

Ein Bild oben links, nicht wiederholt, ein Bild unten links, auch nicht wiederholt, und ein Bild oben links, aber in Y-Richtung wiederholt.

Wobei ich das wiederholte Bild nicht 1px hoch machen würde - mit 10px oder 16px Höhe ist die Datei nicht nennenswert größer, aber der Browser muß nicht so oft wiederholen (nach meiner Erfahrung geht das Rendern mit 16px-Bildchen flotter als bei 1px-Bildchen)

cu,
Andreas

[Gast3243456]

Ein Bild oben links, nicht wiederholt, ein Bild unten links, auch nicht wiederholt, und ein Bild oben links, aber in Y-Richtung wiederholt.

Das wollte ich vermeiden :-) ich probiere aber mal den Tipp von Herrmann aus, das sieht ja vielversprechend aus.

Wobei ich das wiederholte Bild nicht 1px hoch machen würde - mit 10px oder 16px Höhe ist die Datei nicht nennenswert größer, aber der Browser muß nicht so oft wiederholen (nach meiner Erfahrung geht das Rendern mit 16px-Bildchen flotter als bei 1px-Bildchen)

Danke für den Tipp, ist ja schnell gemacht.

[Herrmann]

So vielleicht: jsfiddle

Gruß H.

[Gast3243456]

Danke,

wenn ich die orangene Border durch das tatsächliche Bild ersetze, ist das quasi auch hinter den anderen beiden Bildern. Richtig?

Wäre ja dann auch die Lösung von MudGuard. Aber wenns so ist, dann ist es eben so :-)

Danke

[MrMurphy]

Hallo,

wieso bestehst du zwanghaft auf Bildern, die einfach nur Farben zeigen?

Gruss

MrMurphy

[Gast3243456]

wieso bestehst du zwanghaft auf Bildern, die einfach nur Farben zeigen?

Das war eine schematische Zeichnung. Die echten Bilder sind Grafiken. (auch wenn der letzte Satz irgendwie sinnlos klingt)

[MrMurphy]

Hallo

Die echten Bilder sind Grafiken.

Dann solltest du die uns auch zur Verfügung stellen. Wie sollen wir dir sonst konkret helfen?

wenn ich die orangene Border durch das tatsächliche Bild ersetze, ist das quasi auch hinter den anderen beiden Bildern. Richtig?

Nein. Border können nicht 1:1 durch Grafiken ersetzt werden. Hättest du darauf gleich hingewiesen anstatt nur auf grau und orange hätte Herrmann sich seine Zeit sparen können.

Gruss

MrMurphy

[MrMurphy]

Hallo

Nein. Border können nicht 1:1 durch Grafiken ersetzt werden. Hättest du darauf gleich hingewiesen anstatt nur auf grau und orange hätte Herrmann sich seine Zeit sparen können.

Das ist Quatsch. Ich hatte Herrmanns Lösung zunächst nicht richtig verstanden. Die kann doch als Vorlage genommen und entsprechend erweitert werden.

Gruss

MrMurphy

[MudGuard]

Hi,

Nein. Border können nicht 1:1 durch Grafiken ersetzt werden.

Wieso eigentlich nicht. border-image existiert. Und laut caniuse.com ist die Unterstützung dafür auch nicht schlecht.

Hättest du darauf gleich hingewiesen anstatt nur auf grau und orange hätte Herrmann sich seine Zeit sparen können.

Es war schon im Ausgangsposting davon die Rede, daß eine Graphik in 3 Teile zerschnitten wurde.

cu,
Andreas

[MrMurphy]

Hallo

Es war schon im Ausgangsposting davon die Rede, daß eine Graphik in 3 Teile zerschnitten wurde.

Aber nicht, das die etwas anderes als farbige Flächen enthalten sollen. Und farbige Flächen werden nicht mehr durch Grafiken dargestellt.

Wieso eigentlich nicht. border-image existiert. Und laut caniuse.com ist die Unterstützung dafür auch nicht schlecht.

Hm, background-image wird durch alle Browser unterstützt. Wofür werde ich mich dann wohl entscheiden?

Ich habe nach Vorlage von Herrmanns Idee mal zwei Seiten erstellt, eine mit background-color und eine mit background-image.

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_15_Gast3243456_01_mehrfarbiger_rand.html

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_15_Gast3243456_02_mehrfarbiger_rand.html

Gruss

MrMurphy

[Gast3243456]

Es war schon im Ausgangsposting davon die Rede, daß eine Graphik in 3 Teile zerschnitten wurde.

Aber nicht, das die etwas anderes als farbige Flächen enthalten sollen. Und farbige Flächen werden nicht mehr durch Grafiken dargestellt.

Doch drum "schematische Darstellung". Vereinfachung. Sagt sich halt leichter "das orangene Bild soll gestreckt werden" als "irgendwas in der Mitte der Linie". Aber egal, das nächste mal mach ichs halt Original :-)

So, aber dann hier mal nicht als Schema, sondern als Grafikentwurf.

Ich habe nach Vorlage von Herrmanns Idee mal zwei Seiten erstellt, eine mit background-color und eine mit background-image.

Danke, schau ich heute abend oder morgen mal genau an.

Viele Grüße

[Gunnar Bittersmann]

@@Gast3243456:

nuqneH

Ich habe nach Vorlage von Herrmanns Idee mal zwei Seiten erstellt, eine mit background-color und eine mit background-image.

Danke, schau ich heute abend oder morgen mal genau an.

Als schlechtes Beispiel zum Nicht-Nachmachen?

Qapla'

[Gast3243456]

Danke, schau ich heute abend oder morgen mal genau an.

Als schlechtes Beispiel zum Nicht-Nachmachen?

Sehr wertschätzend und überheblich. Genau das, was jedes Forum braucht.

Es kann gar kein schlechtes Beispiel sein, da es funktioniert. Es ist vielleicht aus deiner Sicht nicht optimal, aber das ist ja dann nur deine Meinung.

[Gunnar Bittersmann]

@@Gast3243456:

nuqneH

Sehr wertschätzend und überheblich. Genau das, was jedes Forum braucht.

Wenn ein Beispiel schlecht ist, dann nenne ich das auch schlecht. Das hat nichts mit Überheblichkeit zu tun.

Ein Beispiel, wo das HTML mit unnötigen Elementen vollgemüllt wird, um eine Darstellung zu erzielen, ist schlecht.

Es kann gar kein schlechtes Beispiel sein, da es funktioniert.

Tabellenlayout „funktioniert“ auch. Nur dass es nicht funktioniert.

Es ist vielleicht aus deiner Sicht nicht optimal, aber das ist ja dann nur deine Meinung.

Meine Sicht gründet sich auf Kenntnis.

Qapla'

[Gunnar Bittersmann]

@@MrMurphy:

nuqneH

Hm, background-image wird durch alle Browser unterstützt.

Multiple backgrounds auch; border-image bis auf Opera Mini auch. IE-8-Nutzer können auf den Effekt verzichten.

Wofür werde ich mich dann wohl entscheiden?

Für eine Variante ohne div-Suppe. Also gegen deine beiden.

Qapla'

[Gunnar Bittersmann]

@@Gast3243456:

nuqneH

Aber mir fällt keine sinnvolle DIV-Verschachtelung ein,

Keins der div ist sinnvoll. Weg damit!

Den Effekt erreicht du mit border image.

Beispiel.

Und selbt mit Hintergrundbildern ließe sich der Effekt faken, schließlich kann man davon mehrere für ein Element verwenden.

Beispiel.

Qapla'

[MudGuard]

Hi,

Den Effekt erreicht du mit border image.
Beispiel.
Und selbt mit Hintergrundbildern ließe sich der Effekt faken, schließlich kann man davon mehrere für ein Element verwenden.
Beispiel.

Sag ich doch.

cu,
Andreas