Tabelle, Hover-Effekt, Problem

.Shanii

Guten Abend/Nacht

Ich habe ein mehr oder weniger "kleines" Problem.

Ich habe eine Tabelle:

HTML

<table id="t3" align="center" cellspacing="0" cellpadding="0">
	<tr>
		<td class="mLink"><a href="">Link</a></td>
		<td class="mLink"><a href="">Link</a></td>
		<td class="mLink"><a href="">Link</a></td>
		<td class="mLink"><a href="">Link</a></td>
	</tr>
</table>

1. Problem: Die <td>'s suchen sich den größt möglichen Abstand zu einander, sodass die komplette Breite der Tabelle "t3" besetzt ist.

2. Problem: Ich will, dass wenn ich über den Link fahre (hover), ein anderes Hintergrundbild erscheint:

Code

.mLink a:hover {
	background-image:url(images/mhover.png);
	background-repeat:repeat-x;
}

Es funktioniert auch, aber der das neue Background-Image (mhover) ist nur so groß, wie die Schrift ist, ich will aber, dass die komplette Höhe (43px) benutzt werden..

Wie kann ich dies lösen? Vielen Dank.

Dodo

1. Problem: Zeig mal ein Bild, kann mir nichts drunter vorstellen.
2. Problem:

Code

td.mLink a
{
        display:block;
        height:43px;
}

evtl. mittels padding die position der schrift anpassen.

.Shanii

[Blockierte Grafik: http://img231.imageshack.us/img231/9198/bildf.png]

Dodo

Hast du online ein Beispiel? Sonst zeig mal das gesamte CSS.

.Shanii

http://supplex.bplaced.net/test/

Hab da mal die Seite hochgeladen.

Deine Problemlösung zu 2. ist mit eingebaut.. jetzt rutscht immer der Link nach oben.

Dodo

Ja....
Wenn du der Tabelle diese Angaben gibst:

Code

#t3 { 
width: 980px;
height: 43px;

, dann wird sie auch über die gesamte Seite gehen. Tabellenzellen teilen sich nunmal gleichmßig auf die Tabelle auf.

Zu Proble 2: Wie gesagt: Mittels Padding die Abstände anpassen.

Macrosdesign

Wie wäre es denn mit "line-height"

Und warum Tabellen das Design schreit doch gerade zu nach einem Box-Modell Layout

.Shanii

Ich glaub, ich werde das Ganze erstmal in div's umschreiben.. dann mal sehn..

line-height bringt mir auch nicht das gewünschte ergebnis

Grevas

Oh doch, wenn dus ma einbaun würdest.

HTML

td.mLink a:hover {
background-image:url("images/mhover.png");
background-position:center  center;
background-repeat:repeat-x;
display:block;
line-height:43px;
}

Dann ist der Link bei mir auch in der Mitte.

.Shanii

Danke, danke, danke Grevas

Pion

Zitat von Grevas
Oh doch, wenn dus ma einbaun würdest.
HTML
td.mLink a:hover {
background-image:url("images/mhover.png");
background-position:center  center;
background-repeat:repeat-x;
display:block;
line-height:43px;
}
Dann ist der Link bei mir auch in der Mitte.

Klasse nun wird er trotzdem weiter mit Tabellen einen Grundsstock nachbauen, mensch hässt es ihn halt nicht verrraten

Tags