div- und span-Bock

[Freddy]

Hallo miteinander,

ich dachte, ich hätte es verstanden. Ein div-block erzeugt eine neue Zeile, während ein span-block dies nicht tut und sich anhängt. Warum funktioniert dann folgendes nicht:

Die Klasse "box" hat width: 500px und einen border, Klasse "label" width: 200px und Klasse "name" width: 250px. Also passt Label und Name innerhalb der Box locker in eine Zeile.

<div class="box">
  <div class="label">
    Vorname:
  </div>
  <span class="label">
    Fritz:
  </span>
  <div class="label">
    Zuname:
  </div>
  <span class="label">
    Hammermeister:
  </span>
</div>

also, wenn der div mit class="label" ausgeführt wird, soll in der Box in eine neue Zeile geschrieben werden und anschließend mit span class="name" kein Zeilenwechsel erfolgen, sondern hinter den Label geschrieben werden. Macht der Browser aber nicht, er macht bei allen Blöcken, egal ob div oder span innerhalb der Box einen Zeilenwechsel. Warum eigentlich?

gruß Freddy

[Hopsel]

Hi Freddy!

Ein div-block erzeugt eine neue Zeile, während ein span-block dies nicht tut und sich anhängt.

Nö.

Die Klasse "box" hat width: 500px und einen border, Klasse "label" width: 200px und Klasse "name" width: 250px. Also passt Label und Name innerhalb der Box locker in eine Zeile.

Das kommt allerdings auch auf die Innen- und Außenabstände an.

also, wenn der div mit class="label" ausgeführt wird

Du hast einen ganz schlechten HTML-Stil. Für deine "Labels" gibt es das HTML-Element label.

Desweiteren solltest du unter gar keinen Umständen versuchen, mit HTML-Tags eine gewünschte Darstellung zu erreichen. Das bekommst du mit CSS wesentlich besser in den Griff.

Warum eigentlich?

Blockelemente erzeugen einen eigenen Absatz. Wenn also vor ihnen ein Inlineelement steht, so wird trotzdem ein neuer Absatz erstellt.

Du kannst das Verhalten von allen HTML-Elementen mit CSS beeinflussen, also auch die display-Eigenschaft.

MfG H☼psel

[Freddy]

Hi Hopsel,

danke für deine Antwort. Aber nur wegen dem Label ein Zeugnis für einen schlechten HTML-Stil auszustellen, geht ein wenig zu weit. Die Klassennamen werden eindeutig erkennbar deklariert und angesprochen, somit können schon gar nich Konflikte mit dem HTML-Schlüsselwort entstehen. Im Übrigen hat sich mein Programmierstil in den vielen Programmiersprachen, die ich gelernt habe, bewährt. Ich habe mich immer gut in meinen Programmen zurechtgefunden und Andere, die bei meiner Abwesenheit darin was Ändern mussten, auch.

Für mein Problem habe ich nach einigem Probieren auch schon eine Lösung gefunden. Deine Erklärungen halfen mir leider nicht weiter. In SelfHTML steht, dass der span-Block kein Zeilenumbruch verursacht, jedoch nur, wenn ich die Blöcke in einer Zeile alle mit span definiere.
Gruß Freddy

[Hopsel]

Hi Freddy!

danke für deine Antwort. Aber nur wegen dem Label ein Zeugnis für einen schlechten HTML-Stil auszustellen, geht ein wenig zu weit.

Das war auch kein Zeugnis, sondern meine persönliche Meinung und schon gar nicht böse gemeint.

Die Klassennamen werden eindeutig erkennbar deklariert und angesprochen, somit können schon gar nich Konflikte mit dem HTML-Schlüsselwort entstehen.

Wie sollte auch?

Im Übrigen hat sich mein Programmierstil in den vielen Programmiersprachen, die ich gelernt habe, bewährt.

HTML ist ein Auszeichnungssprache.

Ich habe mich immer gut in meinen Programmen zurechtgefunden und Andere, die bei meiner Abwesenheit darin was Ändern mussten, auch.

Das möchte ich auch gar nicht abstreiten. Ich bin mir sogar sicher, dass ich mich auch in deinem Quelltext zurecht finden würde. Trotzdem nutzt du weder die sinnvollen HTML-Elemente zu Auszeichnung deines Dokuments, noch setzt du CSS auf sinnvolle Art und Weise ein. Das kann ich zumindest anhand deines Codebeispiels vermuten.

Für mein Problem habe ich nach einigem Probieren auch schon eine Lösung gefunden. Deine Erklärungen halfen mir leider nicht weiter.

Dann hast du sie dir nicht durchgelesen. Ich hab dich auf die display-Eigenschaft hingewiesen, mit der du genau das Verhalten beeinflussen kannst, das du wünschst.

In SelfHTML steht, dass der span-Block kein Zeilenumbruch verursacht, jedoch nur, wenn ich die Blöcke in einer Zeile alle mit span definiere.

Jo. :-)

Ich will doch nur helfen. -.-

MfG H☼psel

[wahsaga]

hi,

Aber nur wegen dem Label ein Zeugnis für einen schlechten HTML-Stil auszustellen, geht ein wenig zu weit.

Nur das aus der Kritik herausgelesen zu haben, ist zu wenig.

Die Klassennamen werden eindeutig erkennbar deklariert und angesprochen, somit können schon gar nich Konflikte mit dem HTML-Schlüsselwort entstehen.

Darum geht es nicht mal.

<div class="label">
   Vorname:
</div>
<span class="label">
   Fritz:
</span>

Wenn "Vorname" die Bedeutung und "Fritz" der Inhalt ist - wieso verpasst du dann beidem die Klasse "label"?

Und ausserdem ist eine Auszeichnung mit den bedeutungslosen Elementen Div und Span reichlich witzlos.

Die Inhalte, die du dort auszeichnen willst, könnten Beispielsweise eine Definitionsliste rechtfertigen.

Im Übrigen hat sich mein Programmierstil in den vielen Programmiersprachen, die ich gelernt habe, bewährt. Ich habe mich immer gut in meinen Programmen zurechtgefunden und Andere, die bei meiner Abwesenheit darin was Ändern mussten, auch.

Auch darum geht es nicht.

HTML ist eine Auszeichnungssprache.
Durch die Wahl der Elemente, die du benutzt, um Inhalte auszuzeichnen, soll möglichst viel über die Bedeutung dieser Inhalte ausgesagt werden.
Div und Span sind aussagefrei.

http://de.wikipedia.org/wiki/Divitis

In SelfHTML steht, dass der span-Block kein Zeilenumbruch verursacht, jedoch nur, wenn ich die Blöcke in einer Zeile alle mit span definiere.

Wenn du vor oder nach einem Span ein Div stehen hast, dann "nimmt" sich dieser Div eine "eigene Zeile" - er "erlaubt" keinen Span mehr neben sich.

gruß,
wahsaga

[Gunnar Bittersmann]

Hello out there!

Die Inhalte, die du dort auszeichnen willst, könnten Beispielsweise eine Definitionsliste rechtfertigen.

Womöglich sind es gar tabellarische Daten.

HTML ist eine Auszeichnungssprache.
Durch die Wahl der Elemente, die du benutzt, um Inhalte auszuzeichnen, soll möglichst viel über die Bedeutung dieser Inhalte ausgesagt werden.

HTML ist immer noch keine Auszeichnungssprache fürs Semantic Web; „möglichst viel“ beschränkt sich auf „gar nichts“. HTML-Elemente sagen nichts über die Bedeutung ihrer Inhalte aus, sondern über deren Stellung in der Dokumentstruktur.

See ya up the road,
Gunnar