Zitat:
|
Gib dem Link die display Eigenschaft block und setze die Breite und Höhe des a-Elementes entweder auf einen festen Wert, oder einen dynamischen, wie em, dann vergrössert es sich mit der Schrift.
|
geht nicht
geht
mein Ergebnis:
HTML-Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
body {
font: 0.75em/1.75em 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: white;
}
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
li {
background: blue;
width: 100px;
height: 6em;
display: table;
float: left;
}
li a {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
li a:hover {
background: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Menüpunkt1 Menüpunkt1</a></li>
<li><a href="#">Menüpunkt2 Menüpunkt2 Menüpunkt2</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</body>
</html>
Vielen Dank
