franzsen: Container

Beitrag lesen

Aber auch dieses gruppierende div ist nicht erforderlich, da mit body schon ein gruppierender Container vorhanden ist:

Habe es mit dieser Variante ausprobiert. Komme damit aber nicht ganz zurecht. Anscheinend verlangt diese Form wieder andere Gestaltungsregeln. Ich habe folgenden code geschrieben:

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title></title>
<style>
html {
  background-color: red;
  }
body {
  background-color: blue;
  width:250px;
  outline: 2px solid;
  }
p {
  display: block;
  background-color: yellow;;
  }
</style>
</head>

<body>
<div>
<main role="main">
	<p>Ein Übungstext Ein Übungstext Ein Übungstext</p>
</main>
</div>

<div>
<table border="" frame="">
	<td>Inhalt</td>
	<td>Inhalt</td>
</table>
</div>

</body>
</html>

Die Farben bzw. Rahmen dienen nur zur Erkennung der Bereiche bestimmter Blöcke.
Wen ich entweder html oder body eine Hintergrundfarbe gebe, ändert sich überhaupt nichts. Sobald ich in beiden eine unterschiedliche Farbe setze wird der Absatz "p" in der Farbe dargestellt als bekäme p einen Hintergrund; in Wirklichkeit ist es der body. Setze ich für p eine dritte Farbe so sieht man diese Farbe und die des body verschwindet. Sind body und p nun gleich groß oder wie?

Eine weitere Besonderheit fällt mir auf, daß folgende HTML-Elemente alle im body verbleiben. Wahrscheinlich eine Gewöhnungssache. Eine Darstellung wie üblich bekomme ich nicht. Da habe ich zwar auch body als Container, aber ich kann darin unterschiedliche Bereiche gestalten bzw. divs setzen. Im Beispiel aber habe ich alles im body, also in einem einzigen Container zusammengefaßt, abgesehen von html; es verschiebt sich alles nur um eine Ebene noch oben. Beispielsweise hat hier für p "margin-top" überhaupt keine Wirkung außer man setzt für p float: left. Also was macht das für einen Unterschied ob ich schreibe:

<div>
  <header>
  <Inhalt>
  <footer>
</div>
oder ich setze body als container
  <header>
  <Inhalt>
  <footer>

Ich erspare mir lediglich div im Anfan- und Endtag. Jedenfalls kommt mir vor, daß html- bzw. CSS-Elemente anders zu handhaben sind.

--
LG Franz