<DIV> / <P>

[Eddie]

Hallo allerseits,

ich versuche mich gerade mit div und p zurechtzufinden.
Gehe ich richtig in der Annahme, dass ich prinzipiell fuer alles DIV verwenden kann und die DIVs dabei auch RICHTIG tief verschachtelt werden koennen?
Während ich <p> letztlich NUR für Texte verwende?
Sprich so:

<div>
    <div>
        <div>
            <img ...>
            <p>
                <h1>Titel</h1>
                blabla
            </p>
        </div>
    </div>

<div>
        <img ...>
    </div>

</div>

Danke Euch,
Eddie

[PeterK]

Hi

P stweht für eienn Textabsatzt.
DIV steht für 'DIVerses', dh., also DIV ist nur ein Container ohne eigenschaften, während P einen Text kennzeichnet. Anstatt von DIV ( das einen ZUeilenumbruch hervorruft) kannst du auch SPAN nutzen, das das nicht tut.

Peter

[Eddie]

Mmmh, irgendwie peil ich div und p (und span) allesamt nicht!

Ich will hier gerade 2 Bereiche nebeneinander (float) darstellen, geht aber nicht:

<div style="float:left; width:466px;>
   <img src="...">
   <br>
   <textarea ...> blabla </textarea>
</div>

<p style="white-space:nowrap; BORDER:2px solid black;">
     <input type="checkbox" ...> Bild löschen.
</p>

Das sieht dann auch ganz nett aus (nebeneinander), wenn ich aber dem <p> eine border gebe, wie hier im Beispiel, dann sieht man, das sich die beiden Bereiche vollkommen ueberlagern.
Komischerweise wird die Checkbox nicht ueber, sondern neben dem Div dargestellt, sprich der <p>-Bereich ist links auf einer Breite von 466 Pixeln einfach leer.
Peil ich nich.

Thanx, Eddie

[Eddie]

... :-?
und jetzt versteh ich's noch schlechter:
habe dem <p>-Style jetzt ein "height:100%;" hinzugefuegt und ploetzlich ist es in der Breite richtig formatiert.
Warrrum?

:-0
Also grad bin ich wirklich ahnungslos, danke fuer Eure Hilfe!
Eddie

[Tim Tepaße]

Hallo Eddie,

Das sieht dann auch ganz nett aus (nebeneinander), wenn ich aber dem <p>
eine border gebe, wie hier im Beispiel, dann sieht man, das sich die beiden
Bereiche vollkommen ueberlagern.

Das soll so. Steht so im Standard. ;-)

http://www.w3.org/TR/REC-CSS2/visuren.html#floats
  http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.5�

Der zweite Link verweist auf die deutsche Übersetzung des entsprechenden
Abschnittes der CSS 2 Spezifikation. Der erste verweist auf das Original.

Und hier findest Du noch ein paar Beispiele zur Verwendung von float zur
Seitenaufteilung.

http://css.fractatulum.net/beispiele.htm

• Tim

[emu]

Hallo!

Anstatt von DIV (das einen Zeilenumbruch hervorruft) kannst du auch SPAN nutzen, das das nicht tut.

Du verwechselst logische Textauszeichnung mit visueller Darstellung. Nur, weil es für einen Teilbereich der Ausgabeformen, nämlich die visuelle Darstellung, üblicherweise sinnvoll ist, mit dem Element div ausgezeichnete Elemente abgesetzt bzw. mit Zeilenumbruch darzustellen und die Browser das standardmäßig so machen, heißt das noch lange nicht, dass der Unterschied zwischen div und span im Zeilenumbruch liegt oder gar, dass die beiden Elemente beliebig austauschbar sind.

Div ist ein generisches Blockelement, span ein generisches Inlineelement, was sich allerdings nur auf die Speicherung bezieht. Mit zusätzlichen Sprachen wie etwa CSS kannst du auch noch definieren, wie diese Elemente bzw. deren Inhalt auf dem Bildschirm oder einem anderen Medium deiner Wahl dargestellt werden.

emu

[Michael Jendryschik]

Hallo,

Nur, weil es für einen Teilbereich der Ausgabeformen, nämlich die visuelle Darstellung, üblicherweise sinnvoll ist, mit dem Element div ausgezeichnete Elemente abgesetzt bzw. mit Zeilenumbruch darzustellen und die Browser das standardmäßig so machen,

