• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Liste mit Jahreszahlen

H

htmlvisitor

Neues Mitglied
Hallo

Ich muss eine Liste wie diese hier erstellen:

1980 geboren in Zürich
1986 Schule in Rom
mit Ferien in Paris
1998 Studium in Frankfurt

...und so weiter

noch versuche ich, ein aufwendiges Konstrukt mit divs zu vermeiden, sehe aber dass folgende Möglichkeit nach der Jahreszahl einen Punkt zeigt:

<ol>
<li value="1980">geboren in Zürich</li>
<li value=""></li>
<li value=""></li>
<li value=""></li>
<li value=""></li>
<li value=""></li>
</ol>

Gibt es eine einfache Möglichkeit, obige Liste zu erstellen?

Patrick
 
Du könntest eine Definitionsliste verwenden:
HTML: 
<dl>
  <dt>1980</dt>
  <dd>geboren in Zürich</dd>
  <dt>1986</dt>
  <dd>Schule in Rom</dd>
</dl>
Das kannst du dann per CSS verändern. Wenn du nicht weiterkommst, helfen wir natürlich, aber probiers erst mal selbst! Hier gibts ein paar Tipps: http://www.css4you.de/
 
Oder du machst es so:


Als erstes erstellt du eine geordnete Liste:

HTML: 
<ol id="lebenslauf">
<li>1980:   geboren in Zürich</li>
<li>1986:   Schule in Rom mit Ferien in Paris</li>
<li>1998:   Studium in Frankfurt</li>
</ol>
Und nun entfernst du per CSS die überflüssigen Aufzählungszahlen:

HTML: 
#lebenslauf, #lebenslauf li { list-style-type: none; }
Die ID (#lebenslauf) kannst du natürlich nach belieben ändern (wenn du es sowohl im HTML-, als auch im CSS-Code tust.)


Es wäre aber auch eine Tabelle sinnvoll:

HTML: 
<table id="lebenslauf">
<tr>
<th>Jahr:</th>
<th>Beschreibung:</th>
</tr>
<tr>
<th>1980</th>
<td>geboren in Zürich</td>
</tr>
<tr>
<th>1986</th>
<td>Schule in Rom mit Ferien in Paris</td>
</tr>
<tr>
<th>1998</th>
<td>Studium in Frankfurt</td>
</tr>
</table>
Natürlich kannst du auch weitere Spalten hinzufügen, um z.B. Bilder oder Bemerkungen unterzubringen.

Damit das alles noch etwas besser aussieht, fügst du noch diesen CSS-Code hinzu:

HTML: 
#lebenslauf, #lebenslauf th, #lebenslauf td { border: 1px solid #000; border-collapse: collapse; }
#lebenslauf th, #lebenslauf td { padding: 0.3em; text-align: left; }
#lebenslauf th { font-weight: bold; }


Welche Variante zu verwendest, bleibt dir überlassen. :D
 
Hallo,

ich würde das ganze mittels einer Definitionsliste und passendem CSS lösen. Den Text habe ich etwas erweitert (nicht unbedingt sinnvoll, aber das ist ja auch nicht der Sinn), damit das Verhalten der Zeilenumbrüche sichtbar wird.

Gesamter Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Definitionslisten definieren</title>
<style type="text/css">
.glossar { width: 400px; }

.glossar dt { float: left; }

.glossar dd {
margin-left: 10em;
padding-bottom: 0.8em;
}
</style>
</head>
<body>
<dl class="glossar">
<dt>1970</dt>
<dd>In Hamburg den Dom besucht, in Wien der Prater und in London das Riesenrad (ups, das gab es damals ja noch gar nicht)</dd>
<dt>1975</dt>
<dd>Einmal um die ganze Welt mit Karel Gott, dabei den Kaiser von Indonesien kennengelernt und in den USA die Niagara-Fälle in einer Tonne durchquert</dd>
<dt>1980</dt>
<dd>geboren in Zürich - ähm, da hatte ich doch bereits so viel erlebt, oder habe ich das nur geträumt?</dd>
<dt>1986</dt>
<dd>Schule in Rom mit Ferien in Paris, einem Ausflug nach München und Abendessen in Madrid</dd>
<dt>1998</dt>
<dd>Studium in Frankfurt am Main</dd>
</dl>
</body>
</html>
Zum Vergrößern anklicken....
Mit den Zahlen einfach etwas herumspielen. 400px ist die Gesamtbreite, 10em regelt den Abstand der rechten von der linken Spalte und die 0.8em ist der Abstand zwischen den einzelnen Angaben. Bei den em-Angaben daran denken, das Kommas als Punkt einzugeben sind und zwischen Zahl und em kein Leerzeichen stehen darf.

Meiner Ansicht nach hat so eine Liste den Vorteil, das sie einfach erweiterbar ist und man sich nicht um die Zeilenumbrüche innerhalb der Angaben Gedanken machen muss. Die Formatierungen können natürlich noch erweitert werden.

Das habe ich mir natürlich nicht selbst ausgedacht, sondern von der Seite

http://www.dyingeyes.de/2008/04/01/definitionslisten-wie-sie-im-buche-stehen/

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben