Supportnet / Forum / Webseiten/HTML
Inhaltsangabe darstellen?
Frage
Hi,
zerbreche mir gerade den Kopf wie man mit html eine solche Inhaltsangabe darstellen könnte:
[url=https://supportnet.de/faqsthread/809]Beispiel[/url]
Also mit den Punkten und den Zahlen rechts in einer Linie, das mit dem Einrücken je nach Unterpunkten ist ja einfach aber die Punkte dann berechnen die dann am Ende eine gerade Abschlusslienie der Seitenzahlen ergeben scheint mir unmöglich.
Fällt euch da eine Möglichkeit ein? <pre> hab ich schon probiert, dazu braucht man aber fixed width fonts auch genannt dicktengleich oder nichtproportional (gleiche Laufweite...).
Zu diesen Fonts gehören: "Courier New" (der hier bei Codedarstellung benutzt wird), Monaco und Chicago.
Von welchem kann man denn ausgehen, dass er auf den meisten Systemen installiert ist? Denke mal "Courier New" ist überall installiert aber der sieht nicht wirklich toll aus, für eine Inhaltsangabe wie oben gewünscht nicht wirklich schön.
Wenn also jemand eine Möglichkeit mit normalen Fonst wie Verdana oder Arial kennt die Darstellung so hinzubekommen das wäre Klasse.
Gruß fabian
Antwort 1 von Supermax
Nimm einfach den generischen Fontnamen "monospace"; also in Css
font-family: monospace;Antwort 2 von halfstone
Hi Supermax,
ich sehe schon mit Verdana wird das nichts.
Deinen Tipp mit dem generischen Fontnamen werde ich aber mal testen.
Gruß und Danke für die Antwort
Fabian
ich sehe schon mit Verdana wird das nichts.
Deinen Tipp mit dem generischen Fontnamen werde ich aber mal testen.
Gruß und Danke für die Antwort
Fabian
Antwort 3 von Pausenfueller
Hallo Fabian,
wenn du keine 'fixed width fonts' verwenden willst, fängt das Problem schon bei den unterschiedlich breiten Ziffern an und setzt sich dann immer weiter fort.
Eine Möglichkeit sehe ich dennoch im Arbeiten mit CSS-Boxen und dem Positionieren der verschiedenen Elemente 'Index-Ziffer', 'Text' und 'Seiten-Nummer'. Das mit den so schön übereinander angeordneten Pünktchen wirst du damit aber auch nicht so einfach hinbekommen.
Gruß
Pausenfüller
wenn du keine 'fixed width fonts' verwenden willst, fängt das Problem schon bei den unterschiedlich breiten Ziffern an und setzt sich dann immer weiter fort.
Eine Möglichkeit sehe ich dennoch im Arbeiten mit CSS-Boxen und dem Positionieren der verschiedenen Elemente 'Index-Ziffer', 'Text' und 'Seiten-Nummer'. Das mit den so schön übereinander angeordneten Pünktchen wirst du damit aber auch nicht so einfach hinbekommen.
Gruß
Pausenfüller
Antwort 4 von Jaja
öhm ich hab von html nicht wirklich viel ahnung, aber eines fällt mir ein:
latex bietet ja genau so ein inhaltsverzeichnis!
das hilft dir erstmal nix, aber es gibt diverse projekte wie z.b. "latex2html" u.a. welche auch html seiten erstellen können, die am ende dieses inhaltsverzeichnis so in html abbilden.
du könntrest das nutzen und dir evtl. hinterher anschauen, wie das realisiert wurde.. vielleicht kommt da der "aha!" effekt...
latex bietet ja genau so ein inhaltsverzeichnis!
das hilft dir erstmal nix, aber es gibt diverse projekte wie z.b. "latex2html" u.a. welche auch html seiten erstellen können, die am ende dieses inhaltsverzeichnis so in html abbilden.
du könntrest das nutzen und dir evtl. hinterher anschauen, wie das realisiert wurde.. vielleicht kommt da der "aha!" effekt...
Antwort 5 von halfstone
Hi Pausenfüller,
das habe ich mir auch schon überlegt, aber das ist glaube ich zu viel Aufwand für den kleinen Nutzen.
@Jaja,
das wäre ne Idee, leider hab ich mich an der Uni nie mit Latex beschäftigt und will es jetzt auch nicht tun, denke mal die machen das eben auch mit monospace Fonts, so werde ich es dann auch machen.
Gruß und Danke für die Hilfe
Fabian
das habe ich mir auch schon überlegt, aber das ist glaube ich zu viel Aufwand für den kleinen Nutzen.
@Jaja,
das wäre ne Idee, leider hab ich mich an der Uni nie mit Latex beschäftigt und will es jetzt auch nicht tun, denke mal die machen das eben auch mit monospace Fonts, so werde ich es dann auch machen.
Gruß und Danke für die Hilfe
Fabian
Antwort 6 von son_quatsch
Wie wäre denn folgendes?
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="de" dir="ltr"><head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>inhalt</title>
<style type="text/css">
div.seite { float: right; }
li { border-bottom: 1px dotted #000000; }
</style>
</head><body>
<ol>
<li><div class="seite">1</div>eins</li>
<li><div class="seite">2</div>zwei</li>
<li style="border: 0;">drei<ol>
<li><div class="seite">3</div>alpha</li>
<li><div class="seite">4</div>beta</li>
</ol></li>
<li><div class="seite">5</div>anhang</li>
</ol>
</body></html>
Antwort 7 von halfstone
Hi son_quatsch,
ich staune, das sieht schon mal gut aus, nur leider fehlen dann die Darstellungen der Unterpunkte:
2 blabla
2.1 blabla
2.2 blabla.
Sieht aber toll aus.
Gruß Fabian
ich staune, das sieht schon mal gut aus, nur leider fehlen dann die Darstellungen der Unterpunkte:
2 blabla
2.1 blabla
2.2 blabla.
Sieht aber toll aus.
Gruß Fabian
Antwort 8 von son_quatsch
Nein, HTML unterstützt keine verschachtelten Zählungen. In diesem Fall müsstest du das alles "zu Fuß" machen:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="de" dir="ltr"><head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>inhalt</title>
<style type="text/css">
div.seite { float: right; }
div.kapitel { float: left; width: 50px; }
div.titel { border-bottom: 1px dotted #000000; }
</style>
</head><body>
<div class="titel">
<div class="kapitel">1.</div>
<div class="seite">1</div>
eins
</div><div class="titel">
<div class="kapitel">2.</div>
<div class="seite">2</div>
zwei
</div><div class="titel">
<div class="kapitel">3.1</div>
<div class="seite">3</div>
drei alpha
</div><div class="titel">
<div class="kapitel">3.2</div>
<div class="seite">4</div>
drei beta
</div>
</body></html>Antwort 9 von halfstone
Hi son_quatsch,
jetzt fehlen mir noch die Einrückungen der Punkte 2.1 und 2.2 (also der Zahlen) die sollen ja gegenüber dem Punkt 2. um 3 em eingerückt sein und es muss noch eine Ebene weiter eingerückt werden können also z.B. Punkt 3.1.1.
Aber vielen Dank schon mal
Gruß Fabian
jetzt fehlen mir noch die Einrückungen der Punkte 2.1 und 2.2 (also der Zahlen) die sollen ja gegenüber dem Punkt 2. um 3 em eingerückt sein und es muss noch eine Ebene weiter eingerückt werden können also z.B. Punkt 3.1.1.
Aber vielen Dank schon mal
Gruß Fabian
Antwort 10 von Pausenfueller
Hallo Fabian,
ich hab mal A8 etwas aufgepeppt:
---------------------------------------------------------
<style type="text/css">
<!--
#list{
margin:0;
padding:0;
width:60%;}
#list li{
list-style:none;
padding:0px;
margin:4px 0 4px 10px;}
#list .sublist1 li{
list-style:none;
padding:0px;
margin:1px 0 1px 10px;
width:100%}
#list .sublist2 li{
list-style:none;
padding:0px;
margin:1px 0 1px 10px;
width:100%}
div.seite { float: right; }
div.kapitel { float: left; width: 50px; }
div.titel { border-bottom: 1px dotted #000000; }
-->
</style>
<ul id="list">
<li><div class="titel"><div class="kapitel">1.</div><div class="seite">Seite 1</div>Allgemein</div></li>
<li><div class="titel"><div class="kapitel">2.</div><div class="seite">Seite 5</div>SCSI und EIDE parallel</div>
<ul class="sublist1">
<li><div class="titel"><div class="kapitel">2.1.</div><div class="seite">Seite 6</div>Größenbeschränkungen</div></li>
<li><div class="titel"><div class="kapitel">2.2.</div><div class="seite">Seite 7</div>Die Beschränkungen durch das BIOS</div></li>
<li><div class="titel"><div class="kapitel">2.3.</div><div class="seite">Seite 8</div>Die Beschränkungen der Betriebssysteme</div></li>
</ul>
</li>
<li><div class="titel"><div class="kapitel">3.</div><div class="seite">Seite 9</div>Partitionierung mit Windows XP</div>
<ul class="sublist1">
<li><div class="titel"><div class="kapitel">3.1.</div><div class="seite">Seite 10</div>Windows XP Installation auf eine leere Festplatte</div></li>
<li><div class="titel"><div class="kapitel">3.2.</div><div class="seite">Seite 11</div>Partitionieren und formatieren mit Windows XP</div></li>
<li><div class="titel"><div class="kapitel">3.3.</div><div class="seite">Seite 12</div>Partitionierung mit Windows 9x und ME</div>
<ul class="sublist2">
<li><div class="titel"><div class="kapitel">3.3.1.</div><div class="seite">Seite 13</div>Partitionieren mit fdisk</div></li>
<li><div class="titel"><div class="kapitel">3.3.2.</div><div class="seite">Seite 14</div>Die Optionen von fdisk</div></li>
<li><div class="titel"><div class="kapitel">3.3.3.</div><div class="seite">Seite 15</div>Formatierung</div>
</ul>
</li>
</ul>
</li>
<li><div class="titel"><div class="kapitel">99.</div><div class="seite">Seite 99</div>Ende der Formatierungsbeispiele ;o)</div></li>
</ul>
---------------------------------------------
Gruß
Pausenfüller
ich hab mal A8 etwas aufgepeppt:
---------------------------------------------------------
<style type="text/css">
<!--
#list{
margin:0;
padding:0;
width:60%;}
#list li{
list-style:none;
padding:0px;
margin:4px 0 4px 10px;}
#list .sublist1 li{
list-style:none;
padding:0px;
margin:1px 0 1px 10px;
width:100%}
#list .sublist2 li{
list-style:none;
padding:0px;
margin:1px 0 1px 10px;
width:100%}
div.seite { float: right; }
div.kapitel { float: left; width: 50px; }
div.titel { border-bottom: 1px dotted #000000; }
-->
</style>
<ul id="list">
<li><div class="titel"><div class="kapitel">1.</div><div class="seite">Seite 1</div>Allgemein</div></li>
<li><div class="titel"><div class="kapitel">2.</div><div class="seite">Seite 5</div>SCSI und EIDE parallel</div>
<ul class="sublist1">
<li><div class="titel"><div class="kapitel">2.1.</div><div class="seite">Seite 6</div>Größenbeschränkungen</div></li>
<li><div class="titel"><div class="kapitel">2.2.</div><div class="seite">Seite 7</div>Die Beschränkungen durch das BIOS</div></li>
<li><div class="titel"><div class="kapitel">2.3.</div><div class="seite">Seite 8</div>Die Beschränkungen der Betriebssysteme</div></li>
</ul>
</li>
<li><div class="titel"><div class="kapitel">3.</div><div class="seite">Seite 9</div>Partitionierung mit Windows XP</div>
<ul class="sublist1">
<li><div class="titel"><div class="kapitel">3.1.</div><div class="seite">Seite 10</div>Windows XP Installation auf eine leere Festplatte</div></li>
<li><div class="titel"><div class="kapitel">3.2.</div><div class="seite">Seite 11</div>Partitionieren und formatieren mit Windows XP</div></li>
<li><div class="titel"><div class="kapitel">3.3.</div><div class="seite">Seite 12</div>Partitionierung mit Windows 9x und ME</div>
<ul class="sublist2">
<li><div class="titel"><div class="kapitel">3.3.1.</div><div class="seite">Seite 13</div>Partitionieren mit fdisk</div></li>
<li><div class="titel"><div class="kapitel">3.3.2.</div><div class="seite">Seite 14</div>Die Optionen von fdisk</div></li>
<li><div class="titel"><div class="kapitel">3.3.3.</div><div class="seite">Seite 15</div>Formatierung</div>
</ul>
</li>
</ul>
</li>
<li><div class="titel"><div class="kapitel">99.</div><div class="seite">Seite 99</div>Ende der Formatierungsbeispiele ;o)</div></li>
</ul>
---------------------------------------------
Gruß
Pausenfüller
Antwort 11 von katy
Hallo Pausenfüller,
leider habe ich gerade keine Zeit, deinen Code komplett zu analysieren, allerdings verstehe ich auf Anhieb nicht, wozu du die vielen DIVs brauchst. Die sollen doch alle inline sein, also sind allenfalls span angesagt.
Oder übersehe ich etwas?
Der Code wirkt jedenfalls auf den ersten Blick sehr "quick & dirty"
katy
leider habe ich gerade keine Zeit, deinen Code komplett zu analysieren, allerdings verstehe ich auf Anhieb nicht, wozu du die vielen DIVs brauchst. Die sollen doch alle inline sein, also sind allenfalls span angesagt.
Oder übersehe ich etwas?
Der Code wirkt jedenfalls auf den ersten Blick sehr "quick & dirty"
katy
Antwort 12 von Pausenfueller
Hallo Katy,
ich habe lediglich aus Neugier versucht, den Vorschlag aus A8 irgendwie zu den von Fabian erwünschten Einrückungen zu bewegen. Über die DIVs habe ich mir dabei keine weiteren Gedanken gemacht, bzw. ob man es irgenwie anders lösen kann, dass innerhalb einer Zeile die Kapitelziffern linksbündig, die Seitenangabe rechtsbündig und die Kapitelüberschriften in einem festen Abstand zum linken Rand stehen.
Erreicht habe ich, dass es mit diesem "quick & dirty"-Code möglich ist, auch mit nichtproportionalen Schriften ein Inhaltsverzeichnis in der in Fabians Beispiel (siehe o.a. Link) dargestellten Form zu erstellen. Dass er verbesserungsfähig ist, möchte ich nicht in Abrede stellen, dazu befasse ich mich einfach zu selten mit diesem Thema.
Fabian wird dir bestimmt dankbar sein, wenn du das einfacher löst und dabei eventuell auch noch die von ihm gewünschte Pünktchen-Auffüllung zwischen Kapitelüberschrift und Seitenangabe hinbekommst. Ich selber lerne auch gerne dazu.
Ansonsten finde ich es nicht gerade die feine Art, ohne entsprechenden Gegenvorschlag bzw. sachliche Korrektur Beiträge anderer User in Frage zu stellen.
Gruß
Pausenfüller
ich habe lediglich aus Neugier versucht, den Vorschlag aus A8 irgendwie zu den von Fabian erwünschten Einrückungen zu bewegen. Über die DIVs habe ich mir dabei keine weiteren Gedanken gemacht, bzw. ob man es irgenwie anders lösen kann, dass innerhalb einer Zeile die Kapitelziffern linksbündig, die Seitenangabe rechtsbündig und die Kapitelüberschriften in einem festen Abstand zum linken Rand stehen.
Erreicht habe ich, dass es mit diesem "quick & dirty"-Code möglich ist, auch mit nichtproportionalen Schriften ein Inhaltsverzeichnis in der in Fabians Beispiel (siehe o.a. Link) dargestellten Form zu erstellen. Dass er verbesserungsfähig ist, möchte ich nicht in Abrede stellen, dazu befasse ich mich einfach zu selten mit diesem Thema.
Fabian wird dir bestimmt dankbar sein, wenn du das einfacher löst und dabei eventuell auch noch die von ihm gewünschte Pünktchen-Auffüllung zwischen Kapitelüberschrift und Seitenangabe hinbekommst. Ich selber lerne auch gerne dazu.
Ansonsten finde ich es nicht gerade die feine Art, ohne entsprechenden Gegenvorschlag bzw. sachliche Korrektur Beiträge anderer User in Frage zu stellen.
Gruß
Pausenfüller
Antwort 13 von halfstone
Hi Pausenfueller,
der Gegenvorschlag von katy kommt sicher noch ;-)
Also der letzte Vorschlag von dir ist von der Darstellung schon fast perfekt, nur die Seitenzahlen sind jetzt nicht mehr rechstbündig.
Gruß und Danke für die Mühe
Fabian
der Gegenvorschlag von katy kommt sicher noch ;-)
Also der letzte Vorschlag von dir ist von der Darstellung schon fast perfekt, nur die Seitenzahlen sind jetzt nicht mehr rechstbündig.
Gruß und Danke für die Mühe
Fabian
Antwort 14 von Pausenfueller
Hallo Fabian,
zuerst wusste ich nicht, was du mit den Seitenzahlen meinst und habe deshalb nochmal nachgesehen.
Ohne DOCTYPE oder mit HTML 4.01 wird bei mir unter Opera 9.24 und IE6 die Tabelle so angezeigt, wie sie sein sollte, beim FireFox 2.0 kommt es aber rechts zu Verschiebungen, die du vermutlich meinst. Was da vom FF nicht akzeptiert, ignoriert oder anders interpretiert wird, kann ich leider auf Anhieb nicht feststellen.
An die strengeren Syntax-Anforderungen von XHTML will ich da garnicht erst denken, aber eventuell kommt noch was brauchbareres rein.
Gruß
Pausenfüller
zuerst wusste ich nicht, was du mit den Seitenzahlen meinst und habe deshalb nochmal nachgesehen.
Ohne DOCTYPE oder mit HTML 4.01 wird bei mir unter Opera 9.24 und IE6 die Tabelle so angezeigt, wie sie sein sollte, beim FireFox 2.0 kommt es aber rechts zu Verschiebungen, die du vermutlich meinst. Was da vom FF nicht akzeptiert, ignoriert oder anders interpretiert wird, kann ich leider auf Anhieb nicht feststellen.
An die strengeren Syntax-Anforderungen von XHTML will ich da garnicht erst denken, aber eventuell kommt noch was brauchbareres rein.
Gruß
Pausenfüller
Antwort 15 von kicia
Hallo,
es könnte daran liegen, daß div.titel keine breite zugewiesen wurde.
So darf der Browser sich aussuchen, ob es das div auf 100% setzt oder auf was auch immer.
Gruß, kicia
es könnte daran liegen, daß div.titel keine breite zugewiesen wurde.
So darf der Browser sich aussuchen, ob es das div auf 100% setzt oder auf was auch immer.
Gruß, kicia
Antwort 16 von katy
Hallo Pausenfüller,
das liegt am Zusammenspiel von margin und float, was beim IE aufgrund des bekannten Bugs beim Berechnen von Boxen zufällig mal den gewünschten Erfolg hat.
Opera verhält sich im Quirksmodus hier wie ein IE.
Zu Abhilfeideen oder dem von Fabian gewünschten Alternativvorschlag kann ich leider zZt. kaum kommen, denn das Spielen mit CSS1 (höchstens 2, denn es soll ja IE-verträglich sein) dauert, und ich habe gerade einen größeren Auftrag (der aber auch mehr einbringt als max. 50 Bonuspunkte).
Wenn ich hier mal was schreibe, dann eher zur Entspannung, aber - sorry - stundenlang arbeiten an einem Supportnetprojekt ist gerade nicht drin. Vielleicht nach Ostern wieder :-(
katy
das liegt am Zusammenspiel von margin und float, was beim IE aufgrund des bekannten Bugs beim Berechnen von Boxen zufällig mal den gewünschten Erfolg hat.
Opera verhält sich im Quirksmodus hier wie ein IE.
Zu Abhilfeideen oder dem von Fabian gewünschten Alternativvorschlag kann ich leider zZt. kaum kommen, denn das Spielen mit CSS1 (höchstens 2, denn es soll ja IE-verträglich sein) dauert, und ich habe gerade einen größeren Auftrag (der aber auch mehr einbringt als max. 50 Bonuspunkte).
Wenn ich hier mal was schreibe, dann eher zur Entspannung, aber - sorry - stundenlang arbeiten an einem Supportnetprojekt ist gerade nicht drin. Vielleicht nach Ostern wieder :-(
katy
Antwort 17 von Pausenfueller
@ katy,
dann wünsch ich dir erstmal fröhliches Eiersuchen.
Man sollte halt doch nicht schnell mal zwei Teillösungen mit der heißen Nadel zusammenstricken und sich freuen, wenn es zufällig, aber eben auch nur unter bestimmten Umständen klappt. ;o)
Gruß
Pausenfüller
dann wünsch ich dir erstmal fröhliches Eiersuchen.
Man sollte halt doch nicht schnell mal zwei Teillösungen mit der heißen Nadel zusammenstricken und sich freuen, wenn es zufällig, aber eben auch nur unter bestimmten Umständen klappt. ;o)
Gruß
Pausenfüller