pixxma: HTML5-Verwirrung: main vs. div, sectioning vs. grouping

SELF-Forum

HTML5-Verwirrung: main vs. div, sectioning vs. grouping

pixxma
– Informationen zu den Bewertungsregeln

Guten Morgen,

meine Site hat folgenden HTML5-Grundaufbau:

header
main
  section
  article
  article
  article
footer

Das root-Element html hat über CSS eine Hintergrundfarbe. Das soll der Haupthintergrund des Dokumentes sein bis unten hin zum footer. Der footer bekommt über CSS eine eigene Hintergrundfarbe. Unerwünschtes Ergebnis: die footer-Hintergrundfarbe erstreckt sich vom footer aus nach oben über den kompletten main-Bereich! Nur der header hat die Hintergrundfarbe von html:-(

Wenn ich main durch div ersetze, klappt es wie gewünscht!

Liegt es bei main daran, dass es kein sectioning-Element, sondern ein grouping-Element ist? Aber div ist doch auch ein grouping-Element!? Warum klappt es beim einen und beim anderen nicht?

Und wie soll man auf sectioning-Ebene den Hauptinhalt eines Dokumentes auszeichnen? Oder ist das gar nicht vorgesehen?

MfG

pixxma

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. HTML5-Verwirrung: main vs. div, sectioning vs. grouping

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, pixxma!

    meine Site hat folgenden HTML5-Grundaufbau:

    Zeichma! ;-)

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Schal und Schallplatte.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. HTML5-Verwirrung: main vs. div, sectioning vs. grouping

      pixxma
      – Informationen zu den Bewertungsregeln

      Zeichma! ;-)

      HTML:

      <!DOCTYPE html>  
<html>  
<head>  
	<meta charset=UTF-8>  
	<title>Text</title>  
	<link rel="stylesheet" href="styles.css" type="text/css">  
</head>  
  
<body>  
  
  <header>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
  </header>  
  
  <main>  
        <section>  
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
        </section>  
        <article>  
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam</p>  
        </article>  
        <article>  
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam</p>  
        </article>  
        <article>  
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam</p>  
        </article>  
  </main>  
  
  <footer style="background-color:silver">  
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
  </footer>  
  
</body>  
</html>

      CSS (Baustelle):

      @charset "UTF-8";  
/* RESET */  
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, nav, article, aside, footer, hgroup, section {  
	margin: 0;  
	padding: 0;  
	border: 0;  
	outline: 0;  
	font-weight: inherit;  
	font-style: inherit;  
	font-size: 100%;  
	font-family: inherit;  
	text-decoration: none;  
}  
:focus, :active { outline: 0 }  
  
ol, ul { list-style: none }  
  
blockquote:before, blockquote:after { content: "" }  
blockquote { quotes: "" "" }  
  
header, nav, article, aside, footer, hgroup, section { display: block }  
  
  
html {  
	background-color: darksalmon;  
}  
body {  
	margin: 0 auto;  
	color: black;  
}  
  
p {  
	margin-bottom: 10px;  
	margin-left: 20px;  
	margin-right: 20px;  
}  
  
.newLine { display: block }  
  
