Div Element verständniss frage

  • Hallo , ich habe ein Verständnis Problem mit dem Div Element bzw weis nicht ob ich das DIV element jetzt wirklich so verstanden habe. Ich bitte hier nur ernstgemeinte Hilfestellungen zu posten und Postings mit schau bei selfhtml & Co zu unterlassen den da hab ich nun wirklich nicht sehr viel drüber erfahren.

    Was ich wissen möchte hab ich das DIV Element richtig verstanden?

    Ein DIV element ist ein Container er enthält keinerlei Standard style informationen, Standard Grössen bzw Seiten ausrichtungen. IN einem DIV element kann man andere Elemente bzw style informationen mit dem SPAN Element einbaun.

    Wenn ich eine DIV klasse definiere muss ich einfach in der css z.b. mit dem klassen namen anfangen und die dazugehörigen werte z.b.:

    header { font-size:12px: }

    Wenn ich eine DIV ID erstelle muss ich ein PUNKT vor der ID bezeichnung setzten z.b.:

    .userlogin { font-size:12px: }

    Ich hoffe auf NETTE antworten und bitte nochmals Postings wie bist du blind guck da und da zu unterlassen. Es ist für mich eine Verständnis Frage und möchte daher gern wissen ob ich das richtig verstanden habe oder nicht ;)

    Was ich auch noch gern wissen würde da mir bisher wirklich kein unterschied zwischen padding und margin aufgefallen ist wo nun der wirkliche unterschied besteht. GIbt es ggf ne Skizze dazu was welchen effekt auslöst?

  • Guten Morgen!

    Also, im Großen Ganz richtig, was du sagst ...
    Aber wnen du eine div id via CSS erstelllst musst du im Stylesheet schreiben

    Code
    div#userlogin { font-size:12px; }

    Was mir aufgefallen ist, du machst immer 2 Doppelpunkte (>> font-size:12px:)
    Das ist falsch. Nach jedem Befehl kommt ein Semikolon, also so:

    Code
    {font-size:12px;}

    Das gleiche was du in den Stylesheet schreibst, könntest du theoretisch auch im div-Tag unterbringen.
    Hat genau den gleichen Effekt, wenn du statt

    Code
    {font-size:12px;}

    im Stylesheet es gleich so schriebst:

    Code
    <div style="font-size:12px;">Schrift in Größe 12</div> wieder normal ...

    Aber eigentlich benutzt man für so etwas keine div´s sondern <span>
    div´s benutzt man eher für Bereiche die eine Breite und Höhe haebn sollen.

    padding und margin:
    paddgin bedeutet der Abstand eines div´s nach innen und margin ist der Außernabstand zum nächsten Objekt.
    Hier ganz gut nachzuvollziehen:
    http://www.css4you.de/wsboxmodell/index.html

    Tipp: Wenn du dir da unsicher bist, übe lieber ersteinmal mit dem Mozilla Firefox, der interpretiert das ganze nämlich richtig. Der IE6 berechnet das padding anders ... (sieht es als Teil der Breite bzw. Höhe und nicht so wie es vorgeshcrieben ist, extra ...)

    Noch Fragen ?
    :wink:

    Gruß, Chris

  • Ah wunderbar ^^ Das mit den Semikolons wusste ich allerdings hab ich dort wohl nen schreibfehlerreingehaun sorry *gg*

    Zitat

    div#userlogin { font-size:12px; }

    dachte immer das es auch durch einfache angabe der ID bzw class geht also z.b.:

    Zitat

    userlogin { font-size:12px; }

    oder trifft das nur auf einigen Browsern zu?

    Ich würd gern soweit es geht alles in einer extern Css unterbringen da ich für mich so eine bessere übersicht habe und die bereiche besser definieren kann.

    Zitat


    Aber eigentlich benutzt man für so etwas keine div´s sondern <span>
    div´s benutzt man eher für Bereiche die eine Breite und Höhe haebn sollen.

    Hab ich jetzt nich kapiert ^^ Span elemente können bzw dürfen doch nur im DIV element vorkommen ?

    Zitat


    padding und margin:
    paddgin bedeutet der Abstand eines div´s nach innen und margin ist der Außernabstand zum nächsten Objekt.
    Hier ganz gut nachzuvollziehen:
    http://www.css4you.de/wsboxmodell/index.html

    Ah wunderbar. MIt IE 7 gibts auch leider sehr viele Probleme mit den div elementen. Wenn ich padding ohne einen DIV Element angebe habe ich keinerlei auswirkungen da ja z.b. kein element da ist?!?

    Zitat
  • Hi,

    da hab ich auch noch was dazu zu sagen ;)

    Zitat

    dachte immer das es auch durch einfache angabe der ID bzw class geht also z.b.:

    Zitat:
    userlogin { font-size:12px; }
    oder trifft das nur auf einigen Browsern zu?

    IDs sprichst du mit #userlogin an, Klassen sprichst du mit .userlogin an. Ohne Punkt oder Raute sprichst du DIREKT alle Elemente eines Typs an. Zum Beispiel alle divs mit div{Attribut: Wert;} oder span{Attribut: Wert;}

    Zitat

    Hab ich jetzt nich kapiert ^^ Span elemente können bzw dürfen doch nur im DIV element vorkommen ?

    Nein. Span Elemente können auch außerhalb von DIVs vorkommen. Divs sind leere Block-Elemente, die immer den maximal zur Verfügung stehenden Raum in der Breite einnehmen, und neben denen du nicht ohne weiteres ein weiteres Element platzieren kannst.
    Spans sind leere Inline-Elemente, sie haben exakt die Größe ihres Inhalts, und es können beliebig viele Inline-Elemente nebeneinander platziert werden.
    DIVs und Spans haben ohne CSS-Formatierung keinerlei Effekt, da sie extra dafür geschaffen sind, IDs und Klassen anzunehmen, um so das Layout einer Seite zu definieren ;)

    Zitat

    Ah wunderbar. MIt IE 7 gibts auch leider sehr viele Probleme mit den div elementen. Wenn ich padding ohne einen DIV Element angebe habe ich keinerlei auswirkungen da ja z.b. kein element da ist?!?

    Stimmt. Wo hast du das padding denn angewendet, wenn nicht auf ein Element?
    Padding und Margin können nur bei Blockelementen Fehlerfrei eingesetzt werden. Z.B. Inline-Elemente haben kein Padding.

    Du kannst allerdings mit dem Attribut display: zum Beispiel Inline-Elemente wie Span in Blockelemente wie DIV umwandeln, und dann die Artspezifischen Attribute verwenden.

    Ich hoffe ich hab dich nicht noch weiter unnötig verwirrt ;)

    Grüße,
    LizZard

    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.