nicht angemeldet
Hallo,
ich versuche eine Navigationsleiste in CSS zu bauen, bei der die Links mit Hintergrundbildern unterlegt sind.
Das funktioniert ganz gut, nur leider ist der Linktext nicht auf dem Linkbild zentriert, sondern aus irgendeinem Grund oben.
Hier ist der entsprechende CSS Code:
table#Navigation {
@font-face { font-family: PompejiPetit; src: url('PompejiPetit.ttf'); };
font-family: PompejiPetit,Arial,sans-serif;
float: left;
border-collapse:collapse;
}
table#Navigation td {
@font-face { font-family: PompejiPetit; src: url('PompejiPetit.ttf'); };
font-family: PompejiPetit,Arial,sans-serif;
vertical-align:middle;
border-collapse:collapse;
border: 1px solid #000000;
height: 70px;
}
table#Navigation tr {
@font-face { font-family: PompejiPetit; src: url('PompejiPetit.ttf'); };
font-family: PompejiPetit,Arial,sans-serif;
}
table#Navigation a {
@font-face { font-family: PompejiPetit; src: url('PompejiPetit.ttf'); };
font-family: PompejiPetit,Arial,sans-serif;
display: block;
font-weight: bold;
font-size: 1.3em;
}
table#Navigation a:link {
color: #000000; width: 190px; height: 70px; background: #e5dbb5 url(bilder/knopf150s.png) no-repeat;
}
table#Navigation a:visited {
color: #555555; width: 190px; height: 70px; background: #e5dbb5 url(bilder/knopf150.png) no-repeat;
}
table#Navigation a:hover {
color: #bbbbbb; width: 190px; height: 70px; background: #e5dbb5 url(bilder/knopf150.png) no-repeat;
}
table#Navigation a:active {
color: #ffffff; width: 190px; height: 70px; background: #e5dbb5 url(bilder/knopf150.png) no-repeat;
}
Hier eine entsprechende HTML Seite, um ihn zu testen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Christian Becker">
<meta name="description" content="Lernen Sie Latein - Latinvm CviqVe: begleitend oder alternativ zu Universitätskursen,
aus Interesse oder bei Problemen in der Schule.">
<meta name="keywords" lang="de" content="Latein, Latinum, Lateinkurs, Nachhilfe, Lernen, alte Sprachen, Lateinisch, Latinum Cuique">
<meta http-equiv="content-language" content="de">
<meta name="date" content="2010-08-15T18:41:37+02:00">
<meta name="robots" content="all">
<meta http-equiv="expires" content="86400">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="generator" content="gedit">
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
<title>Test</title>
</head>
<body>
Hallo, schaumerma ob das jetzt geht...
<table id="Navigation">
<tr>
<td><a href="index3.html">Home</a></td>
</tr>
<tr>
<td><a href="screenies.html">Screenshots</a></td>
</tr>
<tr>
<td><a href="howto.html">How to use</a></td>
</tr>
<tr>
<td><a href="modify.html">Modifying</a></td>
</tr>
<tr>
<td><a href="download.html">Downloads</a></td>
</tr>
<tr>
<td><a href="about.html">About me</a></td>
</tr>
<tr>
<td>Testtext</td>
</tr>
</table>
</body>
</html>
Und hier noch ein Bild, wie das ganze aussieht:
Wie man sieht, funktioniert ganz unten "vertical-align" ganz hervorragend, während die in einem <td> stehenden Links nicht so recht wollen.
Wo stelle ich mich dämlich an?
Vielen Dank im Voraus.
Matthias Apsel
Gunnar Bittersmann