[HTML] Elemente einer Auflistung links und rechts ausrichten - wie am elegantesten

[godlike]

Ja, die Frage steht so ja schon im Titel. Wie Richte ich Textbausteine einer Auflistung am elegantesten Links und Rechts aus? Ich habe folgendes Konstrukt:

Text 1 Wert 1
Text 2 Wert 2
Text 3 Wert 3
Text 4 Wert 4

Text soll links, Wert immer Rechts angeordnet sein. Das ganze befindet sich in einer Tabellenzelle (td). Sollte ich eine UL-Liste erstellen und mit float arbeiten? Oder besser DIV's, und darin dann die Werte per span ausrichten?

Habt ihr Ideen wie ich das elegant gelost bekomme? Irgendwie fällt mir gerade nichts gescheites ein :/

Gruß godlike

 

[Boesmann]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Ich benutze für so etwas spans mit float, das geht einfach und klappt sehr gut. Also z.B. so:
[src=html4strict]<span style="float:left">Text 1</span> <span style="float:right">Wert 1</span>[/src]
Natürlich habe ich stattdessen zwei Styles ".links" und ".rechts" im Stylesheet definiert.
Allerdings benutze ich seltenst Tabellen und kann daher nicht sagen, ob das in einer td funktioniert.

EDIT:
OK, das mit dem "elegant" hab ich wohl überlesen. Mir reicht es meist, wenn es funktioniert

 

[gelöschter Benutzer]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Noch ne Tabelle?

Überlege halt, was es semantisch gesehen ist, dann hast du schon mal die HTML-Tags dafür. Dann stylst du die so lange, bis sie passen.

Ansonsten ist eine UL mit float wohl die schnellste Möglichkeit.
[src=html5]<ul class="cooleauflistung">
<li>Text 1<ul>
<li>Wert 1</li></ul>
</li>
<li>Text 2<ul>
<li>Wert 2</li></ul>
</li>
<li>Text 3<ul>
<li>Wert 3</li></ul>
</li>
<li>Text 4<ul>
<li>Wert 4</li></ul>
</li>
</ul>[/src]

[src=css].cooleauflistung {
list-style-type: none;
margin: 0;
padding: 0;
}

.cooleauflistung li {
clear: both;
}

.cooleauflistung ul li {
float: left;
}

.cooleauflistung ul li ul li {
float: right;
}[/src]Quick and DIRTY!

Darf ich fragen, welche Daten du ausrichten willst?

 

[godlike]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Erst mal danke

Also es handelt sich um Posten von Dienstleistungen mit dazugehörigen Preisen. Die Preise sollen eben immer rechts ausgerichtet sein, die Angebote links. Das mit einer Liste zu lösen hab ich mir auch schon gedacht... ja

 

[Abul]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Wenn es nur eine fortlaufende Liste mit Dienstleistungen/Preisen ist, wieso nicht einfach ne billige Tabelle?

[src=html4strict]<table border="1" width="100%">
<tr>
<td width="90%">Artikel</td>
<td>Preis</td>
</tr>
</table>[/src]

 

[godlike]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Weil ich dann ne Tabelle in einer Tabelle hätte Aber naja, die ist ja eigentlich schon dafür gemacht...

 

[Abul]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Wie sieht denn die jetzige Tabelle bislang aus?

 

[sars]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Das geht durchaus simpler:

http://jsfiddle.net/S4SnL/

 

[epiphora]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Wie sieht denn die jetzige Tabelle bislang aus?

Das wüsste ich auch gerne. Wenn es nämlich mehrere Attribute pro Spalte gibt, würde es ja durchaus Sinn machen, sie einfach in eine eigene Spalte zu unterteilen.

 

[godlike]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Sorry hatte bissle Streß heute darum erst jetzt...

Im Prinzip musste ich heute ein Layout im Schnellschuss umsetzen. Es handelt sich hier um 4 Spalten die verschiedene Angebote repräsentieren. Da steht drin was z.B. in Angebot A, B, C und D enthalten ist. Als Auflistung. Die ganz rechte sspalte geht hier sehr weit herunter. Unter den ersten 3 Spalten, also Auflistungen, erscheint ein Video wobei die Spalten unter dem Video zwingen weitergeführt werden müssen. Unter anderem existieren Punkte mit Preisen in den Angebots-Spalten in denen, wie weiter oben ja schon angesprochen, die Preise rechtsbündig sein sollte. Hier mal ein kleines Beispiel:



Bei Zeiten werde ich die einzelnen Spalten, also A, B, C und D wohl als UL-Listen, welche ich floate, erstellen. Mir war das aber mit dem Video heute irgendwie ein Hindernis bzw. ich habs aus Zeitmangel erst mal mit einer Tabelle gelöst. Jaja ich weiß, böse und so

 

[LemonDrops]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Hast du schonmal daran gedacht Bootstrap zu nutze?

 

[godlike]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Nein, höre ich auch gerade zum ersten mal Welche Vorteile bietet das denn bzw was genau macht das? Hier handelt es sich um eine Unterseite die ich in eine bestehende Webseite einbaue. Die restlichen Seiten habe ich auch selber gebaut. Somit müsste ich ja sowieso meine vorhandenen Style-Elemente, sämtlichen PHP Code, Javascript usw. da einpflegen. Oder wie läuft das ab? Viele Funktionen wie Mail versandt über z.B. ein Kontaktformular usw. habe ich ja schon im Hintergrund per Funktion liegen und nutze diese Seitenweit...

 

