M
mirko2324
Guest
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:
Wenn ich es ohne top-Position probiere siehts katastrophal aus und ich bekomms auch nicht sauber hin.
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?
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. </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>
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> </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>
Hat vielleicht jemand anders eine Idee wie ich es ohne top-Angabe hinbekomme?