 Scrollbaranzeige erzwingen / unterdrücken
Bei mir im Firefox "springt" die Seite rechts links wenn man sich durch die Navi klickt - z.B. von Home auf
Voraussetzungen. Im IE nicht - woran kann das liegen? Die Seiten sind alle identisch. Wäre für jeden Tipp dankbar.
|
|
Die Seite springt nach rechts oder links
Die Website springt in der Horizontalen um einige Pixel, wenn der Content unterschiedlich groß ist. Dabei hat der Webmaster eigentlich keinen Fehler gemacht. Trotzdem ist diese Erscheinung nicht schön und wird besonders bei zentrierten Seiten als störend empfunden.
www.gipfelhunde.de 
Ursache:
Die Seiten sind identisch breit. Allerdings nicht identisch lang. Daher entsteht mal die Notwendgkeit einen Scrollbar rechts anzuzeigen, mal nicht. Ein Scrollbar benötigt ca. 20 Pixel Beite. Der Sprung der (in der Bildschirmmitte zentrierten) Seite um etwa 10 Pixel ist darin begründet.
Während er IE den Platz für einen eventuellen Scrollbar reserviert gibt der FF diesen Platz frei. Folglich stehen horizontal manchmal 20 Pixel mehr zur Verfügung, machmal auch nicht.
Lösung:
Ich sorge dafür, das ein (vertikaler) Scrollbar rechts immer angezeigt wird oder zumindest der benötigte Platz immer reserviert wird. Das soll unabhängig davon geschehen, ob der Seiteninhalt nun wiklich länger als die Bildschimhöhe ist.
Dazu gibt es elegante Lösungen und auch kleine 'Tricks'
1a Scrollbar mit CSS erzwingen
overflow
body {
background-color:#000000;
margin:0px;
padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
overflow:scroll;
}
1b Scrollbar rechts mit CSS erzwingen
overflow-x (horizontaler Überlauf), overflow-y (vertikaler Überlauf)
body {
background-color:#000000;
margin:0px;
padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
overflow-y:scroll;
}
kurze Übersicht:
Overflow ist (normalerweise) eine Angabe für den Bereich eines Elements. Es wird festgelegt wie der Browser verfahren soll, wenn auf Grund des zur Verfügung stehenden Platzes Inhalt nicht mehr angezeigt werden kann. Da wo es 'überläuft' :-) .
Diese Angabe kann für alle Blockelemente notiert werden, also auch für die gesamte Seite.
| Selektor |
Eigenschaft |
Wert |
Ergebnis |
| body, p, span, ... |
overflow: |
visible; |
Der übergroße Inhalt wird angezeigt
Das Element wird in der Größe nicht verändert |
| |
overflow: |
hidden; |
Der übergroße Inhalt wird abgeschnitten
Der Inhalt wird nicht angezeigt |
| |
overflow: |
scroll; |
Der übergroße Inhalt wird abgeschnitten
Ein Scrollbalken wird angezeigt
|
| |
overflow: |
auto; |
Browserabhängig
normlerweise identisch mit 'scroll' |
| |
overflow-x: |
|
Angaben für horizontalen Überlauf
|
| |
overflow-y: |
|
Angaben für vertikalen Überlauf |
(overflow-x offiziell erst in CSS3, wird aber von einigen älteren Browsern bereits unterstützt)
2 Seitenhöhe größer als 100% mit CSS erzwingen
html {
...
height:101%;
}
body {
...
height:101%;
}
Höhe für beide Selektoren (html, body) festlegen, damit das in allen Browsern funktioniert. Hier ist die Seitenhöhe immer größer als 100%.
oder
html {
min-height: 100%;
margin-bottom: 1px;
}
Hier wird die 100% Höhe der Seite unten um 1 Pixel 'verlängert'.
3 Seitenhöhe mit CSS vergrößern
Unterhalb des eigentlichen Inhalts füge ich ein Seitenelemt ein, dessen Höhe ich mit CSS festlege. Hier habe ich die Höhe mit 400 Pixel definiert. Die Seite wird um 400 Pixel länger.
<div style="height:400px;"> </div>
4 Seitenhöhe mit Grafik vergrößern
Unterhalb des eigentlichen Inhalts füge ich eine (unsichtbare) Grafik ein. Hier habe ich die Höhe mit 400 Pixel definiert. Die Seite wird um 400 Pixel länger. Wichtig: Die <br> nicht vergessen!
<br>
<img src="transpixel.gif" width="1" height="400" border="0" alt=""><br>
Diese Lösung ist immer noch besser, als 50 Zeilenumbrüche (<br>) einzufügen, was man sehr häufig beobachtet.
 Scrollbars mit CSS formatieren - farbige Scrollbars
Tabellen mit Scrollbars
Warum sehe ich Scrollbars?
Fenster- und Framegrößen richtig berechnen
|
Home • Fehlersuche • Scrollbar