nicht angemeldet
Text untereinander bündig anordnen
Hallo!
Ich habe ein kleines Problem bei der Erstellung eines Inhaltsverzeichnisses. Die einzelnen Einträge sollen dabei folgendermaßen eingerückt erscheinen:
1 Kapitel Eins
1.1 Eine Ebene tiefer
1.1.1 Noch eine Ebene tiefer
2 Wieder die erste Ebene
Die Einträge sollen also so weit eingerückt werden, daß sie mit dem Text des darüberstehenden Eintrages bündig abschließen.
Das ganze hab ich mit Divs fester Breite folgendermaßen versucht:
<style type="text/css">
.label1, .label2, .label3 {
float:left;
}
.label1 {
width: 2em;
}
.label2 {
margin-left: 2em;
width: 3em;
}
.label3 {
margin-left: 5em;
width: 4em;
}
</style>
<h1>Inhaltsverzeichnis</h1>
<div class="label1">1</div><div>Erstes Kapitel</div>
<div class="label2">1.1</div><div>Ein untergeordneter Abschnitt</div>
<div class="label3">1.1.1</div><div>Noch 'ne Ebene tiefer</div>
Gecko stellt das ganze ungefähr wie gewünscht dar, ganz genau stimmt die Ausrichtung allerdings nicht, und im IE ist alles völlig verschoben, margin-left ist anscheinend viel zu groß.
Was mache ich falsch? Für Antworten schonmal vielen Dank!
J. K.
-
Grüße,
wieso verwendest du nicht Listen (ggf verschachtelt)? da würde margin-left für die einrückung sorgen, und gut ist.
es gibt auch bessere Methoden es zu machen
MFG
bleicher -
Mahlzeit J. K.,
<h1>Inhaltsverzeichnis</h1>
<div class="label1">1</div><div>Erstes Kapitel</div>
<div class="label2">1.1</div><div>Ein untergeordneter Abschnitt</div>
<div class="label3">1.1.1</div><div>Noch 'ne Ebene tiefer</div>Deine Divitis möchte - [wie bleicher bereits schrieb](https://forum.selfhtml.org/?t=176661&m=1162632) - mittels der dosierten Gabe von <http://de.selfhtml.org/html/text/listen.htm#nummeriert@title=nummerierten Listen> kuriert werden. > Was mache ich falsch? Du zeichnest Deinen Code nicht semantisch aus. Für nummerierte Listen ist das <ol>-Element samt untergeordneten <li>-Elementen da - nichts anderes. MfG, EKKi -- sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:| -
Hallo,
vielen Dank schonmal für eure Antworten. Ne ol-Liste scheint mir ungeeignet, da die automatische "Mehrfach"-Nummerierung (also "1.1.1"...) nicht gerade gut unterstützt wird:
"Bislang wird diese von CSS gebotene Möglichkeit nur von Opera, Firefox ab Version 1.5 und Konqueror ab Version 3.4 unterstützt."
Na, ich werd dann wohl auf die bündige Ausrichtung verzichten müssen. Falls allerdings jemandem noch etwas einfällt, würde ich mich über Antwort freuen!
J. K.
-
Na, ich werd dann wohl auf die bündige Ausrichtung verzichten müssen. Falls allerdings jemandem noch etwas einfällt, würde ich mich über Antwort freuen!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
.clear {clear:both}
.tab {float:left; width:3em; margin:0}
</style></head>
<body>
<p class=tab>1</p><p>Kapitel Eins</p>
<div class=clear></div><p class=tab> </p>
<p class=tab>1.1</p><p>Eine Ebene tiefer</p>
<div class=clear></div>
<p class=tab> </p>
<p class=tab> </p>
<p class=tab>1.1.1</p>
<p>Noch eine Ebene tiefer</p>
<div class=clear></div>
<p class=tab>2</p><p>Wieder die erste Ebene</p></body>
</html>-
Vielen Dank, so funktioniert's auch im IE!
-
-
Na, ich werd dann wohl auf die bündige Ausrichtung verzichten müssen. Falls allerdings jemandem noch etwas einfällt, würde ich mich über Antwort freuen!
wie wärs mit einer ul, die nummerierung fügst du händisch ein - zwar nicht ganz die schöne variante, aber besser als eine div-suppe oder ein p-wüste ;)
-