[LemonDrops]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Bootstrap ist einfach nur ein Fontendframework, das solche Standardprobleme schon gelöst hat.

getbootstrap.com

 

[keksautomat]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Das geht durchaus simpler:

http://jsfiddle.net/S4SnL/

Hier müsste man doch die maximale Länge des längsten Items kennen (Test*), um daraus eine gescheite width berechnen zu können?!
Simpler ja, aber auch fehleranfälliger. ???

 

[godlike]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Oh, das von Sars hab ich gestern glatt übersehen. Sowas in der Art hatte ich aber auch überlegt. Die Maximale Breite habe ich in dem Fall sogar. Wobei ich dann halt für die mobile Version was anderes nutzen müsste (falls dies umgesetzt wird).

getbootstrap.com

Danke, das schau ich mir auf jeden Fall mal an. Habe aber die Befürchtung das ein bereits bestehendes Projekt eher schwierig zu implementieren ist. Die meisten Layouts hat es ja eh schnell umgesetzt. Im Normalfall hat man ja auch nicht DEN Zeitdruck. Für kommende Projekte aber sicherlich einen Blick oder Zwei Wert

 

[gelöschter Benutzer]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Also so wie dein Bild da aussieht, ist das mit einer Tabelle sehr schlecht gelöst.

Lieber "normale" Boxelemente mit CSS stylen und die Angebote an sich dann als Tabelle.

Wie ich oben schon sagte, sollte man sich immer der Semantik bewusst sein. Wenn das ein Layout ist, nimmst du semantisch unbedeutende Elemente wie <div> oder <span> oder whatever. Wenn das ne Tabelle ist, nimmst du ne Tabelle. Aber Tabelle für das Layout geht gar nicht

Wenn du möchtest, stell doch den Code inkl. CSS (Sahnehäubchen wäre dann Beispieltext) doch mal hier rein und wir versuchen uns mal dran.

Bootstrap ist unangepasst super für Intranet-Seiten oder RAD-Basislayouts, aber in letzter Zeit habe ich das Gefühl, dass 50% der neu entstehenden Seiten ein unangepasstes (!) Bootstrap nutzen. Mach bitte nicht denselben Fehler. Wenn du Bootstrap nutzt, definiere bitte eigene Farben und Layouts.

 

[godlike]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Ich achte normalerweise sehr wohl auf Semantik, Barrierefreiheit und auch Validität. Hatte dafür einfach viel zu wenig Zeit da eine funktionsfähige Seite zum Vorführen gebraucht wurde. Wie schon weiter oben gesagt baue ich das natürlich noch vernünftig nach. Semantisch gesehen hat mich das mit den Preisen und dem rechts ausgerichteten Preis aber doch. Klar ist es ein tabellarischer Inhalt, auch wenn es nur jeweils 3 Posten sind.

Was würde aus deiner Sicht von der Semantik her am meisten Sinn machen? Eine DIV-Suppe ist ja auch scheiße.

Quellcode kann ich hier leider noch nicht veröffentlichen. Bei Zeiten, also wenn die Seite endgültig fertig ist, kann ich aber einen Link per PN schicken

 

[gelöschter Benutzer]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Ja ne Tabelle würde schon Sinn machen, sagte ich ja schon zu Anfang. Ich meinte von der Div-Suppe her eher das außenrum, das ist ja eigentlich keine Tabelle sondern semantisch bedeutungsloses Layout.

Gerne den Link auch per PN

 

[LemonDrops]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Wenn du Wert auf Semantik legst, nutze WAI-ARIA, Microdata o. ä. Auch wenn man es gerne hätte und es versucht hat, ist HTML an sich nicht semantisch und dafür auch nicht geeignet. Es gibt einem Dokument einfach nur eine Struktur. Der Grund aus dem ordentliche Dokumente mit z. B. Überschriften, Listen und Tabellen besser zugänglich sind, ist nicht die Semantik, sondern die Struktur. (Man kann sagen, die Struktur hat semantischen Wert.) Die neuen Elemente wie <section>, <aside>, <header>, <footer> usw. sind nichtssagend und irrelevant. HTML ist nicht die richtige Technologie um semantische Inhalte bereit zu stellen. Wenn man DIV-Elemente mit WAI-ARIA und Microdata nutzt, erreicht an da wesentlich mehr und spart sich Probleme in älteren Browsern.

Das ist meine professionelle Meinung und ich bin mir sicher, jemand wird dagegen sein.

 

[godlike]

Re: [HTML] Elemente einer Auflistung links und rechts ausrichten - wie am eleganteste

Ich meinte von der Div-Suppe her eher das außenrum, das ist ja eigentlich keine Tabelle sondern semantisch bedeutungsloses Layout.

Ich meinte damit auch das außen herum Link bekommst du wenn es so weit ist und die Seite freigegeben ist

Wenn du Wert auf Semantik legst, nutze WAI-ARIA, Microdata o. ä. Auch wenn man es gerne hätte und es versucht hat, ist HTML an sich nicht semantisch und dafür auch nicht geeignet.

Danke für die Stichworte. Ich werde mich da mal einlesen. Ist ja doch ganz schön umfangreich