Okt 2008

CSS width / height • Breite und Höhe von HTML-Elementen

 
 
0001280.gif

Weist ein durch width oder height begrenztes Element eine Hintergrundfarbe oder Rahmen auf, zeigt sich, dass die Box zwar Breite und Höhe einhält, aber übergroße Inhalte ohne weitere Formatierung überfließen.

Ohne jegliche Formatierung durch Stylesheet-Eigenschaften wie width oder height nehmen Inhalte immer den vollen Raum ein, den sie für die vollständige Darstellung brauchen.

CSS sieht alle HTML-Elemente des Dokuments innerhalb des <body>-Tags als rechteckige Boxen, die eine bestimmte Breite und Höhe haben. Die CSS-Eigenschaften width und height setzen die Breite und Höhe eines HTML-Elements fest, sind aber mit Vorsicht anzuwenden:

  • Die Breite eines Elements wird durch die CSS-Eigenschaft width fest begrenzt.
  • Die Höhe eines Elements kann hingegen nur als Anfangswert angesehen werden. Wenn die Inhalte zu groß für das umfassende Element sind, fließen sie weiter, auch wenn die Höhe des Elements als CSS-Eigenschaft height angegeben werden. Das Überfließen kann nur durch CSS overflow verhindert werden, wobei übergroße Inhalte nicht mehr angezeigt werden.

Überfließende Inhalte

Übergroße Inhalte überlagern die auf die Box folgenden Inhalte oder drängen die folgenden Inhalte weiter nach unten im Dokument.

<div style="width: 350px; height: 260px; background: lavender;">
   <img src="…" width="400" height="175" alt="0001280.gif" />
   <p> …  </p>
</div>

Die CSS-Eigenschaften width und height werden also nur eingehalten, wenn die Inhalte vollständig in das Element passen oder kleiner als der vorgesehene Raum sind.

Weiterführende CSS-Eigenschaften für die Höhe und Breite von HTML-Elementen

  • clip beschneidet Elemente, die zu groß für den umfassenden Block sind, auf die Maße des Blocks.
  • overflow begrenzt ebenfalls die Höhe oder Breite eines Elements und bietet den Einsatz von Scrollbalken, um dem Benutzer den vollständigen Inhalt eines Elements sichtbar zu machen.
  • table-layout begrenzt die Breite von Tabellenzellen mit überlangen Inhalten.
  • min-height und max-height begrenzen die Höhe beliebiger Elemente
  • min-width und max-width begrenzen die Breite beliebiger Elemente.

height

IE4+ M1 N6 O5 S1 CSS1 erblich: nein

height
Höhe eines Elements. Wenn die Höhe eines Bildes auf einen Wert gesetzt ist und die Breite als auto angegeben wird, wird das Bild proportional skaliert (das Seitenverhältnis bleibt erhalten).
Werte
<length> | <percentage> | auto | inherit
<length>
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
<percentage> (Prozentsatz)
basiert auf der Höhe des umfassenden Blocks, die als 100% definiert ist. Wenn die Höhe des umfassenden Blocks nicht expliziet notiert ist und der umfassende Block nicht absolut positioniert ist, wird der Wert wie "auto" interpretiert. Eine Prozentangabe für das Wurzelelement wird relativ zum Viewport interpretiert.
auto
ist die Voreinstellung und weist den Browser an, die Höhe automatisch zu berechnen. Wenn sowohl Höhe als auch Breite auf auto gesetzt werden, bleiben die Dimensionen des Text- oder Bildelements unverändert. Durch die Angabe von auto wird auch sichergestellt, dass keine vorangegangenen Deklarationen die Höhe des Elements beeinflussen.

zurück zum Seitenanfang

width

IE4+ M1 N6 O5+ S1 CSS1 Erblich: Nein

width
Breite eines Elements. Wird die Breite eines Elements angegeben und die Höhe durch auto spezifiziert, wird das Element proportional skaliert (das Seitenverhältnis bleibt erhalten).
Werte
<length> | <percentage> | auto | inherit
<length>
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).
<percentage> (Prozentsatz)
basiert aufBreite des umfassenden Blocks, die als 100% definiert ist.
auto
ist die Voreinstellung und weist den Browser an, die Breite automatisch zu berechnen. Wenn sowohl Breite als auch Höhe auf auto gesetzt sind, bleiben die Abmessungen eines Textes oder Bildes unverändert. Durch die Deklaration von auto kann sichergestellt werden, dass keine vorangegangenen Deklarationen die Breite des Elements beeinflussen.

zurück zum Seitenanfang

   

Galileo Design
Galileo Design – Spitzentitel für digitale Fotografie, Webdesign, Flash und Bildbearbeitung.

Copyright © 2000 - 2010 Media Engineering Alle Rechte vorbehalten
Design + Programmierung Media Engineering Ulrike Häßler 50226 Frechen-Königsdorf • Impressum und Nutzungsbestimmungen