mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 17:13 Benutzername: Passwort: Auto-Login

Thema: ol ul li / Historie mit Jahreszahlen als HTML Liste vom 22.06.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> ol ul li / Historie mit Jahreszahlen als HTML Liste
Seite: 1, 2  Weiter
Autor Nachricht
mr.scruff
Threadersteller

Dabei seit: 22.04.2006
Ort: Kiel
Alter: 43
Geschlecht: Männlich
Verfasst Fr 22.06.2007 18:48
Titel

ol ul li / Historie mit Jahreszahlen als HTML Liste

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen!

Folgendes Problem:
In einem aktuellen Projekt soll es eine Seite names Historie geben. Auf dieser Seite möchte das Unternehmen in einer Kurzübersicht die eigene Historie darstellen.

Das ganz soll so aussehen:

1938 IrgendeinEreignis
1948 IrgendeinEreignis
1963 IrgendeinEreignis
1971 IrgendeinEreignis
1988 IrgendeinEreignis


Bei den zu verwendenden HTML Elementen habe ich natürlich sofort an eine "geordnete oder ungeordnete Liste" gedacht und folgendes Markup fabriziert:

Code:

<ol id="history">
   <li value="1938">IrgendeinEreignis</li>
   <li value="1948">IrgendeinEreignis</li>
   <li value="1963">IrgendeinEreignis</li>
   <li value="1971">IrgendeinEreignis</li>
   <li value="1988">IrgendeinEreignis</li>
</ol>


Die Stylesheet dazu sehen wie folgt aus:

Code:

#history {            
   display: block;
   margin: 1.4em 0 .8em 4em;
}
      
   #history li {
      list-style: decimal outside;
      margin: 0 0 .8em 0;
   }


Soweit so gut!
Ein großes Problem gibt es jetzt jedoch.
Wie bei einer OL so üblich, steht hinter jeder Zahl ein "." (Punkt). Der darf bei einer Jahresaufzählung aber nicht sein. Was also tun?

Eine UL basteln und die Jahreszahlen direkt ins Listenelement mit hineinschreiben?
Geht nicht, weil bei längerem Text dann die zweite Zeile direkt unter der Zahl anfängt (so wie bei "list-style: inside;").

Hat jemand ne Idee, wie soetwas semantisch korrekt umzusetzen ist?
Per Definitionsliste vielleicht? Wenn ja, wie? Das "Floating" und "Clearing" funktioniert bei DT- und DD-Elementen leider nicht so, wie man das von normalen Blockelementen kennt.

Hoffe auf rege Beteiligung und zündende Ideen. *zwinker*

Gruß
Heiko


Zuletzt bearbeitet von mr.scruff am Fr 22.06.2007 18:51, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
EHST
Gesperrt

Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
Verfasst Fr 22.06.2007 19:02
Titel

Re: ol ul li / Historie mit Jahreszahlen als HTML Liste

Antworten mit Zitat Zum Seitenanfang

mr.scruff hat geschrieben:

Hat jemand ne Idee, wie soetwas semantisch korrekt umzusetzen ist?
Per Definitionsliste vielleicht? Wenn ja, wie? Das "Floating" und "Clearing" funktioniert bei DT- und DD-Elementen leider nicht so, wie man das von normalen Blockelementen kennt.

Hoffe auf rege Beteiligung und zündende Ideen. *zwinker*

Gruß
Heiko


Genau, mit einer Definitionsliste. ist doch sogar noch besser als eine normale Liste. Sieht sogar noch geordneter aus.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Fr 22.06.2007 19:15
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
Hat jemand ne Idee, wie soetwas semantisch korrekt umzusetzen ist?

Wenn du es sematisch richtig haben willst, dann würde ich, wie es EHST auch schon geschrieben hat, eine Definitionsliste.
Semantisch wären geordnete und ungeordnete Liste aber ebenso korrekt.
Nur Verzeichnisliste (<dir>) oder Menüliste (<menu>) würden semantisch nicht passen.

Passiert denn in deiner Liste bei jedem Jahr was?
Oder kommt es in der Liste auch mal vor, daß eine Jahreszahl ausgelassen wird?
  View user's profile Private Nachricht senden
mr.scruff
Threadersteller

Dabei seit: 22.04.2006
Ort: Kiel
Alter: 43
Geschlecht: Männlich
Verfasst Fr 22.06.2007 19:19
Titel

Re: ol ul li / Historie mit Jahreszahlen als HTML Liste

Antworten mit Zitat Zum Seitenanfang

EHST hat geschrieben:
Genau, mit einer Definitionsliste. ist doch sogar noch besser als eine normale Liste. Sieht sogar noch geordneter aus.


Habe ich schon probiert und hat leider nicht so funktioniert wie ich mir das vorstelle.

Wie schon gesagt, die Definitionslisten-Elemente reagieren irgendwie nicht richtig auf "clear".

Markup:

