Hallo,
ich habe ein Problem mit meiner Navigationsleiste. Sie soll, von Hintergrundfarbe und Rahmen abgesehen, folgendermaßen aussehen:
rechtsbündig ausgerichtet, beim Drüberfahren oder Anklicken soll sich der Link bzw. die Linkbeschreibung um vier Pixel anheben.
Das Ergebnis sieht aber so aus:
1. Ich habe über und unter meiner Navileiste innerhalb des Rahmens je eine Leerzeile(? ich denke es ist eine).
2. Wenn ich den Fokus auf einem Link habe, kann ich an dem Rechteck erkennen, dass die padding-Angaben zwar wirken, jedoch nur auf das Fokus-Rechteck und nicht auf die Schrift.
3. Das Fokus-Rechteck zeigt mir zwar an, dass sich bei :hover etwas tut, ich würde es jedoch später, zumindest in der Navigation, gern loswerden. Geht das eigentlich ?
Ich habe jetzt schon vieles über class id und Vererbung gelesen (und bestimmt einiges verstanden), komme aber nicht weiter.
css:
body {
margin:0;
width:1024px;
background-color:#0050A0;
}
#navigation {
width:100%;
background-color:#001060;
border-top-color:#DFDFDF;
border-top-style:solid;
border-top-width:thin;
border-bottom-color:#DFDFDF;
border-bottom-style:solid;
border-bottom-width:thin;
font-family:Arial;
font-size:16px;
font-weight:normal;
}
#navigation ul {
text-align:right;
}
#navigation li {
display:inline;
}
#navigation li a {
color:#FFFFFF;
padding-left:12px;
padding-right:12px;
padding-top:8px;
padding-bottom:4px;
text-decoration:none;
}
#navigation li a:hover {
color:#00C0FF;
padding-top:4px;
padding-bottom:8px;
}
html:
<div id="navigation">
<ul>
<li><a href="index.php">Start</a></li>
<li><a href="aboutme.php">Über mich</a></li>
<li><a href="contact.php">Kontakt</a></li>
</ul>
</div>
Weiß jemand Rat ?
Zusätzliche Frage: Habe mich hier für id statt class entschieden, da die Navigationsleiste nur einmal vorkommen soll. Gedankengang richtig ?
Gruß