Auge: Container

Beitrag lesen

Hallo

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>

Wen ich entweder html oder body eine Hintergrundfarbe gebe, ändert sich überhaupt nichts.

Die jeweilig gesetzte Hintergrundfarbe, genauer die des „vorderen“ Elements, sollte zu sehen sein.

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?

Sofern kein weiteres Element, das für sich Platz einnimmt, vorhanden ist, ja. Du gibst für body eine Breite vor. Die Höhe von body richtet sich, ohne weitere Vorgaben, nach seinem Inhalt. Dieser wird offensichtlich von p bestimmt. Wird die Tabelle überhaupt ausgegeben?

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.

Soweit, so richtig.

Beispielsweise hat hier für p "margin-top" überhaupt keine Wirkung außer man setzt für p float: left.

Das hat zu funktionieren. Wenn es nicht funktioniert, ist da noch eine andere Angabe, die dieser margin-Regel widerspricht.

Also was macht das für einen Unterschied ob ich schreibe:

Ich erspare mir lediglich div im Anfan- und Endtag.

Ja, das ist erstmal alles. Es geht auch nicht darum, alle Elemente zwangsweise direkt in body zu notieren, sondern unnötige Elemente zu vermeiden. Wenn dein div ausschließlich dazu dienen soll, die weiteren Elemente direkt innerhalb des Elements body zu gruppieren, kannst du es auch weglassen und sie stattdessen mit body selbst gruppieren. Erfüllt das div noch andere Zwecke, ist es sinnvoll, es dennoch zu notieren.

Jedenfalls kommt mir vor, daß html- bzw. CSS-Elemente anders zu handhaben sind.

Das ist nicht zutreffend. Was allerdings zu wissen wichtig ist, ist, dass body je nach browser andere Standardvorgaben für margin und padding hat. Im Firefox z.B. hat body einen margin von ca. 25px.

Tschö, Auge

--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“