CSS - Auflistung formatieren

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich möchte mittels PHP Daten aus meiner Datenbank holen und diese dann etwa wie folgt auflisten:

Produktname: Abstelltisch 500
Produktnummer: 012394

Farbe: Braun
Anazahl der Beine: 4

Größe: 1,5 x 2 x 0,8 Meter
Gewicht: 5 Kilogramm

Meine Auflistung habe ich bisher so formatiert:

Produktname: Abstelltisch 500
Produktnummer: 012394

Farbe: Braun
Anazahl der Beine: 4

Größe: 1,5 x 2 x 0,8 Meter
Gewicht: 5 Kilogramm

Ich nehme an, das ist keine gute Lösung. Die Abstände zwischen den Tags waren zu groß, darum habe ich sie mit CSS verkleinert. Allerdings reißen die
Tags noch immer klaffende Löcher in meine Aufzählung.

Wäre folgende Lösung besser:

  • Produktname: Abstelltisch 500

  • Produktnummer: 012394

  • Farbe: Braun

  • Anazahl der Beine: 4

  • Größe: 1,5 x 2 x 0,8 Meter

  • Gewicht: 5 Kilogramm

Allerdings möchte ich weder einen Einzug noch Aufzählungszeichen. Lässt sich dies mittels CSS lösen? Gibgt es noch eine andere (bessere) möglichkeit meine Ausgabe zu formatieren?

#2

Hallo

vllt mit ner Tabelle ?

Produktname:
Abstelltisch 500
Produktnummer:
012394
Farbe:
Braun
Anazahl der Beine:
4
Größe:
1,5 x 2 x 0,8 Meter
Gewicht:
5 Kilogramm

#3

Hallo Q5

nimm doch für die Leerzeile auch einen p-tag (statt br).
Dann hast Du auf jeden Fall die gleiche Zeilenhöhe dafür.

Für etwas mehr Formatierung … z.B. rechts/linksbündig


 Produktname: Abstelltisch 500
 Produktnummer: 012394

eignet sich dann in der Tat eine Tabelle besser.

h♥rzlichen Gruß
Nitya

#4

nimm doch für die Leerzeile auch einen p-tag (statt br).
Dann hast Du auf jeden Fall die gleiche Zeilenhöhe dafür.

Du meinst so:

Produktname: Abstelltisch 500
Produktnummer: 012394

Farbe: Braun
Anazahl der Beine: 4

Größe: 1,5 x 2 x 0,8 Meter
Gewicht: 5 Kilogramm

Da tut sich gar nichts. Meine gesamte Aufzählung habe ich nun „in einer Wurst“. Mein neuer Versuch sieht so aus:

Produktname: Abstelltisch 500

Produktnummer: 012394

Farbe: Braun

Anazahl der Beine: 4

Größe: 1,5 x 2 x 0,8 Meter

Gewicht: 5 Kilogramm

Allerdings ist mir nun der Abstand zwischen den Zeilen - nach einem

  • viel zu klein. Lässt sich der
    Tag mit CSS ansprechen?
#5

Danke für den Post. Von Tabellen möchte ich allerdings absehen. Meine Aufzählung wird teilweise etwas komplexer mit PHP generiert und eine Tabelle würde mein Script noch unübersichtlicher machen :wink:

#6

Hi,

Allerdings ist mir nun der Abstand zwischen den Zeilen - nach
einem

  • viel zu klein. Lässt sich der
    Tag mit
    CSS ansprechen?

Ja das kannst du. Entweder universell über den Tagnamen ‚br‘ oder du vergibst mit den HTML-Universalattributen eine class für deine br-Tags. Also:

#7

Hi,

ich würde sowas über eine Definitionsliste lösen:
http://www.dyingeyes.de/2008/04/01/definitionslisten…

gruß
schreiraupe

1 Like
#8

Da tut sich gar nichts. Meine gesamte Aufzählung habe ich nun „in einer Wurst“.

Leere Element sind so eine Sache für sich!
Aber mit einem Leerzeichen sieht die Wurst schon wieder ganz anders aus.

#9

Danke an alle für die jeweiligen Antworten! Ich denke ich mach es nun wie im nachfolgenden Beispiel und stelle mit „line-height“ - etwa „body {line-heigt: 1.5;}“ - den Zeilenabstand ein.

Produktname: Abstelltisch 500

Produktnummer: 012394

Farbe: Braun

Anazahl der Beine: 4

Größe: 1,5 x 2 x 0,8 Meter

Gewicht: 5 Kilogramm

Das könnte/sollte klappen, ich werde es am abend testen.

#10

Moin!

vllt mit ner Tabelle ?

Dann aber mit richtigen Headern (th statt td).

Produktname:
Abstelltisch 500

Grüße,
-Efchen

#11

Moin!

Von Tabellen möchte ich allerdings absehen.

Warum? Tabellen sind nicht böse. Wenn Du tabellarische Daten hast, dann ist das einzig korrekte Stilmittel eine Tabelle.

Meine Aufzählung wird teilweise etwas komplexer mit
PHP generiert und eine Tabelle würde mein Script noch
unübersichtlicher machen :wink:

Nur weil das Script unübersichtlicher wird, willst Du Deinen Inhalt nicht als das deklarieren, was er darstellen soll[1]? Das macht nun wirklich keinen Sinn.

