CSS für überlappende Spielkarten

[Regina Schlauklug]

Ich habe eine Liste an Karten und möchte die so darstellen, dass die sich etwas versetzt voneinander überlappen.

In verlinktem Beispiel habe ich das im ersten <ul> mit inline-styles gemacht, dass es so aussieht wie ich will.

Gibt es dafür eine Lösung ohne inline-styles?

Wichtig ist mir dass das <ul> alle <li>s umfasst (deshalb der rote Rahmen im Beispiel, um das zu verdeutlichen)
Die Reihenfolge in welcher die <li>s dargestellt werden ist egal (ob das Erste ganz vorne ist, oder das Letzte ganz vorne spielt für mich keine rolle). Die Anzahl der <li>s ist variabel.

[Camping_RIDER]

Aloha ;)

Interessante Fragestellung. Ich experimentiere ein wenig damit, bin aber selber kein CSS-Superheld.

Zum Experimentieren mag hier Codepen tatsächlich die bessere Alternative sein (wegen der automatischen Anzeige bei Änderungen) - ich hab da mal ein Pen aufgemacht.

Grüße,

RIDER

[TS]

Hello,

Ich habe eine Liste an Karten und möchte die so darstellen, dass die sich etwas versetzt voneinander überlappen.

In verlinktem Beispiel habe ich das im ersten <ul> mit inline-styles gemacht, dass es so aussieht wie ich will.

Gibt es dafür eine Lösung ohne inline-styles?

Mit "Brute-Force", mal so aus der Hüfte geschossen:

div.card {
   postition: absolute;
   top: 20pt;
}

div.card + div.card {
   postition: absolute;
   top: 40pt;
}

div.card + div.card + div.card {
   postition: absolute;
   top: 60pt;
}

Da gibt es bestimmt auch eine Möglichkeit mit nth-child().

Kann man mit CSS eigentlich abfragen, um das wievielte Kind eines Elternelementes es sich handelt?

Liebe Grüße
Tom S.

[Camping_RIDER]

Aloha ;)

Mit "Brute-Force", mal so aus der Hüfte geschossen:

div.card {
   postition: absolute;
   top: 20pt;
}

div.card + div.card {
   postition: absolute;
   top: 40pt;
}

div.card + div.card + div.card {
   postition: absolute;
   top: 60pt;
}

Das erfüllt die Anforderung einer variablen Anzahl an li-Elementen nicht. Abgesehen davon hast du dir offenbar das gegebene Beispiel-Markup nicht angeschaut - eine für das Beispielmarkup geeignete "statische" CSS-Lösung wäre hier:

li {
  margin-left:60px;
}

li ~ li {
  margin-left:40px;
}

li ~ li ~ li {
  margin-left:20px;
}

li ~ li ~ li ~ li {
  margin-left:0px;
}

...aber auch das erfüllt wie gesagt die Anforderungen an die Flexibilität nicht.

Da gibt es bestimmt auch eine Möglichkeit mit nth-child().

Ich habe eine gesucht, hab aber leider (noch) keine gefunden.

Kann man mit CSS eigentlich abfragen, um das wievielte Kind eines Elternelementes es sich handelt?

Meine kurze Recherche legt nahe, dass sowas mit CSS alleine nicht möglich ist - zumindest nicht insofern, dass man den "Index" gleich automatisiert in einen CSS-value verwursten könnte.

Grüße,

RIDER

[TS]

Hello,

Das erfüllt die Anforderung einer variablen Anzahl an li-Elementen nicht. Abgesehen davon hast du dir offenbar das gegebene Beispiel-Markup nicht angeschaut - eine für das Beispielmarkup geeignete "statische" CSS-Lösung wäre hier:

Na, wieviele Karten hat denn ein Kartenspiel? Darum schrieb ich ja "Brute Force".
Und ja, ich habe es mir kurz angeschaut, wollte aber hier keine Fertiglösung liefern, sondern nur eine Anregung.

li {
  margin-left:60px;
}

