Grafik soll nicht scrollbar werden

Deca

Lt. Junior Grade
Registriert
Juni 2007
Beiträge
507
Hi,

ich such nun schon ne ganze Weile und leider kann ich nichts finden.
Folgendes Problem: Auf meiner Webseite habe ich ein Div mit einer Hintergrundgrafik eingefügt, die meine gesamte Webseite umrandet.

Mein Problem ist, dass das im Browserfenster horizontale & vertikale Scrollbalken erscheinen, sobald ich das Browserfenster verkleinere (sodas die Hintergrundgrafik nichtmehr sichtbar ist).

Hab hier auch ein Beispiel:
Wenn man auf quakelive.com/ geht, sieht man auch
diese Hintergrundgrafik.
Wenn man das Browserfenster verkleinert, so das ein Teil von der Hintergrundgrafik verschwindet, erscheinen keine Scrollbalken.
Erst wenn das Fenster so klein gemacht wird, das es den Content verdeckt, kommen die Scrollbalken zum vorschein.

Quasi genauso möchte ich das es auch auf meiner Webseite funktioniert.
Hab schon alles ausprobiert mit <div scrolling="none" /> und auch die ganzen css befehle position etc. brauchen nicht den gewünschten erfolg.

Kennt jemand den befehl um die auto scrollbalken bei meiner Hintergrundgrafik bzw. div tag auszuschalten?

Gruß
Deca
 
Danke für die raschen Antworten

Den Div in der css mit position: fixed; anzusprechen funktioniert leider nur teilweise.
Denn so setzt er anscheinend alle div tags die innerhalb des äusseren sind auch fixed.
Das heißt User mit niedriger Auflösung können nicht im Content scrollen.

Hab das Projekt mal hochgeladen.
 
ok ich glaub ich seh den fehler! du hast einen bobycontainer erschaffen, und hast dort eine feste breite eingetragen, entweder, du schreibst die breite aus dem bobycontainer in 100% um oder du steckt die infos aus dem bodycontainer in body direkt und lässt die breite komplett weg

body {
background: #333 url('../img/bodycontainer.jpg') no-repeat;
}

die fehler wie du sie nennst kommen auch nur im ie vor ;) firefox lässt alle scrollbalken weg, solltest auch ein wenig drauf achten, dass es in jedem browser gleich oder wenigstens fast gleich ausschaut
 
Zuletzt bearbeitet:
Hm, also irgendwie funktioniert das aber nicht, mit dem Tipp.
Oder ich hab da was falsch verstanden.

Wenn ich dem Body die Größenangabe gebe, erscheinen im Browser zwar keine Scrollbalken - aber leider auch,
wenn das Fenster so klein ist, das Teile vom Content verdeckt sind.
Vielleicht kann ich mit dem CSS Befehl "overflow" etwas erreichen.

Das Problem ist, bei 3 Div Tags und verschiedenen Möglichkeiten von "position" und "overflow" verliert man recht schnell den Überblick.

Hab das Projekt nochmal aktualisiert: Klick

Vielleicht kennt ja jemand das Problem und weiss genau welcher Div Tag welche Einstellung bekommt,
damit alles automatisch gescrollt wird, ausser dem Hintergrundbild im Div "Bodycontainer".

Hier nochmal die CSS Einstellungen von den 3 Div Tags:

body {
background-color: #333;
margin: 0 auto;
height: 890px;
width: 1260px;
}

#bodycontainer {
background-image: url(../img/bodycontainer.jpg);
background-repeat: no-repeat;
margin: 0 auto;
height: 890px;
width: 1260px;
}

#container {
margin: 0 auto;
width: 980px;
height: 814px;
text-align: left;
}
 
Zuletzt bearbeitet: (update)
Hi,

folgendes kannst du probieren:

body {
background-color:#333, none repeat scroll 0 0
margin:0;
padding:0;
}

body#bodycontainer {
background-image:url(../img/bodycontainer.jpg);
background-attachment:fixed;
background-color:#333;
background-position:center top;
}
 
Hey super, jetzt scrollt das Fenster so wie ich es haben wollte.
Leider wird die Hintergrundgrafik unten weiss abgeschnitten. Bin grade am rumprobieren, wie ich das löse.



Aber Danke schonmal für die Lösung :)
 
Zuletzt bearbeitet:
Hab ich schon, dass sind ja die standart tools für jeden webdesigner ^^

naja ich habs jetzt ein bisschen hinbekommen, werd mich die tage nochmal richtig dransetzen, aber das grundproblem ist gelöst und da bin ich auch ganz froh drüber.
 
Zurück
Oben