Antworten zum Thema „[CSS]Problem bei Tabelle mit Angabe von 'position' aber ohne 'top'-Eigenschaft“

mirko2324 · 08.03.2010

Hallo,

ich bin gerade dabei ein Prozessflussdiagramm zu erstellen. Habe auch schon eine erste Version fertig. Vom Aussehen her passt es eigentlich schon soweit. Allerdings gefällt es mir noch nicht so ganz, dass ich in jeder Tabellenzeile die top-Position angeben muss. Anders hab ich es allerdings bisher noch nicht hinbekommen.

Hier mein bisheriger Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Language" content="de" />
<style type="text/css">
<!--
table
{
    empty-cells:show;
    border-collapse:collapse;
}

table tr
{
    position:absolute;
}

table tr td
{
    border-style:none;
    border-width:1px;
    border-color:black;
    width:141px;
    height:99px;
    padding:0px;
    margin:0px;
    text-align:center;
}

table tr td table
{
    width:141px; /* für IE */
    position:absolute;
    top:0px;
}

img
{
    width:141px;
    height:99px;
}
-->
</style>
</head>
<body>

<table style="position:relative;">
<tr style="top:8px;">
<td><img src="aufgabe.png" alt="" /><table><tr><td>AG 10</td></tr></table></td>
<td><img src="pfeil_rechts.png" alt="" /></td>
<td><img src="aufgabe.png" alt="" /><table><tr><td>Prüfung</td></tr></table></td>
<td><img src="pfeil_rechts.png" alt="" /><table><tr><td style="padding-bottom:30px;">n. i. O.</td></tr></table></td>
<td><img src="aufgabe.png" alt="" /><table><tr><td>Aufgabe n. i . O.</td></tr></table></td>
</tr>
<tr style="top:107px;">
<td><img src="pfeil_runter.png" alt="" /></td>
<td><img src="pfeil_links.png" alt="" /></td>
<td><img src="linie_onl.png" alt="" /><table><tr><td style="padding-bottom:30px;">i. O.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table></td>
<td></td>
<td></td>
</tr>
<tr style="top:206px;">
<td><img src="aufgabe.png" alt="" /><table><tr><td>AG 20</td></tr></table></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="top:305px;">
<td><img src="pfeil_runter.png" alt="" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="top:404px;">
<td><img src="aufgabe.png" alt="" /><table><tr><td>AG 30</td></tr></table></td>
<td><img src="pfeil_rechts2.png" alt="" /></td>
<td><img src="aufgabe.png" alt="" /><table><tr><td>AG 35</td></tr></table></td>
<td></td>
<td></td>
</tr>
<tr style="top:503px;">
<td><img src="pfeil_runter.png" alt="" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="top:602px;">
<td><img src="raute.png" alt="" /><table><tr><td>AG 50</td></tr></table></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Wenn ich es ohne top-Position probiere siehts katastrophal aus und ich bekomms auch nicht sauber hin.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Language" content="de" />
<style type="text/css">
<!--
table
{
    empty-cells:show;
    border-collapse:collapse;
}

table tr
{
    position:relative;
    height:99px;
}

table tr td
{
    width:141px;
    height:99px;
    padding:0px;
    margin:0px;
    text-align:center;
}

table tr td table
{
    width:141px; /* für IE */
    position:relative;
    top:-99px;
}
-->
</style>
</head>
<body>

<table>
<tr>
<td><img src="aufgabe.png" alt="" /><table><tr><td>AG 10</td></tr></table></td>
<td><img src="pfeil_rechts.png" alt="" /><table><tr><td>&nbsp;</td></tr></table></td>
<td><img src="aufgabe.png" alt="" /><table><tr><td>Prüfung</td></tr></table></td>
<td><img src="pfeil_rechts.png" alt="" /><table><tr><td style="padding-bottom:30px;">n. i. O.</td></tr></table></td>
<td><img src="aufgabe.png" alt="" /><table><tr><td>Aufgabe n. i. O.</td></tr></table></td>
</tr>
<tr>
<td><img src="pfeil_runter.png" alt="" /></td>
<td><img src="pfeil_links.png" alt="" /></td>
<td><img src="linie_onl.png" alt="" /><table><tr><td style="padding-right:40px;padding-bottom:30px;">i. O.</td></tr></table></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="aufgabe.png" alt="" /><table><tr><td>AG 20</td></tr></table></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="pfeil_runter.png" alt="" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="aufgabe.png" alt="" /><table><tr><td>AG 30</td></tr></table></td>
<td><img src="pfeil_rechts2.png" alt="" /></td>
<td><img src="aufgabe.png" alt="" /><table><tr><td>AG 35</td></tr></table></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="pfeil_runter.png" alt="" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="raute.png" alt="" /><table><tr><td>AG 50</td></tr></table></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Die Bilder haben alle eine Auflösung von 141x99. Bei Bedarf kann ich diese natürlich noch hochladen.

Hat vielleicht jemand anders eine Idee wie ich es ohne top-Angabe hinbekomme?

sokie · 08.03.2010

AW: [CSS]Problem bei Tabelle mit Angabe von 'position' aber ohne 'top'-Eigenschaft

wenn man sieht, dass es in den table rows jeweils nur eine Datenzelle mit Inhalt gibt, kann man davon ausgehen, dass es sich a. nicht um tabellarische Daten handelt, und daraus folgend b. die Tabelle nicht der geeignete Behälter ist.
Mit passenden Elementen, zB. div, würde sich die Problematik möglicherweise gar nicht ergeben und das absolute Positionieren gar nicht notwendig sein.