Diese Darstellung wird in REC-HTML4 auch ausdrücklich empfohlen.

heißt das noch lange nicht, dass der Unterschied zwischen div und span im Zeilenumbruch liegt oder gar, dass die beiden Elemente beliebig austauschbar sind.

Nun, man könnte sogar eher sagen, dieser "Zeilenumbruch" sei der einzige Unterschied zwischen 'div' und 'span'. Beides sind Elemente ohne semantischen Wert, 'div' ist ein Block- und 'span' ein Inline-Element. Der Unterschied in der Formatierung wird unterhttp://www.w3.org/TR/html401/struct/global.html#h-7.5.3 deutlich gemacht:

"By default, block-level elements are formatted differently than inline
   elements. Generally, block-level elements begin on new lines, inline elements
   do not."

In REC-CSS2 steht darüber hinaus:

"Block-level elements are those elements of the source document that are formatted
   visually as blocks (e.g., paragraphs)."
  http://www.w3.org/TR/REC-CSS2/visuren.html#q5

"Inline-level elements are those elements of the source document that do not form
   new blocks of content; the content is distributed in lines (e.g., emphasized pieces
   of text within a paragraph, inline images, etc.)."
  http://www.w3.org/TR/REC-CSS2/visuren.html#q7

Natürlich darf ein Inline-Element nicht überall dort verwendet werden, wo ein Blockelement verwenden wird und umgekehrt, das weíß auch ich. ;-) Aber darüber hinaus ist der Zeilenumbruch vor und nach dem Element in der Tat der einzige Unterschied zwischen den beiden Elementen.

Div ist ein generisches Blockelement, span ein generisches Inlineelement, was sich allerdings nur auf die Speicherung bezieht.

Häh? Auf die Speicherung?

Gruß,

MI

[emu]

Hallo!

Nur, weil es für einen Teilbereich der Ausgabeformen, nämlich die visuelle Darstellung, üblicherweise sinnvoll ist, mit dem Element div ausgezeichnete Elemente abgesetzt bzw. mit Zeilenumbruch darzustellen und die Browser das standardmäßig so machen,
Diese Darstellung wird in REC-HTML4 auch ausdrücklich empfohlen.

Und? Mich würde interessieren, wie du bei Sprachausgabe einen Zeilenumbruch darstellen willst.

Nun, man könnte sogar eher sagen, dieser "Zeilenumbruch" sei der einzige Unterschied zwischen 'div' und 'span'.

Für mich hat ein Blockelement einen anderen semantischen Wert als ein Inlineelement und ist daher in den seltensten Fällen beliebig austauschbar.

[Defaultdarstellung in den Spezifikationen]

Ich habe ja nicht bestritten, dass üblicherweise bei visueller Darstellung ein Zeilenumbruch eingefügt wird. Das ist aber keineswegs ein Dogma, mit CSS kann man bekanntlich ein Blockelement wie ein Inlineelement darstellen lassen und umgekehrt.

Div ist ein generisches Blockelement, span ein generisches Inlineelement, was sich allerdings nur auf die Speicherung bezieht.
Häh? Auf die Speicherung?

Ja; wie es auf dem Bildschirm dann dargestellt wird oder mit anderen Medien ausgegeben wird, ist eine andere Frage. Natürlich ist Speicherung ein etwas unglücklich gewählter Begriff.

emu

[Michael Jendryschik]

Hallo,

Für mich hat ein Blockelement einen anderen semantischen Wert als ein Inlineelement und ist daher in den seltensten Fällen beliebig austauschbar.

Wo liegt dieser semantische Unterschied zwischen 'div' und 'span' deiner Ansicht nach? Diskutieren wir über folgendes Beipiel:

Gibt es einen semantischen Unterschied zwischen

<div>
     <div />
     <div />
  </div>

und

<div>
     <span />
     <span />
   </div>

?

Ändert dieser Unterschied sich, wenn ich schreibe:

<div>
     <div style="display: inline" />
     <div style="display: inline" />
  </div>

<div>
     <span style="display: block" />
     <span style="display: block" />
   </div>

