Wie Coden?

[mschoening]

So ich habe mal eine Frage an euch. Wie würdet ihr den angehängten Screenshot coden? Eigentlich kommt nur eine Tabelle in Frage aber da habe ich das Problem, dass man einer <tr /> kein Hintergrundbild verpassen kann. Bitte auch die Schatten bei den horizontalen Balken beachten! Jetzt meine zwei vorschläge:

A) Den Balken slicen und jeder <td> ein eigenes Bild verpassen.​

oder:

B) Auf das Tabellen markup verzichten und <dl> verwenden (bläht das Markup aber unnötig auf wie ich finde).​

Was meint ihr?

Screenshot:

 

[berlina]

Die Tabelle wird doch sicher automatisch generiert oder?

Dann A) oder CSS mit Div's und entsprechenden Background Images.

 

[Witti]

Ich hab das mal auf die schnelle nachgebaut:
http://www.wittberger.net/at-list/

Werkzeuge:
- CSS
- DIVs
- SPANs

Source inkl. Bildchen hab ich dem Post angehängt.

Gibt sicher noch andere Lösungen aber heute ist es spät und mehr ist mir um die Uhrzeit nicht mehr eingefallen

Viel Spaß damit ich hoffe es hilft.

 

[mschoening]

Hi,
vielen Dank für die Beispiele, etc! Ich habe das Projekt gerade auf meiner Prioritäten-Liste nach unten geschoben! Wenn ich mich entschieden habe poste ich das Ergebnis!

@Witti: Thanks für dein Beispiel. Habe mich aber für eine Tabelle entschieden.

 

[mschoening]

Achso, ich hab vergessen meinen Ansatz zu posten: da jede <tr /> gleich hoch ist bekommt das <table /> Element einen sich wiederholenden Hintergrund!

 

[Slashwalker]

by the way, wie kommst du darauf dass man einer TR kein Background verpassen kann?

 

[mschoening]

Geht nicht. Zu mindest nicht browserübergreifend!

 

[Slashwalker]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
tr{
    background:url(kachel.jpg);
    }
</style>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Funzt in Firefox, Internet Explorer 6 und Safari (Windows)

 

[mschoening]

Nope, bei Safari zum Beispiel wird dann in jeder <td /> das Bild wiederholt anstatt, dass es nur einmal für die ganze Reihe angezeigt wird!

LG,
Max