Block- u. Inline-Elemente

Blockelemente benötigen nach der Definition einen ganzen Block und Inline-Elemente können innerhalb einer Linie (bzw. Block) vorkommen.

Was eine Inline-Element und was ein Block-Element darstellt, ist im DTD (Document Type Definition) hinterlegt.
Typische Blockelemente sind z.B. "h1 ... h6, p".
Typische Inline-Elemente sind z.B. "strong, em, a".

Interessant ist, dass diese durch CSS „umdefiniert“ werden können. Aus einem Blockelement kann ein Inline-Element gemacht werden, bzw. die Verhaltensweise eines Inline-Elements. Dadurch kann oftmals float geschickt ersetzt werden.

Die Umdefinition geschieht durch "display" - Beispiele:

li { display:inline; }
img {display:block; }

Im Beispiel werden Aufzählungen in einer Reihe dargestellt und jedes Bild benötigt eine eigene Zeile.

Steuerung horizontal

Im Beispiel mit unserer Steuerung horizontal sieht der Quellcode dann aus:

<style type="text/css">
#navi3 {
  text-align:left;
  margin-top:10px;
  margin-bottom:10px;
  margin-left:20px;
  margin-right:15px;
}

#navi3 ul {
  list-style:none;
}

#navi3 li {
  display:inline;  /*  ERSATZ FÜR: float:left; */
  margin-left:15px;
  width:90px;
  background-color:silver;
  border-top:1px black solid;
  border-left:25px orange solid;
  border-bottom:1px red solid;
  border-right:2px blue solid;
  margin-top:10px;
  padding-top:8px;
  padding-bottom:8px;
  padding-left:8px;
  padding-right:8px;
}
</style>

<div id="navi3">
<ul>
  <li><a href=index.htm>Startseite</a></li>
  <li><a href=ueber-mich.htm>Über mich</a></li>
  <li><a href=termine.htm>Termine</a></li>
</ul>

</div>

Im Browser kommte wird es folgend angezeigt:

Elemente ausblenden

Es gibt auch die Möglichkeit, Elemente komplett auszublenden, dass keinerlei Platz für das Element in der Browserausgabe reserviert wird. Dies hat z.B. seine Anwendung bei einer CSS-Definition für den Ausdruck, wo beispielweise die komplette Steuerung nicht mit ausgedruckt werden soll.

#steuerung { display: none; }
vorheriges Kapitel: Steuerung mit Feedback
nächstes Kapitel: Bilder und Hintergrund
Steuerung mit FeedbackSeitenanfangBilder und Hintergrund
eBook HTML-Seminar.de
del.icio.usMister Wong         Steuerung mit FeedbackSeitenanfangBilder und Hintergrund
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 20.1.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de