li ~ li {
  margin-left:40px;
}

li ~ li ~ li {
  margin-left:20px;
}

li ~ li ~ li ~ li {
  margin-left:0px;
}

...aber auch das erfüllt wie gesagt die Anforderungen an die Flexibilität nicht.

Copy & Paste macht es möglich. Wie lang darf eine Selektorenliste werden? ;-P

Da gibt es bestimmt auch eine Möglichkeit mit nth-child().

Ich habe eine gesucht, hab aber leider (noch) keine gefunden.

Kann man mit CSS eigentlich abfragen, um das wievielte Kind eines Elternelementes es sich handelt?

Meine kurze Recherche legt nahe, dass sowas mit CSS alleine nicht möglich ist - zumindest nicht insofern, dass man den "Index" gleich automatisiert in einen CSS-value verwursten könnte.

Genau daran dachte ich und an calc(). Aber ohne JS wird es wohl nicht gehen mit der Berechnung...

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@Camping_RIDER

Da gibt es bestimmt auch eine Möglichkeit mit nth-child().

Ich habe eine gesucht, hab aber leider (noch) keine gefunden.

li:nth-child(1) { … }
li:nth-child(2) { … }
li:nth-child(3) { … }
⋮
li:nth-child(52) { … }

Mit Präprozessor ist das fix gemacht.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Camping_RIDER

Mit Präprozessor ist das fix gemacht.

Das Ergebnis ist dennoch riesig - na gut, könnte man nur in die Seite einbinden, die das benötigt…

Marc

[marctrix]

Hej TS,

Ich habe eine Liste an Karten und möchte die so darstellen, dass die sich etwas versetzt voneinander überlappen.

In verlinktem Beispiel habe ich das im ersten <ul> mit inline-styles gemacht, dass es so aussieht wie ich will.

Gibt es dafür eine Lösung ohne inline-styles?

Mit "Brute-Force", mal so aus der Hüfte geschossen:

Besser: position: relative;

Da gibt es bestimmt auch eine Möglichkeit mit nth-child().

Kann man mit CSS eigentlich abfragen, um das wievielte Kind eines Elternelementes es sich handelt?

Es muss heißen:

Kann man mit CSS eigentlich abfragen, um das wievielte Kind eines Elternelementes es sich handelt? Da gibt es bestimmt auch eine Möglichkeit mit nth-child().

So rum geht es!

Ist aber auch nicht für beliebig viele Elemente geeignet…

Marc

[Linuchs]

Moin,

habe eine Weile mit den CSS-Möglichkeiten experimentiert.

Eine horizontale Überlappung beliebig vieler <li> Elemente ist möglich mit

float: left;
margin-right: -55px;  // von 75px Breite

Jedes Element kann die Position für das Folge-Element (sibling) links - rechts versetzen. Der Versatz oben-unten wird jedoch auf das Elter-Element (parent) bezogen und ist damit für alle siblinge gleich, also nicht gestaffelt wie gewünscht:

float: left;
margin-right: -55px;  // von 75px Breite
margin-top: 20px;     // wirkt nicht

Die vertikale Überlappung für beliebig viele <li> Elemente geht so:

margin-bottom: -80px;  // von 100px Höhe

Jedes Element kann die Position für das Folge-Element (sibling) oben - unten versetzen. Der Versatz links-rechts wird jedoch auf das Elter-Element (parent) bezogen.

Eine Kombination aus beiden habe ich nicht entdeckt.

Die <li> Elemente sind ja geschlossen und nicht verschachtelt. Mit verschachtelten <div> ist eine Überlappung wie gewünscht möglich:

div {
  position: absolute;
  left: 20px;
  width: 75px;
  top: 20px;
  height: 100px;
  padding: 0;
  background: #eee;
  border: 1px solid #0ff;
}

<body>
  <div>1<br>1<br>1<br>1
  <div>2
  <div>3
  <div>4
  </div></div></div></div>
</body>

Linuchs