Code:
<dl>
   <dt>1938</dt>
   <dd>IrgendeinEreigniss</dd>
   
   <dt>1948</dt>
   <dd>IrgendeinEreigniss</dd>
   
   <dt>1963</dt>
   <dd>IrgendeinEreigniss</dd>
   
   <dt>1971</dt>
   <dd>IrgendeinEreigniss</dd>
</dl>


Stylesheets in etwa so:

Code:
dt {
   float: left;
   clear: left;
   width: 10%;
   text-align: right;
}
      
   dd {
      float: left;
      margin: 0 0 0 .8em;
      width: 80%;
   }


Bringt leider nicht den gewünschten Erfolg.
Hab auch schon "dd { clear: right; }" probiert und funzt auch nicht.
Der nachfolgende Definitionslisten-Term fließt immer hinter die Definition und ignoriert "dt { clear: left; }" oder "dd { clear: right; }" völlig!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mr.scruff
Threadersteller

Dabei seit: 22.04.2006
Ort: Kiel
Alter: 43
Geschlecht: Männlich
Verfasst Fr 22.06.2007 19:26
Titel

Antworten mit Zitat Zum Seitenanfang

rob hat geschrieben:
Passiert denn in deiner Liste bei jedem Jahr was?
Oder kommt es in der Liste auch mal vor, daß eine Jahreszahl ausgelassen wird?


Nein, es passiert nicht jedes Jahr etwas, deshalb hab ich den Listenelementen ja auch ein "value" mit der jeweiligen Jahreszahl gegeben.
Wie gesagt, es stört mich halt nur der blöde Punkt hinter den Zahlen zu meinem Glück. * Keine Ahnung... *

rob hat geschrieben:

Nur Verzeichnisliste (<dir>) oder Menüliste (<menu>) würden semantisch nicht passen.

Jo, sind ja auch außerdem "deprecated".

Schon mal ein dickes DANKE für die schnellen Antworten.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
EHST
Gesperrt

Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
Verfasst Fr 22.06.2007 19:53
Titel

Re: ol ul li / Historie mit Jahreszahlen als HTML Liste

Antworten mit Zitat Zum Seitenanfang

mr.scruff hat geschrieben:
EHST hat geschrieben:
Genau, mit einer Definitionsliste. ist doch sogar noch besser als eine normale Liste. Sieht sogar noch geordneter aus.


Habe ich schon probiert und hat leider nicht so funktioniert wie ich mir das vorstelle.

Wie schon gesagt, die Definitionslisten-Elemente reagieren irgendwie nicht richtig auf "clear".

Markup:

Code:
<dl>
   <dt>1938</dt>
   <dd>IrgendeinEreigniss</dd>
   
   <dt>1948</dt>
   <dd>IrgendeinEreigniss</dd>
   
   <dt>1963</dt>
   <dd>IrgendeinEreigniss</dd>
   
   <dt>1971</dt>
   <dd>IrgendeinEreigniss</dd>
</dl>


Stylesheets in etwa so:

Code:
dt {
   float: left;
   clear: left;
   width: 10%;
   text-align: right;
}
      
   dd {
      float: left;
      margin: 0 0 0 .8em;
      width: 80%;
   }


Bringt leider nicht den gewünschten Erfolg.
Hab auch schon "dd { clear: right; }" probiert und funzt auch nicht.
Der nachfolgende Definitionslisten-Term fließt immer hinter die Definition und ignoriert "dt { clear: left; }" oder "dd { clear: right; }" völlig!


Wie soll es denn aussehen?

DT: DD

oder

DT:
DD
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mr.scruff
Threadersteller

Dabei seit: 22.04.2006
Ort: Kiel
Alter: 43
Geschlecht: Männlich
Verfasst Fr 22.06.2007 19:56
Titel

Re: ol ul li / Historie mit Jahreszahlen als HTML Liste

Antworten mit Zitat Zum Seitenanfang

EHST hat geschrieben:


Wie soll es denn aussehen?

DT: DD

oder

DT:
DD



DT DD

DT DD

DT DD


Zuletzt bearbeitet von mr.scruff am Fr 22.06.2007 19:57, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 23.06.2007 01:02
Titel

Antworten mit Zitat Zum Seitenanfang

So quasi * Keine Ahnung... * oder hab ichs falsch verstanden?
Code:
<!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">
<head>
<title>DL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
DT {
   clear:left;
   float:left;
}
DD {
   clear:right;
}
-->
</style>
</head>

<body>
<dl>
   <dt>1938</dt>
   <dd>IrgendeinEreigniss</dd>
   
   <dt>1948</dt>
   <dd>IrgendeinEreigniss</dd>
   
   <dt>1963</dt>
   <dd>IrgendeinEreigniss</dd>
   
   <dt>1971</dt>
   <dd>IrgendeinEreigniss</dd>
</dl>
</body>
</html>
  View user's profile Private Nachricht senden
 
Ähnliche Themen HTML/CSS - Problem mit Liste
Liste in html mit tabs ertsellen
HTML-Liste mit Nested Sets erstellen
[Hilfe] Formatierung von HTML-Liste/Menü
[HTML] Abstände zwischen Bildern (Liste)
InDesign: Historie der Änderungsverfolgung löschen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.