Links in Tabellenspalten kommplet klickbar

T

Transporter

Mitglied
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:
CSS: 
<td class='menu'>
  <a class='class' href='adresse.php'>
    Link
  </a>
</td>

Ich habe bereits folgendes probiert.
CSS: 
<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
 
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;
 
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.
 
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.
 
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.

HTML: 
<!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>
 
Okay... das funktioniert schon mal, aber wie bekomme ich jetzt den Link in die vertikal in die Mitte. Mit vertical-align: funkiotniert das nicht!
 
Transporter hat gesagt.:
... , aber wie bekomme ich jetzt den Link in die vertikal in die Mitte.
Zum Vergrößern anklicken....
... 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.
 
Zuletzt bearbeitet:
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.

HTML: 
<!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>
 
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!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück