CSS Navigation zweizeilig mit Background-Image

[Bellanna]

Hallo ihr fleißigen Helfer.
Ich sitze seit langem mal wieder an einer Website, und schlage mich mit
der über CSS realisierten Navigationsleiste herum.
Das Problem ist folgenden:
Ich binde für die Optik eine kleine Pergamentrolle als Hintergrundgrafik
ein. Nun ist diese aber nicht komplett dargestellt abhängig von der
Zeilenhöhe.
OK das ist ertmal kein Problem: line height auf 2em gesetzt und
schwupps, ist die Pergamentrolle ganz drauf.
Nur habe ich jetzt ein Problem mit einem langen <li> Element, hier ist
jetzt der Zeilenabstand natürlich auch größer.

so wäre es super:
------
|eins|
------
----------------
|zwei mit sehr |
|langem Namen  |
---------------

------
|drei|
------

So ist es leider:
------
|eins|
------
----------------
|zwei mit sehr |
|              |
|langem Namen  |
---------------

------
|drei|
------

Könnt ihr mir da helfen? Hier die relevanten Code-Schnipsel:

ul#Navigation a {  
      display:block;  
      padding: 0.2em;  
      width: 10em;  
      text-decoration: none;  
      font-weight: bold;  
      line-height:2em;  
      border: 0px solid black;  
      border-left-color: white;  
      border-top-color: white;  
      color: #995c00;  
      background: #fcde9c url(./Parchment_off.gif) no-repeat center;  
      }  

<ul id="Navigation">  
   <li><a href="eins.htm">eins</a></li>  
   <li><a href="zwei.htm">zwei mit sehr langem Namen</a></li>  
   <li><span>drei</span></li>  
</ul>  

Lieben Dank!
B-ellanna

[ChrisB]

Hi,

OK das ist ertmal kein Problem: line height auf 2em gesetzt und
schwupps, ist die Pergamentrolle ganz drauf.
Nur habe ich jetzt ein Problem mit einem langen <li> Element, hier ist
jetzt der Zeilenabstand natürlich auch größer.

Dann setze nicht die Zeilenhoehe, sondern die Hoehe.

MfG ChrisB

[B-ellanna]

Dann setze nicht die Zeilenhoehe, sondern die Hoehe.

Hallo Chris.
Das funktioniert super. Nur sind dann die Elemente nicht mehr Vertikal in meinem Background image zentriert.
Gibt es dafür einen workaraound? Soweit ich es bisher überblicken kann, ist vertical-align:middle bei <li> Elementen nicht zulässig.
Vielen DAnk für die weitere Hilfe
B-ellanna

[ChrisB]

Hi,

Dann setze nicht die Zeilenhoehe, sondern die Hoehe.

Das funktioniert super. Nur sind dann die Elemente nicht mehr Vertikal in meinem Background image zentriert.
Gibt es dafür einen workaraound?

Padding.

MfG ChrisB

[B-ellanna]

Nur sind dann die Elemente nicht mehr Vertikal in meinem Background image zentriert.

Padding.

Hi Chris.
Padding macht schon was, aber nicht ganz was ich gerne hätte. (Oder ich weiß nicht wie ich es dazu überreden kann?)

Ich habe mehrere Varianten von padding getestet, und mit padding-top rücken die Elemente alle brav runter. Nur halt nicht nur die Einzeiligen, sondern auch die Zweizeiligen.

padding-top 1em; gibt z.B. folgendes Ergebnis. Aber eine für alle Zeilenarten gültige Zentrierung wär schon wünschenswert.

|----------------|
|                |
|einzeilig       |

|----------------|
|                |
|zweizeilig      |

zweizeilig

Mit display:table-cell; vertical-align:middle; hab ich auch schon rumexperimentiert, aber das zerhaut mir meine zweite Navigationsebene.

Ich bleibe verwirrt.
Danke für Entwirrung
B-ellanna

[ChrisB]

Hi,

Ich habe mehrere Varianten von padding getestet, und mit padding-top rücken die Elemente alle brav runter. Nur halt nicht nur die Einzeiligen, sondern auch die Zweizeiligen.

Ja, klar.
Kleiner Schoenheitsfehler, mit dem dein Layout leben kann.

Aber eine für alle Zeilenarten gültige Zentrierung wär schon wünschenswert.

Dafuer braeuchte es Tabellenzelleneigenschaften.

Mit display:table-cell; vertical-align:middle; hab ich auch schon rumexperimentiert, aber das zerhaut mir meine zweite Navigationsebene.

In faehigen Browsern koennte es damit vielleicht funktionieren; das Zusammenspiel mit Listen/List-Items, die auch noch mal ihren eigenen display-Typus haben, kann das aber sicher leicht Komplikationen geben.

MfG ChrisB

[B-ellanna]

Hallo

Kleiner Schoenheitsfehler, mit dem dein Layout leben kann.

Grummel. Das CSS ist aber nicht so hundertprozentig flexibel.
B-ellanna

[suit]

Grummel. Das CSS ist aber nicht so hundertprozentig flexibel.

das liegt nicht an css, es liegt vor allem an der hohen verbreitung von browsern, die seit etwa 2001 am markt sind und damal schon nicht modern waren

[suit]

So ist es leider:

|zwei mit sehr |
|              |

langem Namen

nein, es ist exakt so wie du es wünscht:

zwei mit sehr
langem Namen

du hast keine leerzeile dazwischen, lediglich der zeilenhöhe ist 2x so hoch wie ein zeichen - das sieht nur so aus als wäre eine leerzeile dazwischen

[Bellanna]

Hi,

So ist es leider:

|zwei mit sehr |
|              |

langem Namen

nein, es ist exakt so wie du es wünscht:

Es ist halt nicht wie ich es wünsche, sondern nur wie ich es "programmiert" habe.

du hast keine leerzeile dazwischen, lediglich der zeilenhöhe ist 2x so hoch wie ein zeichen - das sieht nur so aus als wäre eine leerzeile dazwischen

Ich weiß schon das das keine echte Leerzeile ist, aber es sieht ja so aus als ob...

Ich werde mal den Tipp von Chris ausprobieren. Viellicht stimmt ja dann mein Wunsch mit meiner Programmierung überein^^.
LG
B-ellanna

[suit]

Es ist halt nicht wie ich es wünsche, sondern nur wie ich es "programmiert" habe.

warum programmierst[1] du es dann :)

Ich werde mal den Tipp von Chris ausprobieren. Viellicht stimmt ja dann mein Wunsch mit meiner Programmierung überein^^.

als tipp für die zukunft: überlege dir zuerst was du willst und programmiere[1] dann, umgekehrt ist es meistens weniger zielführend - je komplexer das projekt, desto mehr aufwand bedeutet der rückbau einer unsinnigen aktion

[1] css ist eine deklarative sprache, ob nun eine deklarative sprache als programmiersprache zu werten ist, ist ansichtssache ;) kann ja nicht alles imperativ sein