Das ist wie wenn jemand an seinem Auto die gelben Blinker gegen weiße oder rote austauschen würde, weil das gelb nicht zur restlichen Autofarbe passt.

Grüße,
-Efchen

[1] Vorausgesetzt, die Tabelle ist hier das ideale Stilmittel. Das würde ich aufgrund der wenigen Hintergrundinformationen nicht unbedingt garantieren.

#12

Aber mit einem Leerzeichen sieht die Wurst schon wieder ganz
anders aus.

Aber genauso semantisch unsinnvoll.
Was spricht dagegen, die Zeilen, denen ein größerer Abstand folgen soll, mit einer Klasse zu versehen und den margin-bottom zu vergrößern?

#13

Tach!

Danke an alle für die jeweiligen Antworten! Ich denke ich mach
es nun wie im nachfolgenden Beispiel

Das halte ich für die zweitschlechteste Lösung.

Produktname: Abstelltisch 500

Produktnummer: 012394

Findest Du, es ist geeignet, das als Textabsatz, also Fließtext, auszuzeichnen? Stell Dir vor, wie Du Fließtext vorlesen würdest. Sicher nicht so, wie Du den Inhalt eigentlich verstanden haben willst.

„Produktname“ und „Abstelltisch 500“ sind doch zweierlei Dinge. Das eine ist die Beschreibung des anderen. Damit wäre eine Tabelle durchaus möglich, aber die Definitionsliste ist eigentlich noch besser.

Es ist wichtig, dass Du als allererstes die richtige semantische Auszeichnung findest. Wie das aussehen soll in visuellen Browsern ist für diese erste Entscheidung erstmal irrelevant.

Das könnte/sollte klappen, ich werde es am abend testen.

Teste das doch mal in einem Vorlesebrowser. Ich glaube nicht, dass das gut klingen wird.

Liebe Grüße,
-Efchen

#14

Findest Du, es ist geeignet, das als Textabsatz, also
Fließtext, auszuzeichnen? Stell Dir vor, wie Du Fließtext
vorlesen würdest. Sicher nicht so, wie Du den Inhalt
eigentlich verstanden haben willst.

Teste das doch mal in einem Vorlesebrowser. Ich glaube nicht,
dass das gut klingen wird.

Hallo, danke für deinen Beitrag. Leider verstehe ich nicht so recht, was du meinst. Das Wort „Vorlesebrowser“ höre ich ohnehin zum ersten mal in meinem Leben. Ich werde mir die Möglichkeit einer Definitionsliste jedenfalls nochmal ansehen, um mein Problem auf die beste Art zu lösen. Momentan rätsel ich noch, wie ich die Abstände zwischen den „Blöcken“ mittels einer Definitionsliste realisieren kann. Schöne Grüße, Q_5

#15

So, ist das nun eine gute Lösung (Abstände und weiteres per CSS)?

Produktname: Abstelltisch 500
Produktnummer: 012394
Farbe: Braun
Anazahl der Beine: 4

usw.

#16

musst Du selber wissen, mit wieviel Aufwand Du ein paar Zeilen untereinander anzeigen lassen willst … da gibt es 1001 Möglichkeiten.

#17

Moin!

Hallo, danke für deinen Beitrag. Leider verstehe ich nicht so
recht, was du meinst. Das Wort „Vorlesebrowser“ höre ich
ohnehin zum ersten mal in meinem Leben.

Aber zum Glück gibts ja Suchmaschinen.

Aber als Webmaster sollte man davon schon gehört haben - dann wird auch das Verständnis für HTML einfacher. Wenn man denkt, Firefox, IE, Opera und Safari wären die einzigen WWW-Clients, dann kann ich verstehen, dass niemand sich die Mühe macht, HTML richtig zu lernen.
Aber auch Suchmaschinen verstehen den Inhalt nur mit sinnvoller Semantik.

Momentan rätsel
ich noch, wie ich die Abstände zwischen den „Blöcken“ mittels
einer Definitionsliste realisieren kann. Schöne Grüße, Q_5

Man realisiert niemals irgendwelche Abstände mit HTML-Mitteln, sondern nur mit CSS. Man zeichnet zuerst den Inhalt semantisch sinnvoll aus und macht sich dann Gedanken, wie man das Aussehen mit CSS anpasst. In den HTML-Code muss man dann nicht mehr eingreifen (außer vielleicht, um eine Klasse einzufügen).

Grüße,
-Efchen

#18

So, ist das nun eine gute Lösung (Abstände und weiteres per
CSS)?

Rein aus Sicht von HTML ist das IMHO perfekt.

Du hast einen Term ( ), "z.B. „Produktname“ und dazu die Definition ( ) „Abstelltisch 500“. Damit sind diese beiden Begriffe auch untrennbar miteinander verbunden, was sie z.B. bei nicht wären. Da wären sie eigenständige Konstrukte.

1 Like
#19

musst Du selber wissen, mit wieviel Aufwand Du ein paar Zeilen
untereinander anzeigen lassen willst

Die Frage bezog sich ja offensichtlich allein auf den HTML-Code, und der ist nicht für die Anzeige zuständig.

„Trennung von Inhalt und Layout“ ist auch, wenn man das gedanklich strikt auseinander hält - es wird auf die Weise alles einfacher.