nicht angemeldet
Name ... Position - Namensliste
Gunnar Bittersmann
Gernot BackHallo!
Gibt es eine möglichkeit mit CSS eine Liste in folgendem Format zu generieren?
NAME - (Unbekannte Anzahl)PUNKTE - POSITION
z.B.
Name .......... Position (z.B. Chef)
Namezwei ...... Position (z.B. Hiwi)
Nocheinname ... Position (z.B. Assi)
Das Problem besteht vor allem in der variablen Anzahl von Punkten nach dem Namen, damit die Positionen wieder senkrecht in einer Linie stehen.
Habe schon über eine PHP-Lösung nachgedacht, in dem ich die Anzahl der Zeichen im Namen zähle und den Rest mit Punkten auffülle, ist aber auch nicht unproblematisch, da ja nicht alle Buchstaben immer gleich breit sind.
Gibt es in CSS eine Repeat-x Funktion für Zeichen? Damit man die Punkte bis zum Rand wiederholen kann?
Freue mich auf Eure Vorschläge,
lieben Dank im Voraus,
Philipp
-
Philipp,
Name .......... Position (z.B. Chef)
Namezwei ...... Position (z.B. Hiwi)
Nocheinname ... Position (z.B. Assi)Warum nicht eine Tabelle?
Du kannst den Tabellenzellen einen unteren Rand geben und den Inhalt etwas nach unten über diesen schieben (relativ positionieren).
Gunnar
--
“I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)-
Hallo Gunnar,
Name .......... Position (z.B. Chef)
Namezwei ...... Position (z.B. Hiwi)
Nocheinname ... Position (z.B. Assi)Warum nicht eine Tabelle?
Eigentlich müsstest du ja sagen: "Stell tabellarische Daten gefälligst auch so dar!", aber ich schwanke wie du wahrscheinlich auch noch zwischen einer Tabelle und einer Definitionsliste.
Du kannst den Tabellenzellen einen unteren Rand geben und den Inhalt etwas nach unten über diesen schieben (relativ positionieren).
Wenn es Philipp auf die gestrichelte Linie zwischen den Einträgen ankommt, könnte er auch mit einer Hintergrundgrafik arbeiten, dann erspart er sich die Positionierung und sein "dotted" wird dann auch in allen Browsern so dargestellt, wie er das will. Allerdings müsste er in jedem Fall den Text mit einer Hintergrundfarbe hinterlegen und zwar in beiden Varianten, der mit Hintergrundgrafik und der mit border-bottom und position, damit die gestrichelte Linie nicht durchscheint. Dafür braucht er dann wohl auch noch jeweils ein weiteres Element.
Gruß Gernot
-
Hallo nochmal,
Name .......... Position (z.B. Chef)
Namezwei ...... Position (z.B. Hiwi)
Nocheinname ... Position (z.B. Assi)... ich schwanke wie du wahrscheinlich auch noch zwischen einer Tabelle und einer Definitionsliste.
So könnte das dann aussehen:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> <html> <head> <title>Definitionsliste</title> <meta name="author" content="Gernot Back"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <style type="text/css"> [code lang=css] dl { margin-top:.4em; } dt { background:url(dot.gif) repeat-x 0 .5em; float:left; width:20em; } dt a { text-decoration:none; color:#0000AA; position:relative; top:-.4em; padding-right:.3em; background-color:#FFFFFF; } dt a:hover { text-decoration:underline; } dd { margin-left:20.5em; position:relative; top:-.4em; background-color:#FFFFFF; height:100%; }</style>
</head>
<body>
<dl>
<dt><a href="mailto:chef@kloebner.de">Dr. Paul Klöbner</a></dt>
<dd>Chef</dd>
<dt><a href="mailto:spezi@bundestach.de">Guido Müller-Lüdenscheid (MdB)</a></dt>
<dd>Aufsichtsratsvorsitzender</dd>
<dt><a href="mailto:info@kloebner.de">Erna Hoppenstedt</a></dt>
<dd>Chefsekretärin</dd>
<dt><a href="mailto:kurzwaren@kloebner.de">Hans Hallmackenreuther</a></dt>
<dd>Abteilungsleiter Kurzwaren</dd>
</dl>
</body>
</html>
[/code]Wenn man das Fenster sehr klein zieht, stehen die Lemmata (DT-Elemente) und die zugehörigen Einträge (DD-Elemente) nicht mehr auf einer Linie. Die Beeinflussbarkeit von semantischem Markup mittels CSS scheint ihre Grenzen zu haben, oder hat jemand eine andere Idee, wie man das lösen könnte?
Gruß Gernot
-
hi,
Wenn man das Fenster sehr klein zieht, stehen die Lemmata (DT-Elemente)
ich dachte, der plural wäre "Lemminge"?
und die zugehörigen Einträge (DD-Elemente) nicht mehr auf einer Linie. Die Beeinflussbarkeit von semantischem Markup mittels CSS scheint ihre Grenzen zu haben, oder hat jemand eine andere Idee, wie man das lösen könnte?
wenn DL eine entsprechende mindestbreite bekommt, sollte sich das eigentlich vermeiden lassen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga,
und die zugehörigen Einträge (DD-Elemente) nicht mehr auf einer Linie. Die Beeinflussbarkeit von semantischem Markup mittels CSS scheint ihre Grenzen zu haben, oder hat jemand eine andere Idee, wie man das lösen könnte?
wenn DL eine entsprechende mindestbreite bekommt, sollte sich das eigentlich vermeiden lassen.
Ja, nur hätte ich natürlich gerne, dass zuerst einmal zwischen "Guido Müller-Lüdenscheid" und "(MdB)", dann zwischen "Guido" und "Müller-Lüdenscheid" und dann zwischen "Müller-" und "Lüdenscheid" umgebrochen wird, bevor mir "Aufsichtsratsvorsitzender" vollkommen unnötigerweise in die zweite Zeile rutscht.
Gruß Gernot
-
hi,
Ja, nur hätte ich natürlich gerne, dass zuerst einmal zwischen "Guido Müller-Lüdenscheid" und "(MdB)", dann zwischen "Guido" und "Müller-Lüdenscheid" und dann zwischen "Müller-" und "Lüdenscheid" umgebrochen wird, bevor mir "Aufsichtsratsvorsitzender" vollkommen unnötigerweise in die zweite Zeile rutscht.
ach so, du stellst also ansprüche vergleichbar denen an ein DTP-programm :-)
ja, zugegeben, hier sind HTML, CSS und browser vermutlich überfordert. aber ganz so viel wollen sie m.E. auch gar nicht leisten - schließlich ist web- kein printdesign.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga,
ach so, du stellst also ansprüche vergleichbar denen an ein DTP-programm :-)
ja, zugegeben, hier sind HTML, CSS und browser vermutlich überfordert. aber ganz so viel wollen sie m.E. auch gar nicht leisten - schließlich ist web- kein printdesign.Nein, denn wenn ich eine Definitionsliste semanstisch falsch als Tabelle auszeichne, dann wird sie ohne Probleme meinen Ansprüchen gemäß dargestellt.
<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> <html> <head> <title>Tabellarische Definitionsliste</title> <meta name="author" content="Gernot Back"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <style type="text/css"> [code lang=css] td { vertical-align:bottom; padding:0 0 0 10px; } td.lemma { background:url(dot.gif) repeat-x bottom; position:relative; top:-.2em; padding:0 20px 0 0; } td > span { position:relative; top:0.2em; } td a { text-decoration:none; color:#0000AA; position:relative; top:.2em; background-color:#FFFFFF; } td a:hover { text-decoration:underline; }</style>
</head>
<body>
<table >
<tr>
<td class="lemma"><a href="mailto:chef@kloebner.de">Dr. Paul Klöbner</a></td>
<td><span>Chef</span></td>
</tr>
<tr>
<td class="lemma"><a href="mailto:spezi@bundestach.de">Guido Müller-Lüdenscheid (MdB)</a></td>
<td><span>Aufsichtsratsvorsitzender</span></td>
</tr>
<tr>
<td class="lemma"><a href="mailto:info@kloebner.de">Erna Hoppenstedt</a></td>
<td><span>Chefsekretärin</span></td>
</tr>
<tr>
<td class="lemma"><a href="mailto:kurzwaren@kloebner.de">Hans Hallmackenreuther</a></td>
<td><span>Abteilungsleiter Kurzwaren</span></td>
</tr>
</table>
</body>
</html>
[/code]Gruß Gernot
-
Hi Gernot,
Nein, denn wenn ich eine Definitionsliste semanstisch falsch als Tabelle auszeichne,
Ich denke nicht, dass eine Tabelle falsch ist, wenn sie zwei Spalten hat.
<td class="lemma">Ähm, wolltest du nicht sem^H^H^H strukturell vernünftig auszeichen? Mit
<th>? (Hat auch den schönen Effekt, dass eine Klasse unnötig ist.)Gunnar
--
“I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)-
Hallo Gunnar,
Ich denke nicht, dass eine Tabelle falsch ist, wenn sie zwei Spalten hat.
Dann frage ich mich, welchen eigenen semantischen Nutzen Definitionslisten denn überhaupt haben sollen, wenn sie grundsätzlich semantisch korrekt als Tabelle zu beschreiben sind: So ließen sich ja auch mehrere DD-Elemente als Tabellenzellen neben einem Lemma mit einem entsprechenden Row-Span darstellen.
Ich habe den Verdacht, dass es beim DL-Element und seinen Kindern gar nicht um Semantik geht, sondern um Optik: Will man Definitionslisten, so abgestuft haben wie in der Default-DL-Darstellung, so sind Tabellen nur mit ebensolchen CSS-Klimmzügen als Definitionslisten darzustellen wie umgekehrt die Definitionslisten in Tabellenanmutung.
Streng genommen wären das DL-Element und seine Kindelemente DD und DT dann aber als semantischer Unfug anzusehen, ebenso wie <font></font>, <i></i>, <u></u> und <b></b>.
Ähm, wolltest du nicht sem^H^H^H strukturell vernünftig auszeichen? Mit
<th>? (Hat auch den schönen Effekt, dass eine Klasse unnötig ist.)Ja daran habe ich nicht gedacht. Durch sprachliche Intuition verleitet, ist für mich ein Table-"Header" erst einmal oben. Aber du hast Recht, ein solcher kann natürlich je nach Schreibrichtung auch links oder rechts stehen.
Gruß Gernot
-
Hi Gernot,
Ich habe den Verdacht, dass es beim DL-Element und seinen Kindern gar nicht um Semantik geht, sondern um Optik:
Ich habe den Verdacht, dass es bei allen HTML-Elementen nicht um Semantik geht. (Oft geäußert, keiner glaubt mir.) HTML beschreibt die _Struktur_ eines Dokuments. (Und HTML 3.2 und HTML 4.01/XHTML 1.0 Transitional sogar die „Optik“, aber das lassen wir mal.)
Will man Definitionslisten,
Wenn du als Webseitenautor der Meinung bist, eine Definitionsliste beschreibt am besten die Struktur, nimm dl. Bist du der Meinung, eine Tabelle beschreibt am besten die Struktur, nimm table.
Wobei eine Tabelle die Daten weitaus besser strukturiert:
<foo> <bar> <baz>…</baz> <quz>…</quz> </bar> <bar> <baz>…</baz> <quz>…</quz> </bar> </foo>gegenüber einer Definitionsliste:
<foo> <baz>…</baz> <quz>…</quz> <baz>…</baz> <quz>…</quz> </foo>In einer Tabelle sind jeweils zusammengehörige Elemente noch in einem übergeordneten eingeschlossen (tr). Bei einer Definitionsliste hängen alle dt und dd nebeneinander unter dem dl-Element; nur die Reihenfolge spiegelt die Zusammengehörigkeit wider.
Und HTML zwingt dich nichtmal, eine Definitionsliste überhaupt vernünftig zu strukturieren. Wegen
<!ELEMENT dl (dt|dd)+>ist<dl> <dd>…</dd> <dt>…</dt> <dd>…</dd> <dd>…</dd> <dt>…</dt> <dt>…</dt> </dl>syntaktisch korrekt.
Vielleicht sollte man nicht ganz so pingelig sein. HTML ist dafür gemacht, Webseiten zu beschreiben, nicht dafür, die Daten auf diesen zu beschreiben.
Eine Textstelle einzig zur Hervorhebung mit
<h1>auszuzeichnen ist genauso unsinnig wie eine Überschrift mit<div style="…">.Aber die Entscheidung, ob Tabelle oder Definitionsliste, liegt wohl im Auge des Webseitenautors.
Gunnar
PS.
Unfug […], ebenso wie <font></font>, <i></i>, <u></u> und <b></b>.
Ja, leere font-, i-, u-, b-Elemente sind Unfug. ;-) SCNR.
--
“I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)
-
-
-
-
-
-
-
-
-
-
Hi,
...da ja nicht alle Buchstaben immer gleich breit sind.
nicht, wenn du eine diktengleiche Schriftart nimmst. In CSS definierst du diktengleiche Schriften mit der Angabe von font-family: monospace;.
Vielleicht gefällt dir ja diese Lösung.MfG Hopsel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001-
Hi Hopsel,
nicht, wenn du eine diktengleiche Schriftart nimmst. In CSS definierst du diktengleiche Schriften mit der Angabe von font-family: monospace;.
Vielleicht gefällt dir ja diese Lösung.In Verbindung mit der CSS-Eigenschaft white-space, solltest du auch auf die Punkte verzichten und einfache Leerzeichen nehmen können (sofern du das willst ;-).
MfG, Dennis.
--
Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:| mo:} zu:|
Das Leben ist kein Warenhaus - es nimmt nichts zurück. (Anette Louisan)
-
-
Danke erstmal an alle Beteiligten.
Ist ja ganz schon was zusammengekommen, auch wenn vieles dann mit der praktischen Lösung nichts mehr zu tun hatte. Interessant und hilfreich wars allemal.
Na, ich glaube, ich versuchs mal mittels php (Zeichen zählen) und fester Schriftbreite oder mit Definitionslisten oder Tabellen mit und /oder ohne Hintergrundgrafik. Auf die Punkte werde ich dann wohl leider verzichten müssen - da stoßen offenbar HTML und CSS an ihre Grenzen.
Ganz lieben Dank,
Philipp
-
Hallo Philipp,
Na, ich glaube, ich versuchs mal mittels php (Zeichen zählen) und fester Schriftbreite oder mit Definitionslisten oder Tabellen mit und /oder ohne Hintergrundgrafik. Auf die Punkte werde ich dann wohl leider verzichten müssen - da stoßen offenbar HTML und CSS an ihre Grenzen.
Wieso? Das mit den Punkten funktioniert doch prima über CSS, sowohl mit einer Tabelle, als auch mit einer Definitionsliste. Was an seine Grenzen stößt ist lediglich das semantische Markup. Aber das war ohnehin eine eher philosophische Diskussion, keine praktische.
Gruß Gernot
-