Zeilenabstand innerhalb eines mehrzeiligen Listenpunktes

Hallo liebe Forumsgemeinde,

ich bin gerade etwas ratlos, habe mit meiner Navi (Liste) ein kleines, gottseidank nur ästhetisches Problem, das auftritt, sobald man im Browser den Text vergrößert und damit die Zeile eines zu langen Listenpunktes (d.h. Links) umgebrochen wird.

In dem Fall ist nämlich der Zeilenabstand innerhalb der Zeilen eines Listenpunktes derselbe wie zwischen zwei Listenpunkten (natürlich auch in jedem anderen Fall, aber da sieht es dann keiner...). Da ich list-style-type:none eingestellt habe, wirkt es nun auf den Betrachter so, als handele es sich bei dem zweizeiligen Listenpunkt um zwei einzelne Punkte.

Gibt es ein CSS-Attribut, mit dem sich dieses Problem beheben lässt, d.h. mit dem sich der Zeilenabstand innerhalb eines umgebrochenen Listenpunktes verringern lässt, ohne dabei den Abstand zu den anderen Punkten zu verringern?

Falls nötig, kann ich auch gern das Stylesheet und den Link zur Testseite posten.

Vielen Dank für Eure Mithilfe!
Daina

 

Versuchs mal mit Line-Hight http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm

 

Schon versucht, das beeinflusst leider auch den Abstand zwischen den Zeilen eines einzelnen Punktes.
Trotzdem danke und falls noch jemand eine Idee hat, würde ich mich freuen!

 

Kannst du uns villeicht ein Beispiel zeigen oder den Code posten, ich glaub dann fällt mir eher ne Lösung ein.

Hast du es schonma mit max-height:; und overflow:hidden versucht?

 

Hallo Halphas,

ich glaube, mit max-height und overflow:hidden komme ich nicht weiter...

Also, der Code für den Navibereich sieht so aus:

HTML:

  <div id="lpanel">
   <div><img src="bilder/lpanelpic.gif"/>
        <div class="textbox"><ul>
	    <li><a href="crucible.html">The Crucible</a></li>
	    <li><a href="snowqueen.html">The Snow Queen</a></li>
	    <li><a href="sherlock.html">Sherlock Holmes</a></li>
	    <li><a href="dracula.html">Dracula</a></li>
	    <li><a href="mort.html">Mort - A discworld play</a></li>
           <li><a href="vergangenes2.html">Frühere Produktionen</a></li>
           <li><a href="bilder-alt.html">Bildergalerie</a></li></ul>
	    <img src="bilder/lpanelfooter.gif" style="margin-bottom:-3px"/>  </div>
   </div>
  </div>

Im Prinzip also eine ganz normale Liste.

In der CSS steht zur Navi folgendes:

Code:

#lpanel {
       background:  url(../bilder/lpanel.jpg) repeat-y;
	border-left: solid #C34F35 1px;
	border-right: solid #C34F35 1px;
	border-bottom: solid #C34F35 1px;
	float: left;
	width: 246px;
	margin-left: 16px;
	padding: 0;}

.textbox {margin-top:-70px;}

#lpanel a {
       color: #6C7151;
	font-size: 1.5em;
	margin: 0 30px;
	padding: 20px;
	text-decoration: none;}

#lpanel a:hover {
	color: #2C3111;
	background: url(../bilder/disco.gif) no-repeat;}

#lpanel a:visited {color: #633100;}

#lpanel ul {
	margin: 0;
	padding-left: 50px;
	text-indent: -50px;
	list-style-type: none;}

#lpanel li {
	margin: 0;
	padding: 0;
	line-height: 40px;}

Hier sind noch ein paar Screenshots (zeigen nur einen Ausschnitt der Seite):

Seite nach einmal zoomen - in der Navi ist der Link "Mort..." nun zweizeilig und sieht aus wie zwei Links.

So sollte es aussehen...

Zum Vergleich: normale Schriftgröße

Ich hoffe, mein Anliegen ist jetzt klarer geworden.

Gruß
Daina

 

Ich würde das mit <div>Link</div> versuchen ohne die liste

 

...grundsätzlich funktioniert bei <a> weder margin noch padding (letzteres hab ich jetzt nicht geprüft), da es sich um ein Inline-Element handelt. Durch ein "display:block" im "#lpanel a" sollten diese wieder Wirkung zeigen und mit einem margin-top + margin-bottom in "#lpanel li" sollten sich die Abstände zwischen den <li> Tags schaffen lassen. Folglich sollte:

Code:

#lpanel a {
       color: #6C7151;
	font-size: 1.5em;
	text-decoration: none;}

#lpanel li {
	margin-top: xxx;
margin-bottom: xxx;
	padding: 0;
}

zum gewünschten Effekt führen. Wenn du die margin-Werte absolut setzt, hast du natürlich bei einem bestimmten Verhältnis wieder das Problem, dass Zeilenabstand und Listenabstand gleich groß werden können. In wie weit "em" an der Stelle zuverlässig funktioniert, darfst du selbst testen

 

Danke, kalweit. Ich werde mir deinen Rat morgen mal zu Gemüte führen und dann durchgeben, ob es funktioniert hat!

Aber jetzt ruft mein Bett...

 

Es ist nun zwar schon übermorgen, aber das lästige Problem ist gelöst dank deines super Ratschlags!
Das hat mich gleich so beflügelt, dass ich direkt noch ein paar andere Dinge an der Seite repariert und den Code noch mehr verschlankt habe.
Also - alles in allem ein voller Erfolg. Danke!