Hi,
Mein Ziel ist eine kleine Webseite. Dafür möchte ich in der Navigationsleiste den Anchor-Tags ein prozentuales Padding verpassen. Mit absoluten Angaben funktioniert das auch nur mit prozentualen nicht.
Hier erstmal der Code:
HTML: 8
<!-- Navigation bar -->
<nav>
<ul>
<li><a href="#">Item A</a></li>
<li><a href="#">Long Item</a></li>
<li><a href="#">Item C</a></li>
<li><a href="#">Very very looooooooong Item</a></li>
</ul>
</nav>
CSS: 14
/***********************
* Navigation
**********************/
nav{
background: orange;
height: 4%;
}
nav ul{
height: 100%;
}
nav ul li{
display: inline-block;
background: green;
}
nav ul li a{
text-decoration: none;
display: block;
padding: 10% 10%;
height: 10%;
color: white;
}
Alles anzeigen
Und da ein Bild das am besten beschreibt, hier noch das Problem als Bild:
html-seminar.de/woltlab/attachment/806/
Anscheinend beziehen sich die Prozentangaben auf den Inhalt das Tags? Die grünen Felder (a-Tag) sollten eigentlich alle gleich groß sein und in dem orangenen Bereich (nav-Tag) liegen.
Ich hoffe ich habe mein Problem einigermaßen verständlich machen können.
Gruß