Tabs

[Sabrina]

Hallo allerseits,

ich weiß - dieses Thema wurde schon super oft besprochen und ja, ich habe mich jetzt ein paar Stunden durch die Foren usw. gewühlt.
Trotz allem habe ich noch keine ideale Lösung gefunden, um einen Tabulator zu simulieren.

Ich muss eine Preisliste darstellen -

Text       1€
Text2      2€
usw.

Folgenden Möglichkeiten habe ich gefunden:

• Tabelle -->
  möchte ich natürlich ungern verwenden.
• Geschütze Leerzeichen
  --> noch weniger. Soll ja doch sauber und übersichtlich sein.
• Einbindung von z.b. margin-left: 50px;
--> das wäre sehr sinnvoll, nur das Problem, das der Text vor den Preisen ja nicht immer gleich lang ist, dementsprechend müsste ja auch margin-left: jedes mal einen anderen Wert haben.
• Genial fand ich Lösung mit dem PRE - Tag!
--> Nur leider wird mir das in jedem Browser anders dargestellt und teilweise ganz falsch eingerückt.

Gibt es denn noch irgendeine Möglichkeit, die ich nicht gefunden habe?
Bitte nicht sauer sein, dass ich Thema schon wieder aufgreife, aber meine selfhtml-/Google-/Ausprobier-Kenntnisse haben ihr Ende erreicht und ich bin am verzweifeln.

Danke für jede Hilfe!

LG, Sabrina

[Gunnar Bittersmann]

@@Sabrina:

nuqneH

Text       1€
Text2      2€

• Tabelle -->
  möchte ich natürlich ungern verwenden.

Warum?

Qapla'

[Sabrina]

Hi Gunnar,

mir wurde immer gesagt, dass man Tabellen nicht mehr verwenden soll.
Ich will nicht "gegen die Entwicklung" arbeiten.
Oder hab ich da falsche Infos?

Ich finde Tabellen allerdings auch nicht sehr umgänglich...
Einfacher Text fände ich praktischer, falls es möglich ist.

LG, Sabrina

[Felix Riesterer]

Liebe Sabrina,

mir wurde immer gesagt, dass man Tabellen nicht mehr verwenden soll.

dann hast Du entwder nicht genau aufgepasst oder diese Aussage(n) ohne Begründung einfach akzeptiert, ohne sie zu hinterfragen. So pauschal ist diese Aussage nämlich offensichtlich falsch (siehe Zitat von Cheatah).

Ich will nicht "gegen die Entwicklung" arbeiten.

Na denn...

Oder hab ich da falsche Infos?

Du solltest über das, was man Dir sagt, immer kritisch nachdenken und die Absicht hinter der Information/Aussage erkennen. Dann kannst Du mit Überzeugung das tun, was für Dein Vorhaben das _sinnvollste_ ist.

Ich finde Tabellen allerdings auch nicht sehr umgänglich...

Webseiten sind technische Konstrukte. Damit unterliegen sie technischen Spezifika. Wo steht da etwas von Raum für Befindlichkeiten? Aber wenn Du meinst, dass Dein Markup etwas zum Ausdiskutieren ist, dann setze Dich doch mit den verschiedenen Browsern zusammen und sprich mit ihnen darüber, was sie dazu finden. *fg*

Einfacher Text fände ich praktischer, falls es möglich ist.

Dann liefere Deine Seite doch als content-type:plain/text aus! Dann gibt es aber keine anlickbaren Links mehr...

Liebe Grüße,

Felix Riesterer.

[Jens Müller]

Guten Morgen Sabrina,

Gibt es denn noch irgendeine Möglichkeit, die ich nicht gefunden habe?
Bitte nicht sauer sein, dass ich Thema schon wieder aufgreife, aber meine selfhtml-/Google-/Ausprobier-Kenntnisse haben ihr Ende erreicht und ich bin am verzweifeln.

Also in den Sinn kommen mir 2 unterschiedliche Ideen.

Ich hoffe, eins davon ist was du brauchst.

Danke für jede Hilfe!

So, nu ab innet Wochenende mit dich

gruesse aus'm ruhrpott
  jens mueller

[Jens Müller]

Hallo,

Also in den Sinn kommen mir 2 unterschiedliche Ideen.

Versuch mal diesen Link Meine Ideen, es war mir nicht bewusst dass CSS Desk nur in der Sitzung speichert.

gruesse aus'm ruhrpott
  jens mueller

[Sabrina]

Hallo zusammen,

@ Jens:
PERFEKT! das mit dem <dl> - wunderbar! Sowas habe ich gesucht. Vielen Dank - jetzt kann ich auch beruhigt ins Wochenende gehen ;)

