XHTMLforum - Einzelnen Beitrag anzeigen - Navi Tabs lassen sich nicht positionieren

explanator · #8 (**permalink**) 10.04.2014, 14:12

Du hast ja noch die li-Elemente, die ja auch inline-block sind.
Denen gibst du erst mal eine Höhe.
Dann den a-Elementen innerhalb der li eine line-height und mit padding-top kannst du sie nach unten schieben.

so in etwa:

Code:

.navigation {
    background-color: #000;
}

.navigation ul {
    list-style: none;
    padding:0;
    margin:0;
}

.navigation ul > li {
    display: inline-block;
    border: solid white;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
    height:50px;
}

.navigation li a {
    background-color: #8db8cf;
    color: white;
    text-decoration: none;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 30px;
    line-height: 20px;
}

.navigation li a:hover {
    background-color:#fff;
    color:#8db8cf;
    text-decoration:none;
}