rechtsbündige Liste, aber Aufzählungszeichen unmittelbar links vom Text

[Thomas Krauß]

Hallo allerseits,

für eine möglichst schlank gehaltene kleine HTML-Übersicht - soll nur lokal auf meinem Desktop laufen - bastel ich an einer einzeilig-zweispaltigen Tabelle mit jeweils einer (unnumerierten) Liste in jeder Zelle. Die linke Zelle soll linksbündig orientierte Listeneinträge mit ebenso linksbündigen Gliederungspunkten erhalten. Soweit so gut, das war easy und funzt.

In der rechten Zelle soll der Text rechtsbündig (aber sehr wohl l2r) orientiert werden, die Gliederungspunkte sollen aber bitte unmittelbar vor dem Text stehen. Bislang schaffe ich es nur, die Punkte entweder rechts neben den Text zu hängen oder alle links am Rand alle unter einander. Im nachfolgenden Code-Schnipsel mal eine Tabelle mit drei Spalten. Die erste Zelle wie oben geschildert problemlos. In der zweiten Zelle dann mein erfolgloser Versuch und in der dritten in etwa wie ich mir das Ergebnis vorstelle:

<table width="100%" border=1><tr>
 <td width="33%" align="left"><p>korrekt</p><ul type="disc">
  <li>Alpha</li>
  <li>Bravo</li>
  <li>Charly</li>
 </td></ul>
 <td width="33%" align="right"><p>ist</p><ul type="disc">
  <li>Eins</li>
  <li>Zwei</li>
  <li>Drei</li>
 </td></ul>
 <td width="33%" align="right"><p>soll - in etwa</p>
  &ordm;&nbsp;One<br />
   &ordm;&nbsp;Two<br />
  &ordm;&nbsp;Three
 </td></ul>
</tr></table>

Hoffe, spätestens damit wird deutlich, was ich meine.

[Gunnar Bittersmann]

@@Thomas Krauß

Hallo allerseits,

für eine möglichst schlank gehaltene kleine HTML-Übersicht - soll nur lokal auf meinem Desktop laufen - bastel ich an einer einzeilig-zweispaltigen Tabelle

Äh, nein. Das ist keine Tabelle.

Verwende zum Layouten der Seite CSS Grid oder Flexbox.

In der rechten Zelle soll der Text rechtsbündig (aber sehr wohl l2r) orientiert werden, die Gliederungspunkte sollen aber bitte unmittelbar vor dem Text stehen.

MDN: list-style-position: inside ist dein Freund.

☞ Beispiel

LLAP 🖖

[Rolf B]

Hallo Thomas,

Tabellenlayout ist heutzutage nicht mehr üblich. Ausnahme ist HTML Mail, viele Mailprogramme können kein modernes CSS.

Das hilft dir natürlich nicht für dein Problem. Ich sitze am Smartphone und kann nicht rumspielen, aber meine ersten Ansätze wären display:inline-block für die li und text-align:right für das ul. Alternativ ul als Flexbox mit passendem align. Details habe ich nicht im Kopf…

Um deine beiden Listen nebeneinander zu bekommen, kannst du ebenfalls Flexbox, oder Grid, verwenden.

Lektüre dazu im selfwiki oder bei Mozilla Developer Network.

Rolf

[Rolf B]

Hallo Thomas,

hast Du an sowas gedacht?

https://jsfiddle.net/Rolf_b/2ksbqt5L/

Mach das Ausgabefenster auch mal schmaler und beobachte das responsive Verhalten. Ist das so gewünscht?

Die Hintergrundfarben dienen der Visualisierung der Boxen, und die konkreten Maße musst Du natürlich auch für deinen Zweck anpassen.

Rolf

[Tabellenkalk]

Hallo,

[...]
 <td>
    <ul>
       <li>[…]</li>
   </td>
 </ul>
 […]

dass table hier unangebracht ist, ist ja schon gesagt worden. Zusätzlich hast du bei der Verschachtelung nicht aufgepasst.

Gruß
Kalk

[Thomas Krauß]

@Gunnar Bittersmann, @Rolf B

Vielen Dank für Eure Hinweise. Sind beides zwei sehr spannende Ansätze. Muss ich mal ausprobieren. Hatte nur gehofft, das ganze ginge rein mit HTML-Bordmitteln und ohne CSS o.ä. - Mit letzteren habe ich noch weniger Erfahrung als mit HTML. Und dat is offensichtlich schon wenig... Stichwort Sinnhaftigkeit von <table> in diesem Fall. Viele Grüße

[Matthias Apsel]

Hallo Thomas Krauß,

Hatte nur gehofft, das ganze ginge rein mit HTML-Bordmitteln und ohne CSS o.ä.

HTML ist rein für die Beschreibung des Inhalts zuständig, CSS allein für die Gestaltung desselben. Siehe https://wiki.selfhtml.org/wiki/Separation_of_concerns.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Thomas Krauß

Vielen Dank für Eure Hinweise. Sind beides zwei sehr spannende Ansätze.

Der Unterschied der Ansätze ist, dass ich von innen nach außen gedacht habe; Rolf von außen nach innen.

Ich hatte mir zunächst nur eine Liste (die rechte) vorgenommen und geschaut, wie man bei einer Liste die gewünschte Rechtsbündigkeit hinbekommt. Die Bullets davor dann eben mit list-style-position: inside. Erst danach habe ich zur Veranschaulichung die zweite, linksbündige Liste hinzugefügt und fürs Nebeneinander Flexbox verwendet. (Ich hätte auch Grid nehmen können.)

Rolf hat vermutlich erst die beiden Listen mit Flexbox nebeneinandergesetzt und dann festgestellt, dass align-items: end (bei ihm heißt das noch align-items: flex-end) den gewünschten Effekt hat.

Hatte nur gehofft, das ganze ginge rein mit HTML-Bordmitteln und ohne CSS o.ä.

HTML ist für die Auszeichnung des Inhalts zuständig (bspw. eine Liste als Liste); nicht für die visuelle Darstellung – dafür ist CSS da. „Rechtsbündig“ ist visuelle Darstellung, also ganz klar in der Domäne von CSS.

LLAP 🖖

[Rolf B]

Hallo Thomas,

HTML ohne CSS ist wie ein Kuchenteig ohne Backform. Man kann das Ergebnis zwar essen, aber es wird einfach eine Pfütze im Backblech draus (=Browser Defaultstyles). CSS ist die Form, die daraus einen Tortenboden, Kastenkuchen oder Gugelhupf macht.

Hast Du schonmal das style-Attribut verwendet? Dann hast Du schon den Teig schon ein bisschen mit dem CSS Schaber zurechtgedrückt. Was in style steht, sind CSS Eigenschaften. Man kann - rein hypothetisch - ohne CSS Regeln auskommen und alles mit style-Attributen machen. Das ist aber unübersichtlich und vor allem ineffizient. Nicht machen!

CSS besteht nicht nur aus Eigenschaften, sondern auch aus Regeln, auf welche Elemente diese Eigenschaften anzuwenden sind (CSS Selektoren). Es erlaubt die Trennung von Layout und Inhalt. Und es kennt Regeln (@media Queries), mit denen sich Eigenschaften an Medienart (Screen/Print) und Mediengröße anpassen können. HTML allein reicht nicht. CSS muss man zumindest in Grundlagen können.

Rolf