Spielkarten-Layout

[nonok]

Liebe Fachleute,

für meine Webseite möchte ich die einzelnen Elemente (kurze Texte, Listen, Bilder etc) gern als Bauklötzchen oder Spielkarten fester Grösse anzeigen lassen. So eine Spielkarte hat einen Kopf und einen Inhaltsteil und im Gebrauch dann jeweils die Form

<div class="karte">
    <div class="kopf">
      Die Ueberschrift steht hier
    </div>
    <div class="inhalt">
      Hier kommt dann der Text oder sowas.......
    </div>
  </div>

Der Inhalt soll beliebig lang werden können und der Inhaltsteil soll dafür standard mit Skrollbalken versehen sein.

Mein bestes Ergebnis habe ich bisher mit der folgenden Stil-Angabe erzielt:

.karte {
    display: table;
    width: 250px;
    height: 300px;
    border-style: solid;
    padding: 4px;
    margin: 8px;
  }
  .kopf {
    display: table-row;
    height: 50px;
    text-align: center;
  }
  .inhalt{
    height: 250px;
    overflow: scroll;
    text-align: left;
  }

Es erscheinen gleich-grosse Karten mit den genannten Eigenschaften. Aber sie sind alle in einer Linie unereinander am linken Bildrand angeordnet. Ich möchte aber, dass die Karten sich so anordnen, dass sie jeweils das Fester in der Breite ausfüllen und das also bei schmalem Fenster z.b. drei, bei breitem Fenster aber sechs Karten in einer Reihe nebeneinander liegen.

Ich habe versucht, das body-Tag mit display:inline zu versehen, aber das ändert nichts. Sowohl im Konqueror als auch im Firefox bleibt alles steif in einer Spalte stehen.

Was kann ich tun?

[ChrisB]

Hi,

<div class="kopf">
      Die Ueberschrift steht hier
    </div>

Bitte HTML sinnvoll nutzen - für Überschriften gibt's die Hx-Elemente.

Es erscheinen gleich-grosse Karten mit den genannten Eigenschaften. Aber sie sind alle in einer Linie unereinander am linken Bildrand angeordnet.

Tabellen sind nun mal per Default absatzerzeugende Elemente.

Ich möchte aber, dass die Karten sich so anordnen, dass sie jeweils das Fester in der Breite ausfüllen und das also bei schmalem Fenster z.b. drei, bei breitem Fenster aber sechs Karten in einer Reihe nebeneinander liegen.

Dann floate sie.

Ich habe versucht, das body-Tag mit display:inline zu versehen, aber das ändert nichts.

Natürlich nicht - du willst ja nicht von body ein bestimmtes Verhalten haben, sondern von deinen mit display:table formatierten "Karten". Also sind letztere zu formatieren.
inline-table wäre noch eine Alternative zum Floating.

MfG ChrisB

[noknok]

Wow, das geht ja schnell! Vielen Dank!

Aber viel verstanden habe ich leider nicht und kann so schnell auch keine Hinweise in meinen Docs finden.

Was meinst Du mit "dann floate sie"?
Soll ich alle Karten in einem neuen div-Tag zusammenfassen, der dann "floated". Und was ist "floaten", ein Attribut oder ein Wert...?

"inline-table" finde ich auch nicht. Ist das ein Attribut?

Gruss

[ChrisB]

Hi,

Was meinst Du mit "dann floate sie"?
Soll ich alle Karten in einem neuen div-Tag zusammenfassen, der dann "floated". Und was ist "floaten", ein Attribut oder ein Wert...?

Wen könnten wir denn da vielleicht fragen - hm?

"inline-table" finde ich auch nicht. Ist das ein Attribut?

Noch'n hm?

MfG ChrisB

[noknok]

Wow, das geht ja schnell! Vielen Dank!

Aber viel verstanden habe ich leider nicht und kann so schnell auch keine Hinweise in meinen Docs finden.

Was meinst Du mit "dann floate sie"?
Soll ich alle Karten in einem neuen div-Tag zusammenfassen, der dann "floated". Und was ist "floaten", ein Attribut oder ein Wert...?

"inline-table" finde ich auch nicht. Ist das ein Attribut?

Sorry, hab's gefunden!

Mit

.karte {
    float:left;
    ....
   }

geht alles wie gewuenscht!.

Vielen Dank nochmal!

[Steel]

Wow, das geht ja schnell! Vielen Dank!

Aber viel verstanden habe ich leider nicht und kann so schnell auch keine Hinweise in meinen Docs finden.

Dann brauchst du wohl ne vernuenftige Dokumentation oder musst lernen sie rictig zu benutzen.

Was meinst Du mit "dann floate sie"?
Soll ich alle Karten in einem neuen div-Tag zusammenfassen, der dann "floated". Und was ist "floaten", ein Attribut oder ein Wert...?

http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=http://de.selfhtml.org/css/eigenschaften/positionierung.htm