[ERLEDIGT] DL (Listen)

[LetsDOIT]

Hallo Zusammen

Ich hoffe jemand kann mir einen Lösungsansatz zu folgender Frage geben.

Mittels dl's möchte ich folgendes darstellen:

Name: (ca 130px Abstand) Muster
Vorname: Auchmuster

Das hat soweit auch geklappt. Nun habe ich dann auf meiner Page nach einem h3 eine weitere DL. Diese müsste von der Struktur her aber anders aussehen und zwar so:

Seit 2012: Mitarbeiter
.................Bumbum AG
........................... -Telefon bedienen
.............................- Kaffee zubereiten

(ohne die Punkte, ist nur zum zeigen was ich meine wegen dem Abstand)

Ich habe im Internet nach Lösungsansätzen gesucht aber nichts Gescheites gefunden. Habe mir überlegt an der Stelle innerhalb der dl eine ul einzufügen aber irgendwie tönt das stilistisch nicht richtig. Oder kann man die dl weiter verschachteln für das neue Listenelement?

Hier noch was ich bereits habe:
<h5>Berufserfahrung</h5>
<dl>
<dt>Seit 2012:</dt>
<dd>Mitarbeiter Customer Care und Support</dd>
<dd>Firma GmbH</dd>
</dl>

Greets
LetsDOIT

 

[djheke]

DL können auch verschachtelt werden.

<h5>Berufserfahrung</h5>
<dl>
  <dt>Seit 2012:</dt>
  <dd>Mitarbeiter Customer Care und Support
    <dl>
       <dt>Aufgaben:</dt>
       <dd>Telefon bedienen</dd>
       <dd>Kaffee zubereiten</dd>
    </dl>
  </dd>
</dl>

 

[LetsDOIT]

Hallo djheke

Vielen Dank für die Antwort, genau das was ich gesucht habe.

Angenommen ich möchte die verschachtelte dl (innere dl) anderst formatieren als der Rest, kann ich der inneren dl eine Klasse zuweisen und die Liste so unabhändig via CSS formatieren?

Weil jetzt habe ich für die verschachtelte dl automatisch die Formatierung der äusseren dl (padding-left:15 etc.)

Gruss und einen schönen Tag euch allen
LetsDOIT

 

[MrMurphy]

Hallo

Du kannst dem inneren dl-Element eine Klasse zuweisen.

Bei HTML5 und CSS3 sollten Inhalt und Layout aber getrennt werden. Dazu gehört auch class und id möglichst zu vermeiden.

Dafür wurde das Konzept der Selektoren mit CSS3 stark erweitert und es sind bereits viele neue Selektoren geplant.

Für dein Problem reicht aber der älteste Selektor, das Leerzeichen. Um nur das innere dl-Element anzusprechen genügt es das dl doppelt zu schreiben, also zum Beispiel:

dl dl {
   background-color: yellow;
   padding: 1rem;
}
dl dl dt {
   background-color: red;
}
dl dl dd {
   background-color: blue;
}

In dem Beispiel wirken sich alle CSS-Anweisungen nur auf das innere dl-Element aus.

Falls es in der Website verschiedene dl-Elemente gibt, die alle auf das selbe CSS zugreifen, reicht es dem äußeren dl-Element eine Bezeichnung zu geben, zum Beispiel die Klasse "lebenslauf". Das CSS würde dann so aussehen:

.lebenslauf dl {
   background-color: yellow;
   padding: 1rem;
}
.lebenslauf dl dt {
   background-color: red;
}
.lebenslauf dl dd {
   background-color: blue;
}

Wenn das äußere dl-Element ein padding von 15px, das innere aber ein padding von 0 haben sollen:

dl {
   padding-left: 15px;
}
dl dl {
   padding-left: 0;
}

Gruss

MrMurphy

 

[Tronjer]

Einen Lebenslauf als Website zu präsentieren, halte ich für keine gute Idee. Der lässt sich vom Personaler nicht ausdrucken und ins Bewerbungsgespräch mitnehmen.

 

[LetsDOIT]

Hallo Zusammen

Vielen dank für die Super Hilfe. Das Ihr hier keine Mitgliedergebühren verrechnet wundert mich schon fast.:)

Ich werde den Lebenslauf nicht ins Netz laden, ist nur ein Übungsprojekt.

Greets
LetsDOIT

 

[LetsDOIT]

Hallo Leute

Noch ne kurze Frage. Irgendwie krieg ichs nicht mehr hin diese Frage als ''Erledigt'' zu markieren. Bei meiner ersten Frage hatte ich es gefunden. Wie kann ich die Frage als ''Erledigt'' markieren?

Greets
LetsDOIT

 

[scbawik]

Hallo Leute

Noch ne kurze Frage. Irgendwie krieg ichs nicht mehr hin diese Frage als ''Erledigt'' zu markieren. Bei meiner ersten Frage hatte ich es gefunden. Wie kann ich die Frage als ''Erledigt'' markieren?

Greets
LetsDOIT

Ja das ist hier ziemlich doof. Nach 3 Tagen oder so kann man seine Beiträge nicht mehr bearbeiten.
Ein Moderator wird das evtl. machen.

Diese Beschränkung war zwar mal gut gemeint, ist in der Praxis aber einfach nur lästig.