Anchor-Tag Padding in Prozent geht nicht

  • 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
    1. <!-- Navigation bar -->
    2. <nav>
    3. <ul>
    4. <li><a href="#">Item A</a></li>
    5. <li><a href="#">Long Item</a></li>
    6. <li><a href="#">Item C</a></li>
    7. <li><a href="#">Very very looooooooong Item</a></li>
    8. </ul>
    9. </nav>



    Und da ein Bild das am besten beschreibt, hier noch das Problem als Bild:
    problem.png
    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ß

  • Hallo,


    du musst bei Prozentangeben zunächst zwischen Breiten- und Höhenangaben (width, height) unterscheiden.


    Zudem, ob sie auf Inline- oder Blockelemente angewendet werden.


    Deshalb werden bei width- und height Prozent-Angaben unterschiedlich interpretiert. Das ist so gewollt und für Anfänger eines der vielen Verständnisprobleme bei HTML / CSS.


    Bei Höhenangaben sollte deshalb auf Prozentwerte verzichtet werden, egal ob es um Größen oder Abstände geht.


    Siehe auch


    http://www.thestyleworks.de/basics/percentage.shtml


    Gruss


    MrMurphy