Weg von Tabellen-Navigation, hin zu <ul>, aber wie?

[JensB]

Hallo,
der Titel sagt es schon, ich baue gerade meine Tabellen-Navigation in eine <ul>-Navigation um, stoße dabei aber auf ein paar Probleme.

Meine "Fortschritte" sind hier zu finden: Testseite
(Oben die alte Tabellen-Navigation, so soll es nachher halbwegs aussehen, und darunter meine <ul>-Gehversuche)

Das

display: inline;

scheint zu bewirken, dass die Angaben für Breite und Höhe des <li>-Elements nicht mehr ausgewertet werden. Aber welche display-Art verwende ich dann? table-cell wird nicht von allen Brausern unterstützt. Kann ich ansonsten irgendwie da rumtricksen?

Gruß
Jens

 

[creativ-webdesigns]

Lass das display einfach weg und gib den li elementen die Breite und Höhe von deiner Grafik.

 

[prm]

Ferner noch ein "float: left;"

Sieh dich vielleicht auch hier mal etwas um:
Horizontale Listennavigation
Vertikale Listennavigation

 

[JensB]

Perfekt, danke für die schnelle Hilfe. Neue Version (alter Link): Testseite

Problem nun: Die Links sind nicht vertikal zentriert, und das vertical-align:middle; hat keinen Einfluss. Was tun?

 

[creativ-webdesigns]

Perfekt, danke für die schnelle Hilfe. Neue Version (alter Link): Testseite

Problem nun: Die Links sind nicht vertikal zentriert, und das vertical-align:middle; hat keinen Einfluss. Was tun?

Mit padding-top

Musst du sehen wie groß der Abstand sein muss, schätze mal padding-top:5px;

 

[JensB]

Dass das funktioniert ist mir schon klar, aber so wirklich gefällt mir das nicht... ;-) Hmm.

 

[mermshaus]

Probier mal, line-height auf denselben Wert wie die Elementhöhe zu setzen. Also zum Beispiel:

li {
    height: 20px;
    line-height: 20px;
}

 

[Loon3y]

Probier mal, line-height auf denselben Wert wie die Elementhöhe zu setzen. Also zum Beispiel:

li {
    height: 20px;
    line-height: 20px;
}

Noch besser ist es, relative größen wie em oder % zu benutzen. :-) Man will ja den Besucher der Seite nichts aufzwängen..


Gruß
Loon3y

 

[JensB]

Hallo,
der Tip mit line-height funktioniert super, danke!

Ich werde es aber bei "line-height: 43px;" belassen (müssen), da ich eine Hintergrundgrafik für die Navigation verwende.

 

[JensB]

Ein neues Problem ist aufgetreten beim Verwenden von line-height. Bei der <h1> meiner Seite hatte ich bisher mit padding-top die Schrift vertikal zentriert, aber dachte mir, dass line-height sicherlich eine bessere weil flexiblere Methode ist, also habe ich das mal angepasst.

Problem: Die <h1> soll 66px hoch sein, aber das ist sie nicht. Wo kommt die Extra-Höhe her? Findet jemand einen Fehler? Testseite

 

[neuroleptika]

Ohne die Border ist h1 bei mir 66px hoch. Mit Border 68px.

 

[JensB]

Danke für dein genaues Hinsehen, aber der Fehler war im Bereich von 30 Pixeln. Aber das war irgendein Cache-Fehler, nach Neuladen des Stylesheets ist er verschwunden.