Div ist ein generisches Blockelement, span ein generisches Inlineelement, was sich allerdings nur auf die Speicherung bezieht.

Häh? Auf die Speicherung?

Ja; wie es auf dem Bildschirm dann dargestellt wird oder mit anderen Medien ausgegeben wird, ist eine andere Frage. Natürlich ist Speicherung ein etwas unglücklich gewählter Begriff.

Derart unglücklich, dass ich mir noch immer nicht vorstellen kann, was du eigentlich meinst.

Gruß,

MI

[emu]

Hallo!

Für mich hat ein Blockelement einen anderen semantischen Wert als ein Inlineelement und ist daher in den seltensten Fällen beliebig austauschbar.
Wo liegt dieser semantische Unterschied zwischen 'div' und 'span' deiner Ansicht nach? Diskutieren wir über folgendes Beipiel:
Gibt es einen semantischen Unterschied zwischen
  <div><div /><div /></div> und
  <div><span /><span /></div> ?

Das ist für mich kein Beispiel, dass das Problem verdeutlicht. So, wie es dasteht, ist es tatsächlich egal, aber man definiert ja mit HTML üblicherweise keine Strukturen ohne Inhalt. Ein meiner Meinung nach gelungeneres Beispiel wäre folgendes.

<p lang="de">
Ein durch komplexe Strukturen, die ganz unumgänglich sind und zur Klarheit der Semantik und Syntax, zumindest wie sie von Muttersprachlern verstanden werden, beitragen, definierter deutscher Satz, der hinsichtlich der Verschachtelung, will man es so ausdrücken, sehr dem Konzept von HTML entspricht.
</p>

ist besser/sinnvoller/richtiger als

<p>
<span lang="de">Ein durch komplexe Strukturen, die ganz unumgänglich sind und zur Klarheit der Semantik und Syntax, zumindest wie sie von Muttersprachlern verstanden werden, beitragen, definierter deutscher Satz, der hinsichtlich der Verschachtelung, will man es so ausdrücken, sehr dem Konzept von HTML entspricht.</span>
</p>

Ist klar, was ich meine? Es fällt mir schwer, den Unterschied exakt zu definieren. Um es für die Teilmenge Fließtext zu verdeutlichen: *Absatz ist ungleich Wortgruppe.*

Div ist ein generisches Blockelement, span ein generisches Inlineelement, was sich allerdings nur auf die Speicherung bezieht.
Häh? Auf die Speicherung?
Natürlich ist Speicherung ein etwas unglücklich gewählter Begriff.
Derart unglücklich, dass ich mir noch immer nicht vorstellen kann, was du eigentlich meinst.

Es ist für mich weitgehend irrelevant, wie die empfohlene Darstellung aussieht, da man sie ja ohnehin mit CSS beeinflussen kann. Wichtiger ist, das semantisch sinnvollere Element auszuwählen. Die Verkürzung »Div ist span mit Zeilenumbruch« finde ich nicht korrekt.

emu

[Johannes Zeller]

Hallo Eddie

ich versuche mich gerade mit div und p zurechtzufinden.
Gehe ich richtig in der Annahme, dass ich prinzipiell fuer alles DIV verwenden kann und die DIVs dabei auch RICHTIG tief verschachtelt werden koennen?

Über die Unterschiede und den Sinn von <div> und <p> gab es letztens im Archiv schon eine ausgiebige Diskussion: http://forum.de.selfhtml.org/archiv/2003/4/45167/.

Schöne Grüße

Johannes

[MudGuard]

Hi,

ich versuche mich gerade mit div und p zurechtzufinden.
Gehe ich richtig in der Annahme, dass ich prinzipiell fuer alles DIV verwenden kann und die DIVs dabei auch RICHTIG tief verschachtelt werden koennen?

Können ja, sollen nein. Verwende immer das Element, dessen Sinn dem des Anwendungszwecks am nächsten kommt.

Während ich <p> letztlich NUR für Texte verwende?
Sprich so:

Nein, so nicht, denn

<div>
    <div>
        <div>
            <img ...>
            <p>

p ist ein blocklevel-Element, das nur inline-Elemente enthalten darf, aber

<h1>Titel</h1>

h1 ist kein inline-Element, sondern ein Blocklevel-Element.

blabla
            </p>

cu,
Andreas