Link im <li> vertikal zentrieren

Darkxor

Hallo,
ich wollte mal nachfragen ob zu dem Problem jemand eine Lösung kennt. Ich habe nun schon mehre Stunden rummprobiert aber noch keine Lösung gefunden .

So sieht es bei mir aktuell aus:

[Blockierte Grafik: http://www.abload.de/img/pic740mbu9.png]

Wie man sieht ist die Schrift vertikal noch sehr unschön positioniert.

Dies ist der HTML Aufbau:

HTML

<div id="nav">
    <ul>
        <li class="current_page_item"><a href="-">Startseite</a></li>
        <li class="page_item page-item-22"><a title="Impressum" href="-">Impressum</a></li>
        <li class="page_item page-item-20"><a title="Testseite1" href="-">Testseite1</a></li>
    </ul>
</div>

Das die betreffende CSS:

HTML

#nav
{
    background-color:#35779F;
}
#nav ul
{
    padding:0px;
    margin:0px;
    list-style:none;
    height:30px;
}
#nav li
{
    float:left;
    height:30px;
}
#nav ul li a
{
    color:#FFFFFF;
    font-weight:bold;
    padding:0px 12px;
    text-decoration:none;
}
#nav ul li:hover
{
    background-color:#4D93B9;
}
#nav ul li.current_page_item
{
    background-color:#60A2C9;
}
#nav ul .current_page_item a
{
    text-decoration:underline;
}

Alles anzeigen

An der HTML Auszeichnung kann ich leider nichts ändern, da diese von Wordpress vorgegeben wird.

Vielen Dank im Voraus!

ludgerf321

Einfach,

PHP

line-height:30px;

einfügen. So gings immer bei mir, benutze aber eigene Schriften, daher mach ich des netmehr...
Hier kannste auch nochmal schauen.

LG Ludger

koslowski

Hi,

wenn die Links display:block haben (sollten sie bei derartigen navis immer, damit die ganze Schaltfläche klickbar ist), greifen vertikale paddings dafür.

Eine Höhe für ul/li brauchst du dann nicht.

Die Zeilenhöhe durch line-height zu verändern, um das zu erreichen halte ich für keine gute Lösung, die Box wird ja dadurch nicht vergrößert.
Außerdem benötigt line-height keine Maßeinheit weil es ein Faktor ist und das Ganze mit Maßeinheit zu Vererbungsproblemen führen kann (das steht auch in deinem geposteten Link!! ).

ludgerf321

Stimmt...
Merke auch gerade, dass ich immer display:block; drinne hatte ...
Naja wie gesagt, ich benutz nur noch Grafiken.

LG Ludger

Bandit

Zitat von ludgerf321

Naja wie gesagt, ich benutz nur noch Grafiken.

Das ist aber auch auf Dauer keine vernünftige Lösung.

synaptic

also ich benutze nen span innerhalb vom a und mach die position relativ, dann kann ich munter loscoden und kann es frei nach schnauze positionieren.. denn nen echtes center sieht manchmal auch kacke aus...
optik hat nicht immer was mit der echten mitte zu tun....

koslowski

Zitat von bandit600

Das ist aber auch auf Dauer keine vernünftige Lösung.

mit den Techniken meiner Tuts doch.
Da hat sogar der Screenreader kein Problem mit.

synaptic machts ja auch so in der Art.

Darkxor

Hallo,
ich habe das noch nicht ganz verstanden . Wenn das mit line-height nicht so schön ist, wie soll dann das display:block gesetzt werden?

Zitat

wenn die Links display:block haben (sollten sie bei derartigen navis immer, damit die ganze Schaltfläche klickbar ist), greifen vertikale paddings dafür.

Ich habe es mal hier eingefügt:

Code

#nav ul li a
{
    color:#FFFFFF;
    font-weight:bold;
    padding:0px 12px;
    text-decoration:none;
[B]    display:block;
    vertical-align:middle;[/B]
}

Das vertical-align war nur testweise - funktioniert ja eh nur bei inline Elementen. Aber das display:block brachte so leider gar nichts. Wie ist das mit den vertikalen Paddings gemeint?

Danke

Edit:

So funktioniert es:

Code

#nav ul li a
{
    color:#FFFFFF;
    font-weight:bold;
    padding:0px 12px;
    text-decoration:none;
    display:block;
    height:24px;
    padding-top:6px;
}

Kann man mit der Lösung leben?
=> Im IE6 und 5.5 wird die Navigation nicht gefloatet sondern untereinander dargestellt. Wenn ich dem li einen width gebe, geht es - ist aber sehr unschön => sollte es nicht auch ohne gehen?

koslowski

Zitat von Darkxor

=> Im IE6 und 5.5 wird die Navigation nicht gefloatet sondern untereinander dargestellt. Wenn ich dem li einen width gebe, geht es - ist aber sehr unschön => sollte es nicht auch ohne gehen?

dann lass a auch floaten.

Mit display:block wird das inline-Element zum Blockelement und damit so breit wie es geht.

Wenn li ohne width floatet sollte a grundsätzlich auch immer floaten, schon wg. IE6.

Am besten ist immer ein Link zum Problem.

Billbos

Die line-height: immer so hoch wie die Navigation

koslowski

Zitat von Billbos

Die line-height: immer so hoch wie die Navigation

und was für einen Sinn sollte das haben?

Zitat von koslowski

Hi,
Die Zeilenhöhe durch line-height zu verändern, um das zu erreichen halte ich für keine gute Lösung, die Box wird ja dadurch nicht vergrößert.
Außerdem benötigt line-height keine Maßeinheit weil es ein Faktor ist und das Ganze mit Maßeinheit zu Vererbungsproblemen führen kann (das steht auch in deinem geposteten Link!! ).

selfrecycling find ich gut.

Darkxor

Zitat von koslowski

dann lass a auch floaten.

Mit display:block wird das inline-Element zum Blockelement und damit so breit wie es geht.

Wenn li ohne width floatet sollte a grundsätzlich auch immer floaten, schon wg. IE6.

Am besten ist immer ein Link zum Problem.

Hi,

daran lag es nun funktioniert die Navigation so wie sie soll. Vielen Dank!

Tags