esse est percipi
Das Weblog eines Grafikdesigners. Seit 2003.

esse est percipi

Einfach gute Mac-Apps.

Von einem unabhängigen Entwickler, der sie täglich selbst nutzt.

Blog Apps

Impressum/Datenschutz/AGB

Webdesign | Dienstag, 10. Februar 2009

„Unsere Website springt, bitte reparieren.“ (Update)

Ich habe immer wieder Kunden, die mit diesem Satz zu mir kommen – mitunter höre ich ihn von der selben Agentur sogar mehrfach, wenn mal ein Mitarbeiter gewechselt hat.

Das Problem:

Beim Navigieren zwischen verschiedenen Unterseiten einer Website „springen“ Header, Menüs, Footer usw. manchmal horizontal hin und her.

Die Erklärung:

Navigiert man von einer Seite, die von der Höhe her komplett in das Browserfenster passt, zu einer Seite, die nicht ins Fenster passt, erscheint notgedrungen rechts außen ein Scrollbalken – irgendwie muss man ja an die verborgenen Inhalte gelangen. Da sich durch den zusätzlichen Scrollbalken die Gesamtbreite des Fensters aber nicht verändert, wird der Bereich des Fensters, der für den Inhalt zur Verfügung steht, zwangsläufig um die Breite des Scrollbalkens, der innerhalb des Fensters erschienen ist, schmaler.

Handelt es sich nun um eine zentrierte Seite, rutscht der gesamte Inhalt einschließlich Header, Footer usw. automatisch (und mathematisch korrekt) um die Hälfte der Breite des Scrollbalkens nach links – was sich leider nicht vermeiden lässt.

Interessanterweise sieht man dieses Verhalten beim Internet Explorer nicht. Dort ist der Scrollbalken nämlich – sozusagen prophylaktisch – immer vorhanden, auch wenn er gar nicht benötigt wird.

Update

Mittels der CSS3-Eigenschaft overflow-y gibt es zum ersten Mal die Möglichkeit, einen ständigen Scrollbalken zu erzwingen, der, wenn er nicht benötigt wird, inaktiv dargestellt wird; siehe auch Kommentare. Beispiel: Digimage

Kommentare:

Bei den Kommentaren handelt es sich um fremde Inhalte, die sich „esse est percipi“ nicht zueigen macht. Verantwortlich für den Inhalt eines Kommentars ist der jeweilige Verfasser.

Paul Dienstag, 10. Februar 2009, 20:58 Uhr

Dafür gibts doch overflow-y:scroll; :) Ist zwar offiziell eine CSS3-Eigenschaft, wird aber bereits von allen großen Browsern unterstützt.
Wirkung: Der übergroße Inhalt wird abgeschnitten. Das übergeordnete Element wird mit Scrollbalken angezeigt, um den Inhalt zu vertical scrollen. Ist der Inhalt nicht zu breit, wird der Scrollbalken ausgegraut angezeigt.
(Quelle)
Funktioniert wunderbar :)

Boris Dienstag, 10. Februar 2009, 23:48 Uhr

Das geht auch ohne CSS3 indem man dem BODY eine Höhe von 100% gibt inkl. eines paddings/margins von 1px … schwupps ist der Scrollbalken immer vorhanden.

Heute Nachmittag ging die Kommentarfunktion hier nicht?

mike Dienstag, 10. Februar 2009, 00:01 Uhr

Weitere, einfachste und unkomplizierteste Lösung des Scrollbalkenproblems mit nebenbei positivem Abfall, ääh, Nebeneffekt, wäre, Seiten am linken Rand auszurichten.
Nebeneffekt dahingehend, dass zentrierte Seiten einfach Scheisse aussehen.

Roman Dienstag, 10. Februar 2009, 00:06 Uhr

Die Lösung liegt doch auf der Hand: Die ganze Website in eine etwa 500 x 360 Pixel große Box stecken, die vertikal und horizontal zentriert wird. Falls bei einigen Seiten der Inhalt mal nicht ganz in die Box passt, hier bitte auch keine Scrollbars verwenden (sieht ja doof aus). Sondern winzige Pfeile einblenden, die bei Mouseover den Inhalt entweder quälend langsam oder viel zu schnell rauf und runter bewegen. ;-)

Paul Mittwoch, 11. Februar 2009, 07:29 Uhr

@Boris: Man lernt nie aus :) Den Trick mit dem 100%-Body und dem margin / padding kannte ich noch nicht.

Michael Preidel Mittwoch, 11. Februar 2009, 09:54 Uhr

@ Boris: Die Kommentarfunktion war in der Tat versehentlich ausgeschaltet.

Vielen Dank für die Tipps. Die verschiedentlichen Maßnahmen, einen Scrollbalken zu erzwingen, sind mir in der Mehrzahl bekannt. Ich persönlich finde es aber potthässlich, wenn ein aktiver Scrollbalken bei einer Seite erscheint, deren Inhalt das Browserfenster in der Höhe noch nicht mal annähernd ausfüllt.

overflow-y kannte ich hingegen noch nicht. Da sich diese Eigenschaft auch auf den body anwenden lässt, wird – im Gegensatz zu den anderen Methoden – mit scroll der Scrollbalken inaktiv dargestellt, wenn der Inhalt ins Fenster passt.

Da der IE auch hier wieder ausschert, muss man per Conditional Comments eine weitere CSS-Datei laden, in der overflow-y auf visible gesetzt wird.

Hier ein Beispiel, wo es in Safari und Firefox perfekt funktioniert: Digimage

Roman Mittwoch, 11. Februar 2009, 12:39 Uhr

Ich bin ja eigentlich kein Freund solcher Tricks, aber wenn der eigentlich überflüssige Scrollbar inaktiv dargestellt wird, finde ich es OK. Wenn dann der Kunde auch schon so fortschrittlich ist und mit Firefox braust, bleibt einem wohl zumindest eine Diskussion erspart.

Udo Springfeld Mittwoch, 11. Februar 2009, 15:43 Uhr

Nun, dem Internet Explorer kann man das Verhalten durchaus abgewöhnen – natürlich Standard-widrig, indem man die Eigenschaft scroll von body auf auto setzt.

Matthias Mittwoch, 11. Februar 2009, 16:49 Uhr

der Vollständigkeit, nur FF:

body {
overflow: -moz-scrollbars-vertical;
}

/have fun ;)

Thomas [aka kopflos] Mittwoch, 11. Februar 2009, 21:28 Uhr

Eine weitere Möglichkeit auch dem IE6 das richtige Verhalten von overflow-y:scroll; beizubringen: die Eigenschaft nicht in den body-Tag, sondern in den html-Tag unterzubringen.