Ergebnis 1 bis 4 von 4

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

  1. #1
    Azubi(ne)
    Registriert seit
    22.05.2006
    Ort
    Kiel
    Beiträge
    81
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard ol ul li / Historie mit Jahreszahlen als HTML Liste

    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:
    1. <li value="1938">IrgendeinEreignis <li value="1948">IrgendeinEreignis <li value="1963">IrgendeinEreignis <li value="1971">IrgendeinEreignis <li value="1988">IrgendeinEreignis
    Die Stylesheet dazu sehen wie folgt aus:

    Code:
    #history &#123;				
    	display&#58; block;
    	margin&#58; 1.4em 0 .8em 4em;
    &#125;
    		
    	#history li &#123;
    		list-style&#58; decimal outside;
    		margin&#58; 0 0 .8em 0;
    	&#125;
    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.

    Gruß
    Heiko
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Wäre es nicht adäquat, den Usus nonetablierter Termini zu minimieren?

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich bin bekennender CSS-Fan. Aber was spricht für diese strukturierte Darstellung gegen eine Tabelle?

    Ansonsten fällt mir noch die Definitionsliste ein, wenn das Ereignis nicht zwingend in der gleichen Zeile wie die Jahreszahl sein muss:

    Code:
    <dl>
      <dt>1938 </dt>
      <dd>Irgendein Ereignis Irgendein Irgendein Ereignis Irgendein EreignisIrgendein Ereignis Irgendein EreignisEreignis Irgendein Ereignis Irgendein EreignisIrgendein Ereignis Irgendein Ereignis</dd>
      <dt>1948</dt>
      <dd>ein anderes Ereignis</dd>
    </dl>

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    22.05.2006
    Ort
    Kiel
    Beiträge
    81
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von sejuma
    Ich bin bekennender CSS-Fan. Aber was spricht für diese strukturierte Darstellung gegen eine Tabelle?

    Ansonsten fällt mir noch die Definitionsliste ein, wenn das Ereignis nicht zwingend in der gleichen Zeile wie die Jahreszahl sein muss:

    Code:
    <dl>
      <dt>1938 </dt>
      <dd>Irgendein Ereignis Irgendein Irgendein Ereignis Irgendein EreignisIrgendein Ereignis Irgendein EreignisEreignis Irgendein Ereignis Irgendein EreignisIrgendein Ereignis Irgendein Ereignis</dd>
      <dt>1948</dt>
      <dd>ein anderes Ereignis</dd>
    </dl>
    Moinsen!

    Über eine Tabelle hab ich auch schon nachgedacht, aber wenn man sonst nur "tabellenlos" denkt, mag man diese Dinger schon gar nicht mehr benutzen.
    Du als >>CSS Fan<< mit einer tabellenlosen Seite kennst das sicher.

    Also dann in etwa so?

    Code:
    <table>
    	<colgroup>
        	<col width="10%">
        	<col width="90%">
      	</colgroup>
    	<tr>
    		<th>Jahreszahl</th>
    		<td>Ereignis</td>
    	</tr>
    	
    	<tr>	
    		<th>Jahreszahl</th>
    		<td>Ereignis</td>
    	</tr>
    	
    	<tr>	
    		<th>Jahreszahl</th>
    		<td>Ereignis</td>
    	</tr>
    </table>
    Bei der Verwendung von Tabellen gibt es jedoch das Problem, dass man den "table rows" keinen Margin geben kann. Das hieße also, dass die Reihen direkt aneinander kleben. Cellspacing oder Cellpadding hingegen wirken sich auf alle Tabellenfelder aus.

    Einzige möglichkeit wäre den ths und tds ein Padding zu geben. Dies meiner Meinung nach aber eine nicht so elegante Methode.

    Mit einer Definitionsliste hab ich auch schon rumgespielt. Das sah folgendermaßen aus:

    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 &#123;
    	float&#58; left;
    	clear&#58; left;
    	width&#58; 10%;
    	text-align&#58; right;
    &#125;
    		
    	dd &#123;
    		float&#58; left;
    		margin&#58; 0 0 0 .8em;
    		width&#58; 80%;
    	&#125;
    Bringt jedoch eider 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!

    Ein

    DT DD

    DT DD

    DT DD

    scheint also auch nicht machbar.
    Wäre es nicht adäquat, den Usus nonetablierter Termini zu minimieren?

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    td
    &#123;padding-left&#58; 25px;&#125;
    Es kommt doch nicht auf die "Eleganz", sondern auf die Effektivität und Wirkung an.

    CSS heißt doch nicht automatisch, dass Tabellen generell verboten sind. Für's generelle Layout keine Tabellen, aber wo für strukturierte Darstellung angebracht haben sie immer noch ihren Sinn.

Ähnliche Themen

  1. Html liste
    Von badmicha im Forum HTML & CSS Forum
    Antworten: 20
    Letzter Beitrag: 31.12.2007, 18:49
  2. Zuweisen einer Liste aus Objekt einer neu erstellten Liste
    Von Rachgold im Forum Forum für alle anderen Programmiersprachen
    Antworten: 1
    Letzter Beitrag: 29.07.2007, 09:55
  3. HTML-Liste mit fixem Header erstellen
    Von Gawan im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 13.05.2007, 11:46
  4. Scrollfähige Liste in HTML-Seite formatieren
    Von Gawan im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.09.2006, 09:22
  5. Antworten: 5
    Letzter Beitrag: 09.07.2006, 13:01

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •