Denny: 3 Divs nebeneinander mit dynamischer Breite

Ahoi,

auf einer Website möchte ich folgendes realisieren:
es gibt mehrere Überschriften <h4>, welche zentriert in einem Elternelement (z.b. #container) stehen und nun jeweils davor und dahinter einen Strich (Grafik, Ornament,...) erhalten sollen. Dies wollte ich mit 3 nebeneinander floatenden Divs erreichen.
Also ca. so:
________________ ________________________ ______________
|      DIV1     |           DIV2         |      DIV3    |
|               |                        |              |
|~|Überschrift mit Breite X||
|               |                        |              |
|_______________|________________________|______________|

Wobei dann natürlich Breite1 + Breite2 + Breite3 = Breite#container. Das Problem hierbei: die Breite von DIV2 ist je nach Überschrift halt größer oder kleiner. Es sind also alle Breiten dynamisch, da von Breite2 abhängig.
Weiß jemand, wie man dies realisieren kann? Oder bin ich vll. auf dem falschen Pfad (3 Divs) mit :before und :after ist es ja nicht realisierbar.

  1. Viel einfacher erreichst Du das mit dem folgenden Aufbau:

    HTML:
    <h1><span>Überschrift</span></h1>

    CSS:

    h1 { background: #FFFFFF url(ornament.gif) repeat-x 0 50%; }  
    h1 span { background: #FFFFFF; }
    

    Gruß, LX

    --
    RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)
    1. Viel einfacher erreichst Du das mit dem folgenden Aufbau:

      HTML:
      <h1><span>Überschrift</span></h1>

      CSS:

      h1 { background: #FFFFFF url(ornament.gif) repeat-x 0 50%; }

      h1 span { background: #FFFFFF; }

      
      >   
      > Gruß, LX  
        
      Ah, danke für die Antwort. Das Ganze klappt aber nur solange der Hintergrund, auf dem sich h1 und span befinden, einfarbig ist. In meinem Fall ist es aber eine Textur. Gibts dafür vll. auch Lösungen?  
        
      mfg
      
      1. Hallo,

        HTML:
        <h1><span>Überschrift</span></h1>

        CSS:

        h1 { background: #FFFFFF url(ornament.gif) repeat-x 0 50%; }

        h1 span { background: #FFFFFF; }

          
        
        > Ah, danke für die Antwort. Das Ganze klappt aber nur solange der Hintergrund, auf dem sich h1 und span befinden, einfarbig ist.  
          
        wie kommst du darauf? Das h1-Element geht, solange man nichts dagegen unternimmt, über die ganze verfügbare Breite und stellt den Hintergrund zur Verfügung. Und das span-Element ist nur so breit ist wie sein Inhalt und überdeckt den h1-Hintergrund mit seiner eigenen Hintergrundfarbe (oder seinem Hintergrundbild). Eventuell möchtest du dem h1-Element noch text-align:center geben, damit sein Inline-Inhalt, also das span-Element, in der Mitte sitzt.  
          
        
        > In meinem Fall ist es aber eine Textur.  
          
        Ja und?  
          
        
        > Gibts dafür vll. auch Lösungen?  
          
        Ja, wie von LX vorgeschlagen.  
          
        Ciao,  
         Martin  
        
        -- 
        Wer keiner Fliege etwas zuleide tut, darf sich nicht über die Maden im Fleisch wundern.  
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        
        1. * zentrieren mit margin-left: auto, margin-right: auto
          * keinen Hintergrund festlegen --> transparent
          * einfarbige Grafiken mit border-left und border-right bestimmen
          * mehrfarbige Grafiken mit border-image oder ::before und ::after

          Die Striche/Grafiken sollen ja horizontal verlaufen (vom Seitenrand bis zur Überschrift), mit border-left / border-right bekomme ich na nur senkrechte Striche. Border-image unterstützen zusätzlich wiederum nicht alle Browser. Mit :before und :after kann ich zwar meine horizontale Grafik einbinden, aber nur mit fester Größe. Manchmal ist der Abstand Seitenrand-Überschrift 100px, manchmal 150px, usw.

          HTML:
          <h1><span>Überschrift</span></h1>

          CSS:

          h1 { background: #FFFFFF url(ornament.gif) repeat-x 0 50%; }

          h1 span { background: #FFFFFF; }

          
          >   
          > > Ah, danke für die Antwort. Das Ganze klappt aber nur solange der Hintergrund, auf dem sich h1 und span befinden, einfarbig ist.  
          >   
          > wie kommst du darauf? Das h1-Element geht, solange man nichts dagegen unternimmt, über die ganze verfügbare Breite und stellt den Hintergrund zur Verfügung. Und das span-Element ist nur so breit ist wie sein Inhalt und überdeckt den h1-Hintergrund mit seiner eigenen Hintergrundfarbe (oder seinem Hintergrundbild). Eventuell möchtest du dem h1-Element noch text-align:center geben, damit sein Inline-Inhalt, also das span-Element, in der Mitte sitzt.  
            
          Das span-Element soll aber keinen Hintergrund haben. Die Hintergründe sind nämlich folgendermaßen verteilt:  
            
          Seitenhintergrund -> darüber: Wrapper-BG (0.9 Transparenz weiß) -> darüber: H1 mit evtl. Strich/Grafik rechts und links.  
            
          Wenn ich dem span-Element nun einen Hintergrund zuweise setzt es sich vom Wrapper ab, da man dort dann keine Transparenz mehr hat. Hier mal zur Verdeutlichung ein Link:  
          [Beispielseite](http://technosatz.de/download/hwk/index.php?option=com_content&view=article&id=2&Itemid=2)  
          Gemeint sind hier die h4-Überschriften ("interaktive Animation während des Balls", "Die perfekte musikalische Begleitung  
          zum „Welcome“ im Foyer",...)
          
          1. Hi,

            Mit :before und :after kann ich zwar meine horizontale Grafik einbinden, aber nur mit fester Größe.

            Wenn du content:url() dafür verwendest, ja.

            Du kannst diesen Pseudoelementen aber auch einfach nur „nichts“ als content geben, und ihnen dann ein Hintergrundbild verpassen.
            Auf die gewünschte Breite könntest du sie bspw. per absoluter Positionierung bekommen - „ausreichend“ große Breite geben, und „überstehendes“ per overflow abschneiden.

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
            1. Du kannst diesen Pseudoelementen aber auch einfach nur „nichts“ als content geben, und ihnen dann ein Hintergrundbild verpassen.
              Auf die gewünschte Breite könntest du sie bspw. per absoluter Positionierung bekommen - „ausreichend“ große Breite geben, und „überstehendes“ per overflow abschneiden.

              Ich habs mal mit

                
              h4:before{  
               content: "";  
               position: absolute;  
               width: 900px;  
               overflow: hidden;  
               background: url(line.png);  
              
              

              klappt leider auch nicht. Sobald content „leer“ ist wird auch die Hintergrundgrafik nicht angezeigt. Wenn etwas vorhanden ist (z.B. content:".") zeigt er das :before-Element auch an, in gewünschter Breite von 900px, schneidet aber durch overflow natürlich nichts ab.

              1. Hi,

                Sobald content „leer“ ist wird auch die Hintergrundgrafik nicht angezeigt.

                „Leer“ kann bspw. auch ein Leerzeichen sein.

                Wenn etwas vorhanden ist (z.B. content:".") zeigt er das :before-Element auch an, in gewünschter Breite von 900px, schneidet aber durch overflow natürlich nichts ab.

                Natürlich nicht, dass ist ja auch die falsche Stelle für das overflow.

                MfG ChrisB

                --
                RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
      2. Om nah hoo pez nyeetz, Denny!

        Ah, danke für die Antwort. Das Ganze klappt aber nur solange der Hintergrund, auf dem sich h1 und span befinden, einfarbig ist. In meinem Fall ist es aber eine Textur. Gibts dafür vll. auch Lösungen?

        Wenn es dir nur um die Striche (=Grafiken) geht, gibt es auch folgende Möglichkeit:

        <h1>Überschrift</h1>

        • zentrieren mit margin-left: auto, margin-right: auto
        • keinen Hintergrund festlegen --> transparent
        • einfarbige Grafiken mit border-left und border-right bestimmen
        • mehrfarbige Grafiken mit border-image oder ::before und ::after

        Matthias

        --
        1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif