nicht angemeldet
Tabellen gestalten Link über ganze Zelle
0 0 0 0 0 0 2 0
Tabellen gestalten Link über ganze Zelle
Der MartinHallo allerseits!
Mir stellt sich gerade folgendes Problem:
Ich will einen Link in einer Tabelle erstellen
- die in ihren Zellen ein Padding (von 5px) verwendet
- der eine komplette Tabellenzelle ausfüllt
- nicht am linken Rand der Zelle klebt
- linksbündig (nicht zentriert) dargestellt wird
- und dabei kein JavaScript verwenden.
Im Code habe ich meine bisherigen Überlegungen zum Thema hinterlegt.
Link 1 füllt aufgrund des Paddings nicht die ganze Zelle aus,
Link 2 fehlt was in der Höhe und er klebt am linken Rand,
Link 3 klebt am linken Rand, füllt aber immerhin die ganze Zelle aus,
Link 4 schießt am rechten Rand über das Ziel hinaus, klebt aber nicht mehr am linken Rand.
Perfekt wäre also ein Link, der die Zelle ausfüllt wie Link 3 und an der Stelle von Link 4 erscheint. Ich hoffe mein Problem ist damit klar. Über jegliche Hilfe würde ich mich freuen!
Beste Grüße
Mat
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Table test</title>
<style type="text/css">
table
{ width: 100%; }
td
{ padding: 5px;
border: 1px solid black; }
.td_link
{ padding: 0px; }
td a
{ color: black;
display: block;
margin: 0px;
height: 100%;
width: 100%; }
td a:hover
{ color: white;
background-color: black; }
.padding
{ padding: 5px 0px 5px 0px; }
.padding_zuviel
{ padding: 5px 0px 5px 5px; }
</style>
</head>
<body>
<table>
<tr>
<td>inhalt</td>
<td>
<a href="test.htm">test</a>
</td>
<td>inhalt</td>
</tr>
<tr>
<td>inhalt</td>
<td class="td_link">
<a href="test.htm">zelle ohne padding</a>
</td>
<td>inhalt</td>
</tr>
<tr>
<td>inhalt</td>
<td class="td_link">
<a href="test.htm" class="padding">link mit padding</a>
</td>
<td>inhalt</td>
</tr>
<tr>
<td>inhalt</td>
<td class="td_link">
<a href="test.htm" class="padding_zuviel">zuviel padding</a>
</td>
<td>inhalt</td>
</tr>
</table>
</body>
</html>
-
Hi,
Mir stellt sich gerade folgendes Problem:
Ich will einen Link in einer Tabelle erstellenTabellen sind für die Darstellung tabellarischer Daten gedacht.
Du solltest sie nicht zum Layouten missbrauchen.- die in ihren Zellen ein Padding (von 5px) verwendet
- der eine komplette Tabellenzelle ausfüllt
- nicht am linken Rand der Zelle klebt
- linksbündig (nicht zentriert) dargestellt wird
- und dabei kein JavaScript verwenden.
Schön - und was willst du *eigentlich* erreichen?
Wenn du bspw. eine Navigation erstellen willst - dann solltest du diese als Liste von Links auszeichnen.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Tabellen sind für die Darstellung tabellarischer Daten gedacht.
Du solltest sie nicht zum Layouten missbrauchen.Schön - und was willst du *eigentlich* erreichen?
Wenn du bspw. eine Navigation erstellen willst - dann solltest du diese als Liste von Links auszeichnen.In meinen tabellarischen Daten befinden sich Links. Diese will ich wie beschrieben darstellen.
Ich will meine Tabelle also weder zum Layouten missbrauchen, noch eine Navigation darin unterbringen.
Einfach nur den Stil meiner Links in einer ganz normalen Tabelle verändern.Beste Grüße
-
Hi,
In meinen tabellarischen Daten befinden sich Links. Diese will ich wie beschrieben darstellen.
Na dann fehlt dir vermutlich einfach nur noch die Darstellung des Links als block?
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
In meinen tabellarischen Daten befinden sich Links. Diese will ich wie beschrieben darstellen.
Na dann fehlt dir vermutlich einfach nur noch die Darstellung des Links als block?
MfG ChrisB
td a { color: black; display: block; margin: 0px; height: 100%; width: 100%; }Ist bereits ein block. Ich habe probleme mit dem Padding. Der Code ist eine Vollständige Seite. Hast du dir die Seite schon angeschaut? Wenn nicht wird dir vielleicht klar was mein Problem ist, wenn du dir den Code eben in eine Datei kopierst und im Browser anzeigen lässt.
Beste Grüße
-
Hi,
bitte sinnvoll zitieren, nicht einfach alles, danke.
Der Code ist eine Vollständige Seite. Hast du dir die Seite schon angeschaut? Wenn nicht wird dir vielleicht klar was mein Problem ist, wenn du dir den Code eben in eine Datei kopierst und im Browser anzeigen lässt.
td a
{ color: black;
display: block;
margin: 0px;
height: 100%;
width: 100%; }> > Ist bereits ein block. Ich habe probleme mit dem Padding. Oder du hast Probleme mit dem Box Model, bzw. dem Verständnis dessen. Klar wird das ganze breiter, als du gerne hättest, wenn du padding \*und\* 100% Breite vergibst. MfG ChrisB -- RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Oder du hast Probleme mit dem Box Model, bzw. dem Verständnis dessen.
Klar wird das ganze breiter, als du gerne hättest, wenn du padding *und* 100% Breite vergibst.Ich verstehe sehr genau, _warum_ das alles so dargestellt wird, _wie_ es dargestellt wird. Ich bin nur auf der Suche nach einer Möglichkeit das ganze so darzustellen, wie ich es beschrieben habe, da mir die Ideen ausgegangen sind. Kann von mir aus auch ein völlig anderer Lösungsansatz sein. Die einzige Voraussetzung für die Lösung sollte sein, dass das padding im <td> bestehenbleibt.
-
Hi,
Die einzige Voraussetzung für die Lösung sollte sein, dass das padding im <td> bestehenbleibt.
Das ist ja Unfug: Du forderst explizit, dass der Link als Inhalt der Zelle diese komplett ausfüllen soll - und arbeitest dann mit dem padding für TD „dagegen“.
Wenn du diesen Widerspruch unbedingt auf Teufel komm raus beibehalten willst, dann helfen höchstens noch negative Margins für den Link. Das wäre aber die „von hinten durch die Brust ins Auge“-Variante.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Wenn du diesen Widerspruch unbedingt auf Teufel komm raus beibehalten willst, dann helfen höchstens noch negative Margins für den Link. Das wäre aber die „von hinten durch die Brust ins Auge“-Variante.
td {padding: 5px;} td a {display: block; height: 100%; width: 100%; margin: -5px -5px -5px -5px; padding: 5px 5px 5px 5px;}Genau diese „von hinten durch die Brust ins Auge“-Variante ist es, was ich gesucht habe. Bin ich selbst nicht drauf gekommen. Besten Dank!
-
Hallo,
margin: -5px -5px -5px -5px;
padding: 5px 5px 5px 5px;}wenn du uns nun noch erklärst, *warum* du das so umständlich haben möchtest, anstatt die einander aufhebenden Werte einfach auf 0 zu setzen, haben wir vielleicht alle was davon.
Ciao,
Martin--
Success should be measured not so much by the position that one has reached in life,
but by the obstacles one has overcome while trying to succeed.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
wenn du uns nun noch erklärst, *warum* du das so umständlich haben möchtest, anstatt die einander aufhebenden Werte einfach auf 0 zu setzen, haben wir vielleicht alle was davon.
Der Link soll nicht direkt am linken Rand der Zelle angrenzen. Der Inhalt der gesamten Tabelle ist mit einem Padding von 5px versehen, damit er besser lesbar ist und die Links sollten davon nicht abweichen. Das Padding hat allerdings dafür gesorgt, dass die Links nicht die ganze Zelle ausgefüllt haben. Die sich aufhebenden Werte sorgen dafür, dass der Link die ganze Zelle ausfüllt und dem Padding der restlichen Tabelle entspricht.
Viele Grüße
-
-
-
-
-
-
-
-