• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

td höhe bestimmt->Link verschiebt sich nach oben

N

nicename

Neues Mitglied
Hallo,
Ich entschuldige mich wenn mein Titel sich komisch anhört...mir ist nichts besseres eingefallen.
Ich wollte einen td verlinken auf eine Seite ( von google) habe ich folgendes gefunden:
HTML: 
    display:block; 
    width:100%;
    height:100%;
so es funktoniert ja auch prima nur mein link verschiebt sich nach oben (also dass was in der <td> steht)

Quellcode:
HTML: 
...
    <td class="home"><a href="/index.php"><font>Flugsuche</font></a></td>
...
.home a{color:#FFF; text-align:center;}
.home:hover { background-image: url('h****menu-on.png'); background-repeat: repeat-x; padding-left: 12px; padding-right: 12px; height: 60px;
font:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color:#7addfd;
filter:glow(Color=#7addfd, Strength=4);
text-align:center;
vertical-align:middle;
}
.home:hover a{
    color:#06F;
    display:block; 
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
}
ich habe es mit vertical align versucht funktionierte doch nicht
Könnt ihr mir bitte Tipps geben wie ich es wieder zurecht biegen kann?
 
Mal davon abgesehen, dass eine Tabelle das falsche einsatzmittel hierfür ist, sehe ich nicht, wo du die Höhe der <td> definierst.
So lange diese ohne Definierung ist, ist die TD nur so hoch, wie für den Text/Link nötig ist.
Eine relative Höhenangabe braucht einen Wert, an dem sie sich Orientieren kann!
Der <font>-Tag ist an der Stelle auch ziemlich sinnfrei, mal ganz davon abgesehen, dass er nicht mehr genutzt werden sollte.
 
ich hätte noch .home hin schreiben sollen sorry;)
aber bei .home a habe ich ja auch height:60px; eingegeben:shock:
aber hier ist nochmal .home:)
HTML: 
.home { background-image: url('****menu-m.png'); background-repeat: repeat-x; padding-left: 12px; padding-right: 12px; height: 60px;
font:Arial, Helvetica, sans-serif;
font-size:15px;
font-style:bold;
color:white;
font-weight:bold;
}

das <font> habe ich auch mittlerweile gelöscht danke;)
naja ich arbeite eigentlich ja auch mit ul und li doch da ich die nicht so schön bearbeiten kann hab ich es gelassen... ist ja auch egal
also ich habe auch height definiert.
 
Wenn ich dich richtig verstanden hab, hast du einen Link in dieser Zelle und sonst nichts.
Dem Link hast du 100% Höhe gegeben.
Bei letzterem frag ich mich, warum?
Mach text-aligne und vertical-align auf die <td> und mach die 100% beim Link wieder raus. Dann ist er in der Mitte.

So wie du es machst kann das nicht vertikal in die Mitte gehen, da der Link ein Blockelement ist!
Da funktioniert vertical-align nicht.
 
wenn du doch der TD eine feste Höhe gegeben hast, warum gibst du denn nicht dem A auch eine feste Höhe?
Dann kannst du mit line-height:60px; vertikal zentrieren
 
Danke dir ;) hat geklappt dass mit line-height:60px
Zeilenhöhe: line-height

Diese Eigenschaft gibt es seit Version: CSS 1
Durch line-height wird die Zeilenhöhe festgelegt. Sind mehrere Zeilen untereinander vorhanden, so lässt sich auf diesem Wege auch der Zeilenabstand, der sogenannte Durchschuß festlegen.
Ist der Wert von line-height dabei kleiner als die aktuelle Schriftgröße (font-size), so überlagern sich die Zeilen.
Erlaubte Werte sind Zahlen, Längenangaben und Prozentwerte. Im folgenden Beispiel wird dreimal die gleiche Zeilenhöhe demonstriert:
Code-Beispiel für line-height:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bespiel für Zeilenhöhe</title>
<style type="text/css">
.zahl {line-height: 1.5;}
.prozent {line-height: 150%;}
.em {line-height: 1.5em;}
</style>
</head>
<body>
<p class="zahl">Ein Absatz mit einer Zeilenhöhe von 1.5.</p>

<p class="prozent">Ein Absatz mit einer Zeilenhöhe von 150%.</p>
<p class="em">Ein Absatz mit einer Zeilenhöhe von 1.5em. </p>
</body>
</html>

Beispiel ansehen
Initialwert:normal Vererbbar:Ja Anwendbar auf:Alle Elemente Medium:Visual Werte: normalNormale in der Schrift definierte ZeilenhöheZahl, Längenangabe oder ProzentangabeInherit Anmerkung: um Vererbungsprobleme und Textüberlagerung zu vermeiden, empfiehlt es sich, die line-height einfach als Zahl ohne Einheit zu verwenden. Bei 1.5 ist dann z.B. die Zeilenhöhe immer anderthalbmal so hoch wie die Schriftgröße.
Zum Vergrößern anklicken....

Für alle die wissen wollen was line-height ist ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben