Was nutzt mir das Element Div?

bodenseejenny

Hallo,
habe gerade einen kleinen WK gemacht und das Element Div kennengelernt.
Ich frage mich, wozu ich dieses Element brauche, denn ich habe in den vorherigen Kapiteln gelernt, das ich mit dem Element p einen Absatz definiere, der oben oder halt unten einen Abstand einfügt. Div tut dies nicht, aber aber kann ich da nicht genauso gut das Elment br für div nehmen? Ich hoffe ihr versteht meine Frage? Bin nicht so gut im Erklären.

Hier ein kleines Beispiel:

HTML

<!DOCTYPE html Public"W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml 1/DTD/xhtml 1- strict.dtd">
<html xmnls="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
  <title>div und p</title>
 </head>
 <body>
      <h1>Einsatz von Div</h1>
      <div>Hier steht ein Beispieltext</div>
      <div>Hier steht ein Beispieltext</div>
      <div><p>Ein Div kann weitere Blockelemente enthalten</p>
           <p>Neben Abs&auml;tzen beispielsweise auch Listen:</p>
      <ul>
         <li>Birnen</li>
         <li>Bananen</li>
      </ul>
      </div>
      <h1>Einsatz von P</h1>
      <p>Hier steht ein Beispieltext</p>
      <p>Hier steht ein Beispieltext</p>
      <p>Hier steht ein Beispieltext</p>
 </body>
</html>

Alles anzeigen

Hätte ich für die rot markierten Div nicht einfach br nehmen können? Hab den Unterschied nicht so ganz kapiert!

LG Jenny

driver

br = break, also ein zeilenumbrauch
div = ein container, also ein behälter für tabellen, absätze, spans usw

mal die grobe unterteilung

ein br lässt also nur eine neue zeile anfangen - mehr nicht. ein div ist
ein behälter für andere elemente. hat also auch nen rahmen, ne ausrichtung,
ne hintergrundfarbe usw.

btw. wenn du nur eine zeile hast, wie oben, würd ich das tag span nehmen

vielleicht noch ein kleines beispiel:

du hast links deine navigation. einen ganzen bereich mit ner gewissen
hintergrundfarbe und evtl einem rahmen -> div-container

in dem navi-div hast ne liste mit den menüpunkten -> ul /li

unter der liste hast einen absatz, darin steht vielleicht ne kleine information
zu deiner seite oder das datum etc -> p

vielleicht willst auch in dem absatz etwas dick hervorheben, oder farbig,
dazu kannste dann z.b. einen span benutzen.in ner neuen zeile steht dann
noch ein text, dazu brauchst dann das break

HTML

<div>
<ul><li></li></ul>
<p><span>es ist:</span><br/>Mittwoch</p>
</div>

synaptic

hab mal deinen code um codetags ergänzt, das macht des ganze lesbarer.
is zwar deine rotmarkierung bei flöten gegangen, aber ich denke jeder wird sehen um welche divs es geht

div steht soweit ich weiß für DIVision = bereich
es ist also ein abgeschlossener container, den man um einen block objekte legt um diese dann in gesamtheit positionieren zu können.
ein p-tag ist dann wieder ein paragraph, also für einen textabschnitt, der innherhalb von divs vorkommen kann.
den rest hat driver mir ja schon vorweggenommen^^

bodenseejenny

Danke, jetzt hab ichs kapiert! Können die das im Buch nicht genauso beschrieben?
Danke das einem hier so schnell die Fragen beantwortet werden!

LG Jenny

koslowski

Hi,

ein div ist ein neutrales Blockelement was dazu dient, andere Elemente zusammenzufassen, um sie sinnvoll zu gruppieren.

Das beim p oben und unten ein Abstand eingefügt wird liegt an den browserinternen Vorformatierungen, die leider nicht bei allen Browsern gleich sind.
Deshalb macht es Sinn ganz oben in deiner CSS:

Code

*  {
   padding:0;
   margin:0;
}

zu notieren. Alle Abstände für alle Elemente werden so auf null gesetzt und du hast eine einheitliche Grundlage von der aus du die Abstände neu definierst.

Zeilenumbrüche mit <br /> zu definieren ist relativ selten notwendig und gilt unter gestandenen Webdesignern als Bäh..
Dann sollte man lieber einen neuen Textabsatz machen.

Elvis

Ich sag nur: besser gleich gute Bücher kaufen.

koslowski

Moin,

Zitat von Elvis

Ich sag nur: besser gleich gute Bücher kaufen.

jep, genau.

Allerdings halte ich den Onlinekurs und das Buch des Autors für vollkommen ungeeignet Anfänger die Materie auf verständliche Weise näherzubringen.
Der Autor schreibt für Akademiker und nicht für normale Leute.

Wenn ich solche Sprachungetüme lese:

Zitat

Design bedeutet folglich nicht einfach nur visuelle, Form- und Materialgestaltung mit dem Ziel, ein ästhetisches Produkt zu entwerfen, sondern hat ein ergonomisches Produkt zum Ziel unter Beachtung der Funktionalität, Gebrauchstauglichkeit und (handwerklichen) Qualität.

sträuben sich mir die Nackenhaare.
Da ist man erstmal ne Weile damit beschäftigt den Satz überhaupt zu verstehen.

Der Autor weiss fachlich von was er redet, kann es sprachlich und didaktisch leider nicht gut rüberbringen.

Einen guten Onlinekurs gibt es z.B. hier.
Die Sprache der Autorin ist klar, knapp, sehr präzise und vor allem verständlich.

Als Buch ist die Little Boxes Reihe gut geeignet.

Einfach mal von z.B. Little Boxes 1 das dritte Kapitel downloaden und lesen.
Dann mal das Gleiche des ersten Autors zum Vergleich lesen.

Da liegen imho doch Welten dazwischen.

synaptic

also ich hab das buch hier noch rumfliegen
http://www.amazon.de/HTML-Flexible-…84&sr=8-1-fkmr0

find das es ganz gut geschrieben is....
und hilft auf jeden fall auch die materie zu verstehen!
hatte es mir leider zugelegt, als ich mit xhtml anfangen wollte, hatte da aber schon zuviel grundwissen, so dass ich net mehr ganz so viel lernen konnte...

wenn du dir die 1,20 sparen magst schreib mir ne pn mit deiner adresse, buchsendungen sind ja kostenfrei...

Was nutzt mir das Element Div?

Tags

Benutzer online in diesem Thema