nicht angemeldet
Höhe von Listeneintrag
Hallo,
ich versuche mir eine Navigationsleiste zu basteln, die in HTML-Ebene ne simple Liste aus Hyperlinks ist, die erst per CSS formatiert wird.
Allerdings möchte ich in meiner Liste später einige Trennlinien (Seperatoren) haben. Dazu habe ich einfach jeweils einen leeren Listeneintrag der Klasse "seperator" eingefügt:
<li class="seperator"></li>
Ne andere Methode Seperatoren allgemein zu definieren, ist mir nicht eingefallen...
Dieser Zeile mit dem Seperator soll später über CSS ein Hintergrundbild verpasst werden und die Höhe des Listeneintrages angepasst werden.
Im Firefox 2.x wird es korrekt angezeigt, aber im IE wird die Höhe des Listeneintrages einfach nicht angepasst:
Link: http://www.hinducoff.de/test.htm
Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">
UL {
list-style-type: none;
margin: 0;
padding: 0;
width: 160px;
}
UL LI {
height: 32px;
background-color: #FF0000;
margin: 0;
padding: 0;
}
UL LI.seperator {
height: 4px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a></li>
<li><a href="#">Hyperlink 3</a></li>
<li class="seperator"></li>
<li><a href="#">Hyperlink 4</a></li>
<li><a href="#">Hyperlink 5</a></li>
<li class="seperator"></li>
<li><a href="#">Hyperlink 6</a></li>
</ul>
</body>
</html>
-
Dieser Zeile mit dem Seperator soll später über CSS ein Hintergrundbild verpasst werden und die Höhe des Listeneintrages angepasst werden.
Im Firefox 2.x wird es korrekt angezeigt, aber im IE wird die Höhe des Listeneintrages einfach nicht angepasst:
Der IE macht den leeren Listeneintrag so hoch, wie Text in der von dir vergebenen Schriftgröße einnehmen würde.
Ergänze den #seperator noch mit
font-size: 4px; line-height:4px;dann müßte es klappen.
Grüße
gaby-
Ergänze den #seperator noch mit
font-size: 4px; line-height:4px;dann müßte es klappen.
Grüße
gabyJops, damit hats geklappt.
Aber ich hab noch nen einfacheren und vor allem sauberen Weg gefunden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Vorher hatte ich die URI weggelassen. Nunja, mit URI zeigt es der IE korrekt an :)
Achja, ich persönlich finds besser einen leeren Listeneintrag als Seperator zu definieren. Bei den anderen Varianten ist entweder oben oder unten ein Seperator zu viel oder ich muss Unmengen an zusätzlichen Quelltext dazuschreiben. Naja...
Es funzt nun jedenfalls, nochmal danke an alle für die schnellen Antworten ;)
mfg Hindukusch
-
Vergesst den Post. Ich war etwas verwirrt.
Naja, Problem dennoch vorerst gelöst, mit dieser Fummelei aus dreifacher Höhenangabe.
-
-
-
Hallo,
Ne andere Methode Seperatoren allgemein zu definieren, ist mir nicht eingefallen...
Wie wäre es, den Listenpunkten per border einen Rahmen zu verpassen?
Gruß
Stareagle
-
Wie wäre es, den Listenpunkten per border einen Rahmen zu verpassen?
Gute Idee. :-)
Wenn doch bloß CSS-3 schon da wäre mit der Eigenschaft 'border-image'. *g*Sowie ich das verstanden habe, will der OP später ein Hintergrundbild als Seperator einsetzen.
Grüße
gaby
-
-
Moin
Allerdings möchte ich in meiner Liste später einige Trennlinien (Seperatoren) haben. Dazu habe ich einfach jeweils einen leeren Listeneintrag der Klasse "seperator" eingefügt:
<li class="seperator"></li>Ne andere Methode Seperatoren allgemein zu definieren, ist mir nicht eingefallen...
Offensichtlich stellen die Links innerhalb der Separatoren ja eine eigene Gruppe dar, was spricht also dagegen diese jeweils in einer Unterliste zu gruppieren und einfach am Ende jeder Unterliste (sprich: Ende des umgebenden li-Element) ein border-bottom einzufügen.
Das erscheint mir sinnvoller als inhaltsleere Listenpunkte.Gruß
rfb--
Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
(Galileo Galilei)-
Hallo rfb
Ne andere Methode Seperatoren allgemein zu definieren, ist mir nicht eingefallen...
Offensichtlich stellen die Links innerhalb der Separatoren ja eine eigene Gruppe dar, was spricht also dagegen diese jeweils in einer Unterliste zu gruppieren und einfach am Ende jeder Unterliste (sprich: Ende des umgebenden li-Element) ein border-bottom einzufügen.- oder der inneren ul, denn die lässt sich ohne zusätzliche Klassen über den Nachfahrenselektor ansprechen.
Und wenn der Separator, keine einfache Linie, sondern eine Grafik sein soll, dann statt
border-bottomein passendespadding-bottomund die Grafik als unten ausgerichteter nicht- oder nur horizontal gekacheltes Hintergrundbild.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-