Gast3243456: DIV-Verschachtelung für variable Seitenmarkierung

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!

  1. Bild nachgeliefert, ging irgendwie beim 1. mal nicht:

    1. 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...

      1. 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

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        1. 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.

    2. So vielleicht: jsfiddle

      Gruß H.

      1. 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

        1. Hallo,

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

          Gruss

          MrMurphy

          1. 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)

            1. 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

              1. 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

              2. 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

                --
                Warum nennt sich Andreas hier MudGuard?
                O o ostern ...
                Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
                1. 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

                  1. 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

                    1. @@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'

                      --
                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                      1. 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.

                        1. @@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'

                          --
                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  2. @@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'

                    --
                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. @@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'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. 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

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.