main {  
	width: 100%;  
	margin-right: 30px;  
	float: left;  
}  
article {  
	width: 60%;  
	background: white;  
	margin-left: auto;  
	margin-right: auto;  
	margin-top: 0px;  
	margin-bottom: 30px;  
	padding: 0px 0px 3px 0px;  
}  
section {  
	width: 60%;  
	margin-left: auto;  
	margin-right: auto;  
	height: 50px;  
	line-height: 25px;  
	background-color:white;  
	margin-bottom: 30px;  
}

      MfG

      pixxma

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. HTML5-Verwirrung: main vs. div, sectioning vs. grouping

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, pixxma!

        Zeichma! ;-)

        Dass online-Beispiele wesentlich besser sind, brauch ich dir ja nicht zu sagen ;-)

        Welchen Zweck erfüllt main {float: left;} ?

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pappe und Pappel.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. HTML5-Verwirrung: main vs. div, sectioning vs. grouping

          pixxma
          – Informationen zu den Bewertungsregeln

          Welchen Zweck erfüllt main {float: left;} ?

          *Autsch* - das habe ich vergessen herauszunehmen; das Layout sollte ursprünglich mal zweispaltig sein … Alles o.k. jetzt!

          Dankeschön:-)

          MfG

          pixxma

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. HTML5-Verwirrung: main vs. div, sectioning vs. grouping

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hallo,

    meine Site hat folgenden HTML5-Grundaufbau:

    header
    main
      section
      article
      article
      article
    footer

    Das root-Element html hat über CSS eine Hintergrundfarbe. Das soll der Haupthintergrund des Dokumentes sein bis unten hin zum footer. Der footer bekommt über CSS eine eigene Hintergrundfarbe. Unerwünschtes Ergebnis: die footer-Hintergrundfarbe erstreckt sich vom footer aus nach oben über den kompletten main-Bereich! Nur der header hat die Hintergrundfarbe von html:-(

    zeig doch mal den Original-Quelltext deines Dokuments. Was du beschreibst, klingt klar nach einem Fehler - entweder einem von dir (Struktur), oder einem vom Browser. Apropos Browser: Mit welchem hast du dieses Verhalten beobachtet?

    Wenn ich main durch div ersetze, klappt es wie gewünscht!

    Das ist nicht logisch erklärbar.

    Liegt es bei main daran, dass es kein sectioning-Element, sondern ein grouping-Element ist? Aber div ist doch auch ein grouping-Element!? Warum klappt es beim einen und beim anderen nicht?

    Gute Frage. Theoretisch sollte es aus CSS-Sicht keinen Unterschied geben. Es sei denn ... Es sei denn, der Browser würde das main-Element nicht kennen und komplett ignorieren (vielleicht ein IE im Kompatibilitätsmodus). Allerdings sollte man annehmen, dass ein Browser, der main ignoriert, ebensogut header und footer ignoriert.
    Hast du mal den DOM-Baum mit den browsereigenen Developer-Tools (oder Firebug) angesehen? Sieht die Elementstruktur da richtig aus?

    So long,
     Martin

    --
    Husten kann böse Folgen haben.
    Besonders im Kleiderschrank.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. HTML5-Verwirrung: main vs. div, sectioning vs. grouping

      pixxma
      – Informationen zu den Bewertungsregeln

      zeig doch mal den Original-Quelltext deines Dokuments.

      Siehe mein anderes Posting von 12:06 Uhr.

      Was du beschreibst, klingt klar nach einem Fehler - entweder einem von dir (Struktur), oder einem vom Browser. Apropos Browser: Mit welchem hast du dieses Verhalten beobachtet?

      Firefox, aktuelle Version. - Ich fürchte, es liegt an mir bzw. meiner CSS-Datei ...

      Theoretisch sollte es aus CSS-Sicht keinen Unterschied geben. Es sei denn ... Es sei denn, der Browser würde das main-Element nicht kennen und komplett ignorieren (vielleicht ein IE im Kompatibilitätsmodus). Allerdings sollte man annehmen, dass ein Browser, der main ignoriert, ebensogut header und footer ignoriert.

      s.o.

      MfG

      pixxma

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. HTML5-Verwirrung: main vs. div, sectioning vs. grouping

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@pixxma:

    nuqneH

    Wenn ich main durch div ersetze, klappt es wie gewünscht!
    […] Warum klappt es beim einen und beim anderen nicht?

    Weil Browser für div im Browserstylesheet ``div { display: block }{:.language-css} zu stehen haben, für main (noch) nicht.

    Löst ``main { display: block }{:.language-css} dein Problem?

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. HTML5-Verwirrung: main vs. div, sectioning vs. grouping

      pixxma
      – Informationen zu den Bewertungsregeln

      Löst ``main { display: block }{:.language-css} dein Problem?

      Es lag wohl eher an dem fehlerhaften main {float: left;}. Siehe Posting von Matthias Apsel 12:41 Uhr. Jetzt funktioniert es auch mit main ohne display: block.

      Dankeschön

      MfG

      pixxma

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln