LI ausrichten

Hallo,

ich möchte eine ul mit CSS formatieren.
und zwar soll das 1. li links, das 2. li mittig, das 3. li rechts, das 4. li mittig, usw. im übergeordneten div ausgerichtet sein.

In jedem li ist ein div mit img und daneben ein p mit Text.

Wich bekomme ich das mit css hin? Kennt jemand vielleicht ein Beispiel?

Danke schon mal im Voraus.

Text

Text

Text

Text

Text

Moin!

und zwar soll das 1. li links, das 2. li mittig, das 3. li
rechts, das 4. li mittig, usw. im übergeordneten div
ausgerichtet sein.

Die li’s zum Inline-Element machen und das übergeordnete Element so breit, dass nur drei reinpassen.
Wäre eine Möglichkeit.

Haut natürlich nicht mehr hin, wenn die Breite nicht bekannt ist, genau drei nebeneinander zu stellen, haut aber auch nicht hin, wenn man nicht weiß, wie breit der Viewport des Nutzers ist.
Also reicht im Zweifelsfall für alle Belange, daraus Inline-Elemente zu machen. Wenn mehr Platz ist, stehen mehr nebeneinander, wenn weniger Platz ist, sinds halt weniger.

In jedem li ist ein div mit img und daneben ein p mit Text.

Ein div mit img? Dann schmeiß das div raus, das ist dann überflüssig, div gruppiert schließlich mehrere Elemente, ein einzelnes img ist keine Gruppe.
Hört sich aber auch an, als wäre hier eine Definitionsliste angebracht, nämlich wenn der Text zum Bild gehört. Dann ist ein einfacher Textabsatz falsch.

Wich bekomme ich das mit css hin? Kennt jemand vielleicht ein
Beispiel?

display:inline;

Text

Sieht sehr nach Definitionsliste aus. Aber im img fehlt noch das alt-Attribut!

Wenn das Bild nur eine Zierde zum Text ist und direkt nichts mit ihm zu tun hat, dann gehört da nichtmal das img hin, denn dann wird das Bild als background-image eingebunden.

Du siehst, viel hängt davon ab, was Du eigentlich vor hast - aber das ist nunmal der Sinn von HTML.

Liebe Grüße,
-Efchen

Hallo,

seit dem Tabellen so verpönt sind, müssen stattdessen Listen dafür herhalten :smile:)

Geht auch ohne Liste:

Bild
.box {text-align:center}
.box p {width:31%; float:left;}

TEXT
TEXT
TEXT
TEXT
TEXT


The document is valid HTML5


mfg
Klaus

Geht auch ohne Liste:

Genausowenig, wie „heutzutage“ alles ohne Tabellen gehen muss, muss alles ohne Liste gehen.

Geht auch ohne Liste:

Genausowenig, wie „heutzutage“ alles ohne Tabellen gehen
muss, muss alles ohne Liste gehen.

muss nicht …
Wer auf Semantik steht, sollte auch nur eine Aufzählung von Begriffen in eine Liste packen und wenn möglich, die, von der Natur einer Lister her, vertikale Ausrichtung beibehalten.

Wer auf Semantik steht, sollte auch nur eine Aufzählung von
Begriffen in eine Liste packen

Ob es sich hier um eine Aufzählung/Liste handeln soll oder nicht, das kann nur der OP beantworten. Das ist hier jetzt ein schönes Beispiel, warum Programme dem Anwender nicht die Arbeit abnehmen können, HTML-Code zu schreiben.
Weil das Programm genausowenig wie wir jetzt entscheiden kann, ob es
(1) eine Liste von Bildern mit dazugehörigem Bildtext ist oder
(2) ein Fließtext mit Bildern.

Also, OP: Was Du daraus machst, hängt davon ab, was Du damit sagen willst - das ist ja der Sinn von HTML. Das dann in der Anzeige anzupassen, ist Sache von CSS.

und wenn möglich, die, von der
Natur einer Lister her, vertikale Ausrichtung beibehalten.

Das eine hat mit dem anderen nichts zu tun. Auch hier lässt sich „Trennung von Inhalt und Aussehen“ wunderbar anwenden. Es ist nirgendwo definiert, dass eine Liste vertikal angeordnet ist.
Gegenbeispiele:
(1) Das Menü eines fast jeden Computerprogramms ist horizontal angeordnet, nur die Untermenüs sind dann vertikal.
(2) Die Taskleiste von z.B. Windows ist horizontal.
(3) Insbesondere Aufzählungen, die im Fließtext vorkommen, sind - wie Fließtext - horizontal („Aus einer Hand: Komplettlösungen für Telefonie, Internet und Unternehmensvernetzungen“[1])

Grüße,
-Efchen

[1] Quellenangaben sind heutzutage ja sehr wichtig :wink:
Quelle: Schreibblock der Firma „M-net“.

warum heisst es Liste?
Weil es keine Leiste ist, sonst würde es (U/O)B … für BAR … heißen.

In HTML5 ist ja wieder standard … da kann jeder HTML-Semantiker seine ul und ol Leisten entsprechend umschreiben :smile:)

warum heisst es Liste?

Weil es eine Sammlung mehrerer, gleichartiger Elemente ist.

Weil es keine Leiste ist

Der Begriff „Leiste“ hat für mich einen optischen Touch, beschreibt also einen optischen Effekt, keinen semantischen.