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