linien in css gestalten
 

hallo leute,

ich möchte verschiedene tabellenzellen die ich absolut positioniere mit horizontalen und vertikalen linien verbinden.

ich zerbrich mir schon mehrere tage den kopf und komme auf keine lösung (bin halt ein "neuling" :) )

wie würdet ihr vorgehen?

lg wallhall

hmm, ist die lösung doch schwieriger als angenommen??

gibt es alternativen?

Kann man sich das irgendwo anschauen?

lg,
jak

hallo jak,

nein leider nicht, aber ich kann versuchen es besser zu erklären.

es sind mehrere zellen die ich über den bildschirm verteile, einige dieser zellen möchte ich grafisch mit linien verbinden um eine übersicht herzustellen.
damit erkannt werden kann dass zelle A und zelle B zusammengehören.
ich hoffe das war einigermaßen verständlich :)

Meinst du so:
jak

hallo jak, so meine ich es:

code:
----------------------------------------------------------------------
<div style="position:absolute; left:500px; top:200px; width:100; height:80px; z-index:0;">

<table width="100" border="1" cellspacing="0" cellpadding="0" height="80" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="20">
<div align="center">leer</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td>
<div align="center">leer</div>
</td>
</tr>
</table>
</div>



<div style="position:absolute; left:300px; top:300px; width:100; height:80px; z-index:0;">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="80" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="20">
<div align="center">leer</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td>
<div align="center">... noch leer</div>
</td>
</tr>
</table>
</div>

<div style="position:absolute; left:700px; top:300px; width:100; height:80px;">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="80" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="20">
<div align="center">leer</div>
</td>
</tr>
<tr bgcolor="#AB8B97">
<td>
<div align="center">noch leer ...</div>
</td>
</tr>
</table>
</div>



<div style="position:absolute; left:300px; top:400px; width:100; height:80px;">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="80" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="20">
<div align="center">leeeer</div>
</td>
</tr>
<tr bgcolor="#AB8B97">
<td>
<div align="center">ablolute leere</div>
</td>
</tr>
</table>
</div>

<div style="position:absolute; left:400px; top:400px; width:100; height:80px;">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="80" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="20">
<div align="center">leer</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td>
<div align="center">auch noch leer ....</div>
</td>
</tr>
</table>
</div>
----------------------------------------------------------------------

ist meine frage so unverständlich?

ich möchte einige frei positionierte "kästchen" mit schwarzen linien (oder strichen oder nennt es wie ihr wollt) verbinden.
ist das in css nicht möglich??

oder kann ich nur eine blinde tabelle erstellen und einige zellen mit farbe füllen um den eindruck einer linie zu erwecken (ist aber sicher nicht besonders "sauber", oder?)

O.k ch verstehe jetzt was du meinst. In HTML+CSS ist so etwas nicht vorgesehen. Horizontale und vertikale Linien könntest du hinbekommen indem du entweder Rahmen verwendest oder indem du den <hr /> Tag zweckentfremdest. Damit sind aber keine Diagonalen möglich.

Ich würde es so machen, das die Linien ein Hintergrundbild sind (als .gif oder .png sollte es nicht besonders groß sein) und die Boxen danach ausgerichtet werden.

jak

hallo jak,

danke für deine antwort :) . eigentlich ist es schade dass css diese möglichkeit nicht untertützt. ich denke es gibt viele bereiche wo es eingesetzt werden könnte.

nun, ich werde es so versuchen wie du es vorschlägst.

danke und