[HTML] "Tabelle" mit DIV-Tags

[TheMiller]

Hallo,

ich habe ich, warum auch immer, davon überzeugen lassen, dass Divs zum designen besser geeignet sind als Tabellen. Jetzt versuche ich (vergeblich) ein tabellenähnliches Konstrukt mit divs zu erstellen. Doch wie ich es mache, es haut nie richtig hin.

Ich würde gerne eine Box erstellen, die links und rechts abgerundete Kanten hat (sprich: 3 Bilder in der oberen Zeile). Darunte soll es möglich sein, einen Text zu verfassen.

Wie mache ich das mit Div-Tags? Mit Sicherheit eine ganz easy Sache...

Danke!

[mkinzler]

http://www.stichpunkt.de/css/formulare.html

[TheMiller]

Ok danke,

das habe ich verstanden. Aber ich habe ein Problem damit, die Bilder korrekt nebeneinander zu setzen. Ich weiß ja vorher nicht, wie breit das Bild in der Mitte der Box ist. Das Bild wird ja x-mal wiederholt. Danach soll die rechte Abschlussgrafik gesetzt werden. Also habe ich 3 DIVs alleine für die erste Zeile. Muss ich dem 3. Div jetzt explizit sagen, bei wieviel Pixeln er beginnen soll, oder kann ich das im CSS so angeben, dass es sich automatisch an das Ende des Mittelteils setzt?

[mkinzler]

Zitat:

bei wieviel Pixeln er beginnen soll, oder kann ich das im CSS so angeben, dass es sich automatisch an das Ende des Mittelteils setzt?

Bei keiner Angabe ist das Standard

[TheMiller]

Ok, hier mal mit meinem Code:

Code:

CSS-Datei:

div#content {
   position:relative;
   margin:0px;
   background-color:#540403;
}

div#le {   
   background-image:url(images/le.gif);
   background-repeat:no-repeat;
   top:0px;
   left:0px;
   width:12px;
   height:22px;
   position:relative;
   margin:0px;
}

div#mi {
   background-image:url(images/mi.gif);
   background-repeat:repeat-x;
   position:relative;
   padding-top:3px;
   padding-left:15px;
   margin:0px;
   height:22px;
}

div#re {
   background-image:url(images/re.gif);
   background-repeat:no-repeat;
   position:relative;
   width:46px;
   height:22px;
   margin:0px;
}


HTML-DATEI

<div style="width:150px; position:absolute; height:300px;">
 <div id="le">
  <div id="mi" style="width:150px;">
   <div id="re"></div>
  </div>
 </div>
</div>

So gesetzt wie oben passiert folgendes:

Das linke Bild wird richtig angezeigt und das mittlere Bild nach dem linken Bild "width-mal" wiederholt. Das rechte Bild liegt über den ersten beiden. Aber wieso?

[S2B]

Vielleicht so:

Code:

<div style="background-image: url(mitte.gif); background-repeat: repeat-x">
  <div style="float: left; background-image: url(links.gif); background-repeat: no-repeat"></div>
  <div style="float: right; background-image: url(rechts.gif); background-repeat: no-repeat"></div>
  <div style="clear: both"></div>
</div>

Wahrscheinlich kannst du das ganze aber auch ohne float: right lösen, nur müsste ich das dann vorher ausprobieren. *g* Das clear-Div wirst du dann auch los, wenn du dem linken und dem rechten "Bild" die gleiche Höhe gibst.

[TheMiller]

Das funktioniert leider auch nicht ganz... Die ersten beiden Bilder werden zwar korrekt angezeigt, aber das dritte befindet sich unter dem Bild 1, also unter der Reihe in der es angezeigt werden soll und ist ganz links positioniert...

[Thorben77]

Wenn ich richtig verstanden habe, willst du sowas haben, oder?

[TheMiller]

Naja...fast

Hier mal in Tabellenform

Code:

<table border="0" cellspacing="0">
 <tr>
  <td background="images/links.gif" width="20"></td>
  <td style="background-image:url(images/mitte.gif); background-repeat:repeat-x; width="20"></td>
  <td background="images/rechts.gif" width="20"></td>
 </tr>
 <tr> 
  <td colspan="3">Hier kommt der ganze Inhalt rein</td>
 </tr>
</table>

Die Zeile oben ist also ein zusammengesetztes Bild mit runden Ecken. Darunter steht der Inhalt...
Eigentlich recht simpel in Tabellen... Das Konstrukt in DIVs wollte ich haben. Bekomme es aber nicht hin.

:wall:

[Thorben77]

Dein Beispiel ließe sich recht einfach umsetzen, da du die Gesamtbreite festgelegt hast:

Code:

div {
  background: url(Pfad des Bildes) no-repeat top;
  padding-top: Höhe des Bildes;
}

<div>
  

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

Ich vermute aber mal, dass die Breite des Inhalts nicht fest sein soll, oder?

Nebenbei:

Das ist syntaktisch falsch, da fehlt ein Anführungszeichen am Ende der CSS-Angaben:

Code:

<td style="background-image:url(images/mitte.gif); background-repeat:repeat-x; width="20"></td>

So wärs besser:

Code:

<td style="background: url('images/mitte.gif') repeat-x; width: 20px;"></td>

[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!