@ Felix:
Danke für deine Aufklärung, dass Tabellen doch gar nicht so schlimm sind ;).
Über das Content-type: text/plain; habe ich nicht viel rausgefunden, kannst du mich vll. ein bisschen aufklären oder mich auf einen link verweisen?
Ich finde nur etwas im Zusammenhang mit Emails.

Schönes Wochende, und vielen vielen lieben Dank!

LG,Sabrina

[1UnitedPower]

@ Jens:
PERFEKT! das mit dem <dl> - wunderbar! Sowas habe ich gesucht. Vielen Dank - jetzt kann ich auch beruhigt ins Wochenende gehen ;)

Ark, Vorsicht! Wenn du den HTML5 Doctype benutzt ist das eine korrekte Verwendung, bei HTML4.1 wäre das aber semantischer Unsinn.

HTML4 Spec vs. HTML5 Spec

@ Felix:
Danke für deine Aufklärung, dass Tabellen doch gar nicht so schlimm sind ;).

Tabellen sind nicht nur nicht schlimm, sondern sollten das Mittel deiner Wahl sein. Tabellen sollten lediglich nicht zum Layouten verwendet werden, aber in deinem Fall willst du tabellarische Informationen anzeigen und dazu benutzt man am besten Tabellen.

Über das Content-type: text/plain; habe ich nicht viel rausgefunden, kannst du mich vll. ein bisschen aufklären oder mich auf einen link verweisen?
Ich finde nur etwas im Zusammenhang mit Emails.

Felix wollte dich darauf hinweisen, dass @pre für dein Problem ungeeignet ist. HTML ist dazu gedacht semantische Auszeichnungen vorzunehmen. Mit dem Content-Type @text/plain weist du den Browser dazu an, das ausgelieferte Dokument nicht zu parsen und als planen Text anzuzeigen.

[Jens Müller]

Hi,

@ Jens:
PERFEKT! das mit dem <dl> - wunderbar! Sowas habe ich gesucht.

Bitte sehr Sabrina.

Ark, Vorsicht! Wenn du den HTML5 Doctype benutzt ist das eine korrekte Verwendung, bei HTML4.1 wäre das aber semantischer Unsinn.

Hin und her gedacht, letztendlich sinds nur 2 Blockelemente die _nebeneinander_ dargestellt werden Darstellung von Preisen.
Es geht auch mit <p class="unsinn">Quatsch mit Soße</p> und <p>2,00€</p>.

In wie weit eine Preisliste eine Definitionsliste sein kann, oder sein muss. Dass ist, finde ich, Ansichtssache. Ein Produkt wird definiert durch den Preis, kauf ich das Bier für 2,00€, oder  1,30€, der 2,50€. Oder doch den Schnaps für 1,80€?
Ich habe dieses Beispiel nur rausgesucht weil, ich es gerade für etwas anderes selber gebraucht habe.

Definition lists, created using the DL element, generally consist of a series of term/definition pairs (_although definition lists may have other applications_). Thus, when advertising a product, one might use a definition list:

HTML4 Spec

Also das W3C ist da etwas offener.

gruesse aus'm ruhrpott
  jens mueller

[1UnitedPower]

Hin und her gedacht, letztendlich sinds nur 2 Blockelemente die _nebeneinander_ dargestellt werden Darstellung von Preisen.

Nur weil du eine gewisse Darstellung erreichst, heißt das nicht, dass das HTML dahinter sinnvoll ist, ich habe dein Beispiel mal ergänzt. Wenn wir auf Semantik unseres HTMLs keine Rücksicht mehr nehmen brauchen können wir auch wieder mit Tabellen layouten.

Es geht auch mit <p class="unsinn">Quatsch mit Soße</p> und <p>2,00€</p>.

In wie weit eine Preisliste eine Definitionsliste sein kann, oder sein muss. Dass ist, finde ich, Ansichtssache.

In deinem Beispiel-Code auf jsfiddle ist die Verwendung von @dl auch richtig, weil es den html5-Doctype benutzt.

Definition lists, created using the DL element, generally consist of a series of term/definition pairs (_although definition lists may have other applications_). Thus, when advertising a product, one might use a definition list:

HTML4 Spec

Also das W3C ist da etwas offener.

Das Beispiel darunter dürfte den Einschub  (_although definition lists may have other applications_) aber wieder relativieren. Eine Legende als Definitionsliste zu betrachten ist mit einem zugedrückten Auge vertretbar, eine Preisliste geht imho. zu weit.

Wenn solche Verwendungen im Sinne des W3C wären, wäre eine Überarbeitung des dl-Elements sicher nicht nötig.

[Fred Furunkelstein 2012]

Text       1€
Text2      2€

Derlei sollte "es tun":

<span style="display:inline-block; width:8em, text-align:left">Text</span> <span style="display:inline-block; width:4em, text-align:right">1 €</span><br />

Fred