nicht angemeldet
Zeilenumbruch ignoriert Padding
3 
suit
0
Zeilenumbruch ignoriert Padding
Hallo,
ich möchte Menüpunkte rechts-ausrichten. Leider hält sich bei mehrzeiligen Menüpunkten die erste Zeile nicht an das rechte Padding. Das Span innerhalb des Links benötige ich, weil A in meinem Original eine background-grafik enthält und der Text innerhalb dieser Grafik mit Paddings ausgerichtet werden soll. Es soll quasi wie in dem Beispiel aussehen, nur dass der Umbruchfehler in der ersten Zeile des Menüpunkte behoben ist.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#submenu {
list-style-type: none;
width: 300px;
padding: 0px 0px 0px 0px;
}
#submenu a {
text-align: right;
color: yellow;
font-size: 12px;
display:block;
background: red;
width: 300px;
text-decoration: none;
padding-top: 10px;
padding-bottom: 9px;
line-height: 12px;
}
#submenu a span {
background: blue;
padding-right: 20px;
}
-->
</style>
</head>
<body>
<ul id="submenu">
<li><a href="#"><span>Dies ist ein sehr langer Menüpunkt, der auf jeden Fall umbrechen soll</span></a></li>
<li><a href="#"><span>Ein kurzer Menüpunkt</span></a></li>
</ul>
</body>
</html>
Woran liegt es? Getestet in IE8 und Firefox 3.5.7
VG,
root66
-
Woran liegt es?
Daran, dass das span-Element ein Inline-Element ist.
Btw: wozu dienen die HTML-Kommentare im style-Element? Und warum verwendest du benannte Zeichenreferenzen (ü) anstatt die Zeichen direkt zu verwenden - immerhin scheinst du UTF-8 verwenden zu wollen (wenn man dem meta-Element traut).
padding: 0px 0px 0px 0px; lässt sich übrigens kürzer auch als padding: 0; schreiben.
Das span-Element im a-Element selbst scheint mir ebenfalls redundant zu sein - wozu ist das da?
-
Hi,
Das Span innerhalb des Links benötige ich,
In diesem Aberglauben liegt dein Problem.
weil A in meinem Original eine background-grafik enthält und der Text innerhalb dieser Grafik mit Paddings ausgerichtet werden soll. Es soll quasi wie in dem Beispiel aussehen, nur dass der Umbruchfehler in der ersten Zeile des Menüpunkte behoben ist.
Dann schmeiss den SPAN raus, und gebe dem A das padding.
Woran liegt es?
Daran, dass horizontales padding für inline-Elemente nun mal so definiert ist.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]