Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden. Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
[HTML] Elemente einer Auflistung links und rechts ausrichten - wie am elegantesten
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 :/
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
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
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.
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
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...
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. ???
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).
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
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.
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
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.
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.
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.
Aber naja, die ist ja eigentlich schon dafür gemacht...
