Website soll sich mit Scrollbar nicht verschieben

[Konfusion]

Hi,

gut möglich, dass das gar nicht geht, aber ich probiers trotzdem:

Kann man es einrichten, dass sich die Website nicht nach links verschiebt, sobald die Scrollbar auftaucht?
Das Problem dabei ist, dass die Website zur Zentrierung absolut positioniert wurde.

body {
  background-image: url(../images/hintergrund.gif);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

#container_wrap {
  position: absolute;
  top: 25px;
  left: 50%;
  width: 1014px;
  margin-left: -507px;
}

#container {
  background-image: url(../images/bereich_mitte.jpg);
  background-repeat: repeat-y;
}

Unter http://www.trachten-huber.de kann man sich das mal ansehen. Klickt man z.B. auf "Das Geschäft", erscheint die Scrollbar und ales hüpft ein Stückchen nach links - ich denke, ihr wisst was ich meine.

In html, body {margin:0; padding:0; width:100%;} kann ich ändern, was ich will, da ändert sich nichts wegen der absoluten Positionierung.

Danke für Eure Anregungen!

Grüße, Konfusion

[henman]

hallo,

#container_wrap {
  position: absolute;
  top: 25px;
  left: 50%;
  width: 1014px;
  margin-left: -507px;
}

[...]

bei absoluter Positionierung dürfte ein margin eigentlich recht wenig nützen

Unter http://www.trachten-huber.de kann man sich das mal ansehen. Klickt man z.B. auf "Das Geschäft", erscheint die Scrollbar und ales hüpft ein Stückchen nach links - ich denke, ihr wisst was ich meine.

joar, alles verschiebt sich unabwendbar nach links, wenn man den Browser verkleinert.

In html, body {margin:0; padding:0; width:100%;} kann ich ändern, was ich will, da ändert sich nichts wegen der absoluten Positionierung.

lass sie weg. es gibt bessere Wege zum Zentrieren, ohne position

Danke für Eure Anregungen!

hoffe etwas geholfen zu haben :)

Grüße, Konfusion

zurück

[Konfusion]

Servus,

In html, body {margin:0; padding:0; width:100%;} kann ich ändern, was ich will, da ändert sich nichts wegen der absoluten Positionierung.

lass sie weg. es gibt bessere Wege zum Zentrieren, ohne position

Habe ich jetzt weggelassen. Ohne position sieht's jetzt so aus:

#container_wrap {
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  width: 1014px;
}

Ich hatte gehofft, dass body {padding-right:10px;} mein Problem beheben kann, aber die Verschiebung bei Inhalten mit Scrollbalken sind immer noch da.

Noch ne Idee?

Servus

[henman]

Ich hatte gehofft, dass body {padding-right:10px;} mein Problem beheben kann, aber die Verschiebung bei Inhalten mit Scrollbalken sind immer noch da.

also bei mir ist die Verschiebung nach links jetzt nicht mehr. Getestet im FF 3.0.10, IE 6 und Opera 9.64.

Der Footer bzw. die Abtrennung von Inhalt und Hintergrund unten wird im IE 6 fehlerhaft angezeigt.

[Detlef G.]

Hallo Konfusion

Habe ich jetzt weggelassen. Ohne position sieht's jetzt so aus:

#container_wrap {
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  width: 1014px;
}

Das geht auch kürzer:

#container_wrap {  
  margin: 25px auto 0 auto;  
  width: 1014px;  
}

Für etwas zu viel halte ich width: 1014px. Ich denke, es wird noch sehr viele geben, die genau wie ich eine Bildschirmauflösung von 1024 x 768 Pixeln verwenden. Dann ist die Seite bei maximiertem Browserfenster meist ein klein wenig zu breit, so dass wegen ein waagerechter Scrollbalken angezeigt wird.

Noch ne Idee?

Wenn der größte Teil der Seiten so hoch ist, dass ein senkrechter Scrollbalken erforderlich ist, dann könntest du diesen für die kleineren Seiten erzwingen (body {min-height:…})

Auf Wiederlesen
Detlef

[Konfusion]

Sodala,

es geht auch noch kürzer:

#container_wrap {
  margin: 25px auto 0;
  width: 980px;
}

Jetzt passt auch alles bei 1024x768 rein. Da hatte ich mir zum Glück noch Spielraum gelassen. Ich ahnte schon, dass das eng werden könnte.

Danke henman für den Tip mit dem Footer unten, hatte ich gar nicht gesehen. Das passt jetzt auch.

Das mit dem Scrollbalken-Gehüpfe lass ich jetzt einfach so, das überlebt man glaub ich schon ;-)

Grüße an alle, die an so nem Tag vor dem Rechner sitzen ;-)

Tschau

http://www.trachten-huber.de

[Detlef G.]

Hallo Konfusion

Jetzt passt auch alles bei 1024x768 rein. Da hatte ich mir zum Glück noch Spielraum gelassen. Ich ahnte schon, dass das eng werden könnte.

Zuerst wollte ich schreiben, dass du bereich_oben.jpg und bereich_unten.jpg noch anpassen musst, dann stellte ich aber fest, dass es nur an meinem Browsercache lag.

Trotzdem noch ein paar Anmerkungen:

<div id="bereich_oben"><img src="/templates/huber/images/bereich_oben.jpg" /></div>
Warum ist die Grafik in einem extra <div>-Element?

<img src="/templates/huber/images/bereich_unten.jpg" />  

Gilt für beide: Warum kein alt-Attribut?
Ein alt-Attribut ist zwingen vorgeschrieben. Wenn es sich nur um Dekografiken handelt, dann wird ein leeres alt-Attribut verwendet (alt="").

Besser ist es allerdings, alle Dekografiken als Hintergrundbilder ins CSS zu verbannen. Meist finden sich dafür passende Elemente. (Bei dir könnte #container_wrap eines der beiden bekommen.)
Wenn beim besten Willen keine gefunden werden, dann kann zur Not ein neutrales Element eingefügt werden.

Das sähe dann z.B. So aus:

<div id="container_wrap">  
	<div id="container" class="clearfix">  
  	<span id="bereich_oben"></span>  
        <!-- Viel Inhalt -->  
        </div>  
</div>  

#container_wrap {  
  background: url(../images/bereich_unten.jpg) no-repeat bottom;  
}  
#bereich_oben {  
  display: block;  
  height: 13px;  
  background: url(../images/bereich_oben.jpg) no-repeat top;  
}  

Brauchst du die unsäglichen MM_XXX-Scripte?
Wozu brauchst du überhaupt die vielen eingebunden Javascripte?
Ist es wirklich sinnvoll, mehrere eher kleine CSS-Dateien einzubinden statt einer größeren?
(Jede CSS-Resource erfordert eine extra Serverkommunikation.)

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

@@Detlef G.:

nuqneH

Ich denke, es wird noch sehr viele geben, die genau wie ich eine Bildschirmauflösung von 1024 x 768 Pixeln verwenden.

Und es wird noch sehr viel mehr geben, die eine andere verwenden.

<leier alter="alt">Überhaupt ist die Bildschirmauflösung irrelevant. Die Auflösung hat nichts mit der Größe des Anzeigebereichs im Browser (Viewport) zu tun. Manche Nutzer haben den Browser nicht im Vollbildmodus, manche haben Sidebars ...</leier>

„Es existiert kein Weg, "für" etwas zu optimieren, sondern nur gegen alles andere.“ [Cheatah]

Qapla'

[Detlef G.]

Hallo Gunnar

Und es wird noch sehr viel mehr geben, die eine andere verwenden.

Selbstverständlich.

<leier alter="alt">Überhaupt ist die Bildschirmauflösung irrelevant. Die Auflösung hat nichts mit der Größe des Anzeigebereichs im Browser (Viewport) zu tun. Manche Nutzer haben den Browser nicht im Vollbildmodus, manche haben Sidebars ...</leier>

Schreib das all denen, die Layouts mit fester Breite bauen, nicht mir!

Du hättest ja gern versuchen können, Konfusion davon zu überzeugen, die Seite neu in flexiblem Layout aufzubauen.

Wenn schon eine feste Seitenbreite Verwendung findet, dann sollte diese nicht gerade ein paar Pixel zu breit für eine relativ häufig verwendete Viewportbreite sein.

Auf Wiederlesen
Detlef

[ChrisB]

Hi,

#container_wrap {
  position: absolute;
  top: 25px;
  left: 50%;
  width: 1014px;
  margin-left: -507px;
}
[...]

bei absoluter Positionierung dürfte ein margin eigentlich recht wenig nützen

Doch - ungünstiger Weise schon.
Das führt hier dazu, dass Teile des Inhaltes gar nicht mehr erreichbar sein werden, wenn der Viewport zu schmal ist.
Diese Art der Zentrierung ist also alles andere als zu empfehlen.

MfG ChrisB

[ChrisB]

Hi,

Kann man es einrichten, dass sich die Website nicht nach links verschiebt, sobald die Scrollbar auftaucht?

Bitte richte *dich* so ein, dass du zunächst die Suchfunktion benutzt, bevor du fragst - das Thema ist schliesslich ein ziemlich alter Hut. Schon die Suchstichworte "zentrierung scrollbalken" hätten etliches zu Tage gefördert, bspw. </archiv/2009/4/t185776/#m1233285>

MfG ChrisB

[Konfusion]

Hi Chris,

Bitte richte *dich* so ein, dass du zunächst die Suchfunktion benutzt, bevor du fragst - das Thema ist schliesslich ein ziemlich alter Hut. Schon die Suchstichworte "zentrierung scrollbalken" hätten etliches zu Tage gefördert, bspw. </archiv/2009/4/t185776/#m1233285>

Leider nicht wirklich. Ich hab schon gesucht.

Das ist jetzt allerdings mein Ergebnis, mit dem ich soweit zufrieden bin (abgesehen von dem ausgegrauten Balken im FF):

body {
  background-image: url(../images/hintergrund.gif);
  margin: 0;
  padding: 0;
  overflow-y: scroll;
}

* html body {
  overflow: hidden;
}

#container_wrap {
  margin: 25px auto 0;
  width: 980px;
}

Danke ihr alle!

Grüße