linien in css gestalten

wallhall · 25.08.2005, 10:46

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

wallhall · 25.08.2005, 14:27

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

gibt es alternativen?

jak · 25.08.2005, 15:25

Kann man sich das irgendwo anschauen?

lg,
jak

wallhall · 26.08.2005, 07:58

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

jak · 26.08.2005, 08:40

Meinst du so:

Code:

<html>
<head>
<title>Verbindungstest</title>
<style>
#verbindung_links{
    border:1px solid red;
    border-right-width:0px;
}
#verbindung_rechts{
    border:1px solid red;
    border-left-width:0px;
}
</style>
</head>
<body>
<table id="testtab" cellspacing="0">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td id="verbindung_links">6</td>
    <td id="verbindung_rechts">7</td>
    <td>8</td>
  </tr>
  <tr>
    <td colspan="4">9</td>
  </tr>
</table>
</body>

jak

wallhall · 26.08.2005, 10:57

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

wallhall · 26.08.2005, 14:38

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?)

jak · 26.08.2005, 16:56

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

wallhall · 27.08.2005, 14:58

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

25.08.2005, 10:46	#1
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	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 ____________________________________ lg wallhall

25.08.2005, 14:27	#2
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	hmm, ist die lösung doch schwieriger als angenommen?? gibt es alternativen? ____________________________________ lg wallhall

25.08.2005, 15:25	#3
jak Inventar Registriert seit: 13.06.2001 Beiträge: 1.830	Kann man sich das irgendwo anschauen? lg, jak ____________________________________ Join the DNRC \| Godwin\'s Law (thx@stona) Documentation is like sex: If it\'s good, it\'s very, very good. If it\'s bad, it\'s better than nothing. \"In theory, theory and practice are the same. In practice, they are not\" (Lawrence Berra)

26.08.2005, 07:58	#4
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	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 ____________________________________ lg wallhall

26.08.2005, 10:57	#6
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	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> ---------------------------------------------------------------------- ____________________________________ lg wallhall

26.08.2005, 14:38	#7
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	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?) ____________________________________ lg wallhall

26.08.2005, 16:56	#8
jak Inventar Registriert seit: 13.06.2001 Beiträge: 1.830	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 ____________________________________ Join the DNRC \| Godwin\'s Law (thx@stona) Documentation is like sex: If it\'s good, it\'s very, very good. If it\'s bad, it\'s better than nothing. \"In theory, theory and practice are the same. In practice, they are not\" (Lawrence Berra)

27.08.2005, 14:58	#9
wallhall Senior Member Registriert seit: 13.02.2003 Beiträge: 149	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 ____________________________________ lg wallhall

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)