[HTML] "Tabelle" mit DIV-Tags

[TheMiller]

Nein, die Breite habe ich nicht vorgegeben. Es sind ja drei Bilder. Das in der Mitte wird so oft wiederholt, wie die Ebene breit ist... oder verstehe ich dich da gerade falsch?

[Thorben77]

Du hast jeder Zelle mit Hintergrundbild ein width-Attribut mitgegeben. Das hat wahrscheinlich aber gar keine Auswirkungen auf die Gesamtbreite der Tabelle.

Zweiter Versuch:
CSS:

Code:

#left {
  background: url('linke Ecke') no-repeat left top;
  padding-top: Höhe der Hintergrundbilder;
}

#middle {
  background: url('mittlere Ecke ;-)') repeat-x top;
}

#right {
  background: url('rechte Ecke') no-repeat right top;
}

HTML:

Code:

<div id="middle">
  <div id="right">
    <div id="left">
      

Hier kommt der ganze Inhalt rein …</p> 
    </div>
  </div>
</div>

Auch wenn es nervig ist, soviel Zusatzmarkup schreiben zu müssen, aber es geht, soweit ich weiß, nicht anders.

[TheMiller]

Nein, geht leider auch nicht. Das 2. und das 3. Bild überlagern sich schon wieder und der ganze Text steht in der Titelleiste. Dabei wird das mittle Bild bis zum Ende der Div-Ebene gezogen, müsste aber dort aufhören, wo das 3. Bild beginnt.

Ich benutze IE7 und Vista. btw: FF zeigt es genauso an

[Thorben77]

Entspricht das Bild im Anhang so ungefähr dem, was du haben willst?

Ansonsten könnte es helfen, wenn du ein Online-Beispiel hättest, wie es aussehen soll.

[TheMiller]

So wäre das toll. Wenn möglich, dann sollte auch noch Text in die Titelleiste.

[TheMiller]

Hab es teilweise gelöst, das Aber steht unter der bisherigen Lösung

Code:

div#head1 { 
   height: 22px; 
    background-image: url(images/mi.gif);
   background-repeat:repeat-x;
   position:relative;
   padding:0px;
   margin:0px;
   float:left;
} 
       
div#head_left{
   width: 12px; 
   height: 22px; 
    background-image: url(images/le.gif); 
    float: left;
   position:relative;
   padding:0px;
   margin:0px;
} 
          
#head_right {
   width: 46px; 
   height: 22px; 
   background-image: url(images/re.gif); 
   position:relative;
   padding:0px;
   margin:0px;
}


<div>
 <div id="head_left"></div>
 <div id="head1">Ich bin ein kleiner Test, mit mehr Text....</div>
 <div id="head_right"></div>
 <div  style="background-color:#540403;">Bla bla 
Bla</div>
</div>

Soweit dazu. Jetzt ist folgendes: Ich habe mein linkes Bild mit den 12px, mein rechtes Bild mit dem 46px und meine Mitte ist variabel...

ABER:

Wenn ich das Fenster des IE oder eines anderen Browsers zusammenschiebe, verschieben sich die Container mit. Normalerweise würde eine Scrollleiste entstehen...

Bild im Anhang..

*snief* - ich bin stinksauer :wall:

[Thorben77]

Hmm, versuchs mal so:

Code:

div#head1 {
   height: 22px;
   background: url(images/mi.gif) repeat-x;
   padding: 0;
   margin: 0 26px 0 12px;
}
       
div#head_left{
   width: 12px;
   height: 22px;
   background: url(images/le.gif);
   float: left;
   padding: 0;
   margin: 0;
}
          
#head_right {
   float: right;
   width: 46px;
   height: 22px;
   background: url(images/re.gif);
   padding: 0;
   margin: 0;
}

<div id="head_left"></div>
<div id="head_right"></div>
<div id="head1">Ich bin ein kleiner Test, mit mehr Text....</div>
<div  style="background-color:#540403;">Bla bla 
Bla</div>

[TheMiller]

Hm das geht soweit, nur jetzt bricht nur noch der Text um, wenn die Zeile zu schmal wird. Gibt es ein Tag, dass automatisch die Größe auf die kleinste Größe anpasst? Bei Tabellen ist es ja so, dass sie nur so breit sind, dass der Text geradeso reinpasst (außer es wird explizit etwas anderes angegeben).

Dann wäre es echt perfekt!