zwei Wortgruppen pro Zeile <span>

[Doc Taxon]

Hallo HTML-Freunde,

wie muß ich es eigentlich anstellen, daß ich zwei verschiedene Wortgruppen in eine Zeile schreiben kann? Die linke Wortgruppe sollte linksbündig stehen, und die rechte rechtsbündig. Ich hab es schon mit <span> versucht, aber das Attribut des zweiten <span>-Bereichs (CSS) text-align:right funktioniert nicht, während das des ersten <span>-Bereichs text-align:left erwartungsgemäß funktioniert.

Ich wollte auch keine Tabelle verwenden, aber trotzdem ist auch dieser Versuch mißlungen...

Gibt es eine Alternative ohne Tabelle, am besten mit <span>?

Und wenn ja, wie sieht die Syntax dazu aus?

danke Euch allen!

[Cheatah]

Hi,

wie muß ich es eigentlich anstellen, daß ich zwei verschiedene Wortgruppen in eine Zeile schreiben kann?

zunächst einmal die richtige Semantik finden. Ohne das richtige HTML nützt Dir das schönste CSS nichts. Für mich hört sich das nach einem <dl> an.

Ich hab es schon mit <span> versucht, aber das Attribut des zweiten <span>-Bereichs (CSS) text-align:right funktioniert nicht,

Doch, das funktioniert einwandfrei. Der Text wird rechtsbündig in einem Element dargestellt, welches mangels anderslautender (und gültiger) Angabe exakt so breit ist wie sein Inhalt.

Ich wollte auch keine Tabelle verwenden,

Diese Entscheidung wird Dir durch folgende Frage abgenommen: Handelt es sich um tabellarische Daten?

Gibt es eine Alternative ohne Tabelle, am besten mit <span>?

Wieso ist ein unsemantisches Element am besten?

Cheatah

[Doc Taxon]

Nein, ich glaube das war zu unverständlich formuliert von mir, <dl> kann ich in sofern nicht gebrauchen, da beide Terme in die gleiche Zeile sollen.

Also z. B.

das ist der linke Text                          das ist der rechte Text

ich dachte da an
<span class="links">das ist der linke Text</span>
<span class="rechts">das ist der rechte Text</span>

wobei die CSS-Klassen axtern in einer CSS-Datei stehen:
.links {text-align: left; }
.rechts {text-align: right; }

Nach dieser Syntax steht aber beide Terme mit einem Leerzeichen nebeneinander:

das ist der linke Text das ist der rechte Text

aber ich wollte den rechten Text rechtsbündig stehen haben

[Auge]

Hallo

das ist der linke Text                          das ist der rechte Text

<span class="links">das ist der linke Text</span>
<span class="rechts">das ist der rechte Text</span>

wobei die CSS-Klassen axtern in einer CSS-Datei stehen:
.links {text-align: left; }
.rechts {text-align: right; }

Nach dieser Syntax steht aber beide Terme mit einem Leerzeichen nebeneinander:

das ist der linke Text das ist der rechte Text

aber ich wollte den rechten Text rechtsbündig stehen haben

Das "Warum" hat dir Cheatah ja schon genannt. Da die <span>s keine Breite haben, sind sie exakt so breit, wie ihr Inhalt (der durchaus wie gewollt ausgerichtet ist).

Tschö, Auge

[Doc Taxon]

Ja danke,

was meinst Du, Cheatah, mit Semantik?

wie kann ich denn alternativ genau diese Formatierung erreichen? Ist es nur mit <table> möglich?

[Cheatah]

Hi,

was meinst Du, Cheatah, mit Semantik?

das, was Du beispielsweise bei Google oder selbstverständlich im Archiv dazu findest.

wie kann ich denn alternativ genau diese Formatierung erreichen? Ist es nur mit <table> möglich?

Wie ich bereits in meinem vorherigen Posting sagte: HTML ist zu exakt 100% unabhängig von der gewünschten Darstellung. Es ist also absolut unmöglich, dass eine bestimmte Form der Darstellung nur mit einem bestimmten HTML-Element erreichbar ist. In der Tat kann *jedes* Element exakt so formatiert werden wie jedes andere.

Wähle erst die Struktur anhand der Semantik des Inhalts. Dann, *erst* dann kümmere Dich um die Darstellung. Keine Nanosekunde früher.

Cheatah

[Doc Taxon]

Ich bin da irgendwie zu blöd dazu, Deinen Zusammenhang von "Semantik" mit "HTML" zu kapieren. Ich nehme an, Du redest vom Design... ???

Aber ich habe das Problem doch mit einer einzelnen zweispaltigen Tabellenzeile lösen können: die Tabelle habe ich rechtsbündig ausgerichtet, den rechten Text links an die Zellenseite gebunden, und den restlichen Platz der Zeile auf 100% der linken Zelle angepaßt.

Das ganze sieht gut aus, und bleibt beim Verkleinern der Seite im Format.

Trotzdem danke für Deinen Hilfeversuch...

[Der Martin]

Hallo,

Ich bin da irgendwie zu blöd dazu, ...

Das möchte ich jetzt besser nicht kommentieren. ;)

... Deinen Zusammenhang von "Semantik" mit "HTML" zu kapieren. Ich nehme an, Du redest vom Design... ???

Neiiiin!
Von der Struktur, der _Bedeutung_, nicht vom Design oder der Darstellung!
Mit HTML sollst du nur die Inhalte und deren logische Strukturierung transportieren, eben den reinen Sinngehalt. Das ist es, was wir hier mit Semantik meinen.
Die äußere Gestaltung, also das Layout, das Design, das Aussehen, sollst du bitte mit CSS realisieren.

War das jetzt verständlicher?

Trotzdem danke für Deinen Hilfeversuch...

Vielleicht teilst du irgendwann unsere Ansichten über die Trennung von Inhalt und Design, i.e. HTML und CSS. Ich befinde mich auch noch in der Phase des Umdenkens: Das Ziel (und auch den Sinn) habe ich verstanden, doch bei der Umsetzung erwische ich mich auch noch ab und zu dabei, dass ich eine konkrete Darstellung durch die Wahl eines bestimmten HTML-Elements umzusetzen versuche. Nein, bitte nochmal nachdenken!  :)

Schönen Abend noch,

Martin

[Cheatah]

Hi,

Nein, ich glaube das war zu unverständlich formuliert von mir, <dl> kann ich in sofern nicht gebrauchen, da beide Terme in die gleiche Zeile sollen.

HTML ist zu exakt 100% unabhängig von der gewünschten Darstellung. Es wird gewählt, noch bevor überhaupt an die Darstellung gedacht wird. Deine Begründung hat also keinerlei Zusammenhang zu Deiner Schlussfolgerung. Wähle _erst_ die Semantik.

Nach dieser Syntax steht aber beide Terme mit einem Leerzeichen nebeneinander:

Wie ich sagte.

Cheatah

[Ingo Turski]

Hi,

ich dachte da an
<span class="links">das ist der linke Text</span>
<span class="rechts">das ist der rechte Text</span>

auch wenn Du es schon mit einer Tabelle gemacht hast...

<p class="rechts"><span class="links>das ist der linke Text</span> das ist der rechte Text</p>
und für .links {float:left} statt text-align.

freundliche Grüße
Ingo