GrÖße berechnen
    
 Home • Fehlersuche • Fenstergröße berechnen   drucken  Seite drucken

 Window- / Fenstergröße richtig berechnen

Bei fixen Breitenangaben für Seitenelelemente haben mehrere Faktoren einen Einfluss auf die in Wirklichkeit benötigte Breite. Mehrere, manchmal vernachlässigte Werte addieren sich zur Breite der Inhalte und führen zu einem unerwünschten Scrollbar.

Wieviel Platz steht zur Verfügung?

Sie möchten z.B. eine Grafik entwerfen, die genau in den Seite passt? Da wird es notwendig sich über Darstellungbreiten innerhalb des Windows / Frames Gedanken zu machen.

Der zu Verfügung stehende Platz im aktuellen Fenster ist abhängig von
  • der Bildschirmauflösung
  • der Windowgröße
  • der Framegröße
  • der Darstellung der Menü- und Symbolleisten
  • dem Browser
  • eingeschalteten Scrollbars
  • Frame / Frameset: Ränder, Margins, Framespacing
  • HTML-Dokument: Ränder und Margins
  • Rändern, Margin, Padding (und Cellspaceing in Tabellen)


1  Breite

  Die Breite berechnen (Beispiel)

OK, die Inhalte sollen maßgeschneidert sein ...

Entscheiden Sie sich für eine maximale Darstellungsbreite Ihrer Seite. Als Beispiel nehme ich hier die Bildschirmauflösung 800 x 600 Pixel. Das bedeutet Ihnen stehen 800 Bildpunkte für die Breite zur Verfügung ... ist die irrige Annahme !!

800 Pixel

Subtrahieren Sie zunächst einen möglichen Scrollbar (Bildlaufleiste)
Da bleiben ihnen noch: 800 - 20 = 780 Pixel.

780 Pixel

Sie berücksichtigen, dass der Browser das Browserfenster mit einem (z.B.) 2 Pixel breiten Rand anzeigt.
Da bleiben ihnen noch: 780 - 4 = 776 (browserabhängig)

776 Pixel

Sie stellen den Rand für Ihre Grafik auf ' 1 ' (border="1") .
Da bleiben ihnen noch: 776 - 2 = 774

774 Pixel

Sie unterlassen es für den BODY Margins auf ' 0 ' einzustellen.
Da bleiben ihnen noch: (774 - ? = 774 -? (browserabhängig)

(774 - ?) Pixel

Sie stellen Ihre Grafik innerhalb einer Tabelle dar und stellen den Rand der Tabelle nicht auf ' 0 ' ein (border="0").
Da bleiben ihnen noch: (774 - ?? = 774 -?? (browserabhängig)

(774 - ??) Pixel

Ihre Grafik steht innerhalb einer Tabelle aber Attribute für cellpadding und cellspacing werden nicht eingetragen. (Default-Wert wird eingestellt)
Da bleiben ihnen noch: (774 - ??? = 774 -??? (browserabhängig)

(774 - ???) Pixel

Sie haben es unterlassen für das HTML-Dokument Einstellungen für Padding festzulegen. (Default-Wert wird eingestellt)
Da bleiben ihnen noch: (774 - ???? = 774 -???? (browserabhängig)

(774 - ????) Pixel

Es bleibt bei: 774 - ???? Pixel


Die 4 nicht zahlenmäßig eingetragenen Zufallsgrößen können Ihr Layout ganz schön durcheinander schütteln!


Überlassen Sie nichts dem Zufall. Margins und Ränder immer festlegen, Attribute zu den HTML-Tags immer eintragen.



Querverweis Ränder und Margins (Menü FRAMES)


2  Höhe

  Die Höhe berechnen ?

Die Fensterhöhe kann auch für eine bestimmte Bildschrimauflösung nicht vorab errechnet werden. Das geht erst bei der Anzeige der Seite auf dem Rechner des Seitenbesuchers vor Ort durch ein Java-Script.

Menü- und Symbolleisten, Statuszeile

Der im Browserfenster oder Framebereich zur Verfügung stehende Platz ist nicht nur von den Bildschirmeinstellungen (800x600, 1024x768) oder von der Framegröße abhängig! Die vom Benutzer gewählte Darstellung der Browser-Bedienleisten schänken die Fensterhöhe (unterschiedlich) ein.

margin, padding, frameborder, framespacing, marginwidth, marginheight

Aber auch der Webmaster hat Einfluss auf einige Größen, wenn es nicht dem Browser überlassen wird wie groß Innen- und Außenabstände der Frames / des Framesets oder Margin und Padding für die Seite eingestellt wurden.



Hier die aktuellen Werte für dieses Browserfenster / Ihre Bildschirmeinstellungen:





Die Werte 1) bis 4) zeigen den zu Verfügung stehenden Platz im aktuellen Browserfenster beziehungsweise im aktuellen Frame. Die Werte können variieren abhängig von
  • der Bildschirmauflösung
  • der Windowgröße
  • der Framegröße
  • der Darstellung der Menü- und Symbolleisten
  • dem Browser (IE sieht grundsätzlich einen Scrollbar vor)
  • Frameset: frameborder, framespacing, marginwidth, marginheight
  • HTML-Dokument: margin, padding


Wenn Sie also von Fall zu Fall horizontale oder vertikale Bildlaufleisten (Scrollbars) vermeiden möchten, müssen Sie sich etwas einfallen lassen!








Scrollbars mit CSS formatieren - farbige Scrollbars

Tabellen mit Scrollbars

Warum sehe ich Scrollbars?

meine Seite springt - Scrollbars erzwingen

Grafik strecken fensterfüllend anzeigen