CSS dl dt dd stylen responsive

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

nelmow

Neues Mitglied
18 Juli 2019
4
0
1
35
Hallo Zusammen,

ich habe ein Problem. Normalerweise würde ich das mit einer Tabelle lösen aber das ist leider nicht die Anforderung. Die Anforderung ist eine Definition List.
https://jsfiddle.net/0c6kp2tz/1/

Der Ausgangszustand so soll sein, dass die alle in einer Reihe sind. Dies funktioniert auch soweit ganz gut. Das Responsive Verhalten soll so sein, dass die Elemente alle untereinander stehen. Also so zum Beispiel

Name
Max Mustermann
Alter
34
Beruf
Schlosser

Das bekomme ich allerdings nicht so gut hin. Kann mir jemand da helfen?
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.496
220
63
Die Anforderung ist eine Definition List.
Vollkommen richtig. So eine Auflistung sind keine Tabellendaten und damit wäre eine Tabelle sachlich falsch.

Da über Definition Lists leider von ziemliche vielen Leuten ziemlich viel Mist geschrieben wurde, wurden die mit HTML5 abgeschafft und durch das dl-Element ersetzt. Macht für Webseitenersteller in der Praxis zwar keinen Unterschied, allerdings wurde gleichzeitig in den HTML-Regel festgelegt, dass viele sogenannte "Informationen", die früher im Internet rumgeisterten, falsch sind.

In HTML5 sollen zudem unnötige Angaben vermieden werden. Dazu gehören auch überflüssige Klassen.

Und natürlich gehören immer minestens ein dt- und ein dd-Element zusammen.

Nach dem bewährten Vorgehen "Mobile First" würde ich zu folgendem HTML-Quelltext:

Code:
<dl class="dls">
   <dt>Name</dt>
   <dd>Max Mustermann</dd>
   <dt>Alter</dt>
   <dd>34</dd>
   <dt>Beruf</dt>
   <dd>Schlosser</dd>
</dl>
folgendes CSS verwenden:

Code:
   /*.dls*/
   @media all {
      .dls {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      .dls dt {
         margin: 0rem 0rem 0rem 0rem;
      }
      .dls dt:nth-of-type(1n+2) {
         margin: 1rem 0rem 0rem 0rem;
      }
      .dls dd {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
   }
   @media only screen and (min-width: 600px) {
      .dls {
         display: flex;
         flex-wrap: wrap;
      }
      .dls dt {
         margin: 0rem 0rem 0rem 0rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 150px;
      }
      .dls dt:nth-of-type(1n+2) {
         margin: 0rem 0rem 0rem 0rem;
      }
      .dls dd {
         margin: 0rem 0rem 0rem 0rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 160px);
      }
   }
 
Reactions: nelmow

nelmow

Neues Mitglied
18 Juli 2019
4
0
1
35
Puhh... das sieht sehr gut aus. Ist es möglich die erste Spalte etwas breiter zu machen? Ich kenne mich mit Flexboxen noch nicht so wirklich aus aber ich werde mich da mal hinter klemmen.

Ich würde am liebsten die Beschreibung, also die dd's mehr mittig im Content haben und es wird responsiv kleiner.
 
Zuletzt bearbeitet:
Werbung: