# Links in Tabellenspalten kommplet klickbar



## Transporter (24. Juni 2011)

Hallo!

Ich habe eine Tabelle in der Links vorhanden sind.
Wie bekomme ich es hin, daß der ganze Spaltenbereich und Höhe klickbar ist, obwohl der Link gar nicht die volle Spaltenhöhe und Breite einnimmt.

Also so:

```
<td class='menu'>
  <a class='class' href='adresse.php'>
    Link
  </a>
</td>
```

Ich habe bereits folgendes probiert.

```
<td class='menu'>
  <div style='height: 100%; height: 100%'>
    <a class='class' href='adresse.php'>
      Link
    </a>
  </div>
</td>
```

das funktioniert schon ganz gut, leider sind die Spalten sehr hoch und der Link wird dann immer ganz Oben angelegt. Und vertical-align funktioniert irgendwie nicht.

Könnt Ihr mir helfen?

Gruß Markus


----------



## OpaBenno (24. Juni 2011)

hallo,
ich weiß nicht was sich hinter deinem class versteckt.
Ich benutze im a-Tag: style="font-size:30px;"
oder
in meiner seperaten CSS-Datei: font-size:30px;


----------



## Transporter (24. Juni 2011)

Wie, dann wird doch einfach nur die Schrift größen... oder?!


----------



## OpaBenno (24. Juni 2011)

hallo,
bin ehrlich gesagt selber noch Anfänger (Deshalb bin ich ja hier).
td hat keine starre, vorgeschrieben Größe.
Der Browser sammelt die Inhalte der td's und baut so sein Bild.
Wenn ich also viel in die td's tue, wird das Bild größer.
übrigens: auch &nbsp; zählen bei der Größe mit.


----------



## Transporter (24. Juni 2011)

Na klar.

in meinem Fall hat der <td> Tag eine feste größe Größe die in $class definiert wird.
Der klickbare Berich innerhalb der Spalte soll jetzt die komplette Höhe und Breite der Spalte sein, obwohl der Link innerhalb der <td>´s kleiner ist.


----------



## franz007 (24. Juni 2011)

Hallo

a ist ein inline-Element und hat dadurch keine Höhe. Du musst es also als block-Element darstellen lassten um ihm die 100% height zuweisen zu können.


```
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	td{
		border: 1px solid black;
		height: 500px;
	}
	
	td > a{
		display: block;
		height: 100%;
	}
</style>

</head>
<body>
<table>
<tr>
<td class='menu'>
  <a href='http://example.com'>Link</a>
</td>
</tr>
</table>
</body>
</html>
```


----------



## Transporter (24. Juni 2011)

Okay... das funktioniert schon mal, aber wie bekomme ich jetzt den Link in die vertikal in die Mitte. Mit vertical-align: funkiotniert das nicht!


----------



## hela (24. Juni 2011)

Transporter hat gesagt.:


> ... , aber wie bekomme ich jetzt den Link in die vertikal in die Mitte.


 ... indem du den Linktext im A-Element einzeilig lässt [white-space:nowrap;] und die Zeilenhöhe auf 100% setzt [line-height:100%;].

*Das ganze müffelt sehr nach Tabellenlayout.*

P.S.
Tut mir leid, ich habe es grade getestet und der Link ist so nur über dem Linktext wirksam. 
Ist auch ein Irrtum von mir: Die 100% Zeilenhöhe beziehen sich auf die vererbte Zeilenhöhe des Elternelements.


----------



## franz007 (24. Juni 2011)

Hallo, so klappts ist aber nicht mehr ganz sauber da zusätzliches Markup verwendet wurde.

Wenn du damit ein Menü oder etwas in der Art machen willst rate ich dir davon ab.
Tabellen sind zur darstellung von tabelarischem Inhalt. Nicht zum layouten.


```
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	td{
		border: 1px solid black;
		height: 500px;
	}
	td > a{
		display: block;
		height: 100%;
	}
	td > a > span{
		position: relative;
		top: 50%;
	}
</style>

</head>
<body>
<table>
<tr>
<td class='menu'>
  
  <a href='http://example.com'><span>Link</span></a>
  
</td>
</tr>
</table>
</body>
</html>
```


----------



## OpaBenno (24. Juni 2011)

hallo,
ich bin mittlerweile soweit:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
td { font: normal 55px verdana, sans-serif;
     border: 1px solid #000800;
}
a:link
a:visited
a:active { display:block;
		   height: 44px; /*höhe der Linkboxen*/
		   line-height: 44px; /*Text innerhalb der Linkbox*/
}
a:hover { background-color:#444444;
		  color:#ddffbb;
}
</style>
</head>
<body>
<table>
<tr>
<td class='menu'>
  <a href='http://google.com'>Link</a>
</td>
</tr>
</table>
</body>
</html>
DISPLAY:BLOCK war dann doch der entscheidende Hinweis!


----------



## Maxi Schmeller (24. Juni 2011)

Mach doch einfach ein Bild, das die Größe der Tabelle,  mit weißem (kann auch eine andere Farbe sein) Hintergrund und schreibe in das Bild den Text hinein und verlinke es anschließend. (Mach das Blid so groß wie dein Bildschirm --> auch den Text so groß, ordne dem Bild dann per css Größe und Höhe von je 100% zu und füge es in eine Zelle deiner Tabelle ein.)


----------



## OpaBenno (24. Juni 2011)

hallo,
wenn ich Äpfel essen will, soll mir keiner daherkommen und sagen Birnen schmecken auch gut!
Wie anfänglich gesagt, baut der Browser sein 'Bild' nach dem Inhalt der <td>'s.
Mithin reservieren wir uns einen Bereich über class (hier .klein).
Viel Spaß beim ausprobieren:

<!DOCTYPE html><html><head>
<style type="text/css">
.klein { height: 24px; width:88px;
         padding:40px 1px 30px 30px;
         font: normal 15px verdana, sans-serif;
         text-decoration:none;
}
a { border: 1px solid #00ff00; }
.menu a:link
.menu a:visited
.menu a:active {  }
.menu a:hover { color:#ddffbb; background-color:#444444; }
</style>

</head><body><table>
<td class='menu' >
<a href='http://google.com'><p class="klein">Link</p></a>
</td></table></body></html>
anstatt a { border kann auch td { border stehen usw. usw.


----------



## franz007 (24. Juni 2011)

Hallo zusammen.

@OpaBenno
Bitte die [ code] [ /code] Tags im Forum verwenden.

Dein letzter Code ist nicht ganz richtig: ein p-Element darf nicht in einem a-Element vorkommen.
siehe: http://de.selfhtml.org/html/referenz/elemente.htm#p

Dass die größe einer Zelle durch ihren Inhalt bestimmt wird ist klar. Die Frage ist aber wie der Link verwendet werden soll.
Wenn die höhe über eine andere Zelle in der Geleichen Zeile (zb mit Text deffiniert wird) und in der Spalte daneben soll dann ein entsprechender Link stehen dann funktioniert deine lösung nicht mehr. Das geht so nur wenn der Link die größe deffiniert.


@Maxi Schmeller
Bilder sind immer eine ganz schlechte Lösung. Sie sind weder von Suchmaschienen noch von Screenreadern oder ähnlichem lesbar.
Außerdem sind sie unnötig Groß und die Erzeugung ist Komplizierter.

Gruß


----------

