css DIV-Problem

[Spacefish]

moin, ich hab da n kleenes problemchen:

ich habe eine website und in der mitte einen div-container. sobald ich den browser verkleiner oder vergrößer, verschiebt sich der div container in der mitte mit.

hier der css code:

#page_margins {
  color: #505050;
  [B]margin: 0 auto;[/B]
  padding: 0;
  width: 791px;
  min-width:791px;
  background: #F0F0F0 url(images/bg.jpg)repeat-y center ;
  margin-top:20px; 
}

sobald ich margin: 0 auto; entferne, verschiebt sich der hintergrund zwar nicht mehr, aber das div ist nicht mehr zentriert bzw im center sondern links...
ist es irgendwie möglich dass ich den div container in der mitte fixiere also ohne jegliches verschieben etc. falls JA: WIE? :!::?: ;ugl

thx, schönen abend noch ;-)
gruß sF.

 

[prm]

So wie du's gemacht hast, ist es vom Prinzip her richtig.
Dein Container ist immer in der Mitte. Problematisch wird es nur dann, wenn das Fenster kleiner als 791px ist, da dann der Inhalt nicht rein passt und man srollen muss. Aber auch das ist normal.
Wenn in diesem Fall ein Teil nicht sichtbar ist, dann hat es lediglich den Anschein, als wäre die Hintergrundgrafik nicht in der Mitte.
Ich kenne die Größe dieser Grafik nicht. Kannst du evtl. auf die Positionsangabe "center" verzichten? Alternativ, falls die Grafik keine 791px breit sein sollte: Erweitere sie auf 791px indem du links und rechts einen transparenten oder Hintergrundfarbigen "Abstand" einfügst.

Vielleicht liegt dein Problem aber daran, dass die Schreibweise nicht ganz korrekt ist:

bisher:

background: #F0F0F0 url(images/bg.jpg)repeat-y center ;

Richtig:

background: #F0F0F0 url(images/bg.jpg) repeat-y center;

Vor repeat muss ein Leerzeichen und das Leerzeichen vor dem Semikolon muss entfernt werden.

 

[Spacefish]

ne das funktioniert nicht. das problem ist, wenn ich den browser vergrößere oder verkleinere also einfach zusammenschiebe um ihn zu verkleinern oder am rand auseinanderziehe um ihn zu vergrößern, dann fährt das div fenster automatinsch mit. man könnte sagen es zentriert sich in jeder größe automatisch mit und das hintergrundbild bleibt - verschiebt also sich nicht. ich möchte gerne dass die div box ganz normal fixiert funktioniert... wie oben genannt habe ich mal versucht margin: 0 auto; zu entfernen, dann funktioniert es soweit dass sich das fenster nicht mehr mit dem browser mitverschiebt aber leider ist das div-fenster dann nicht mehr zentriert...

 

[Efchen]

Am besten, Du postest mal einen Link.
Und bitte kein "Die Seite ist noch nicht online". Dann stell sie online.

 

[ingoS]

Irgendwie ist deine Frage ein Widerspruch in sich:
Einerseits willst du den div-Container zentriert haben, andererseits soll er sich nicht verschieben, wenn man das Fenster verkleinert -- dann ist er doch aber nicht mehr zentriert, wenn er sich nicht verschiebt, sondern bleibt an der Stelle, an der er vorher zentriert war! Bei weiterer Verkleinerung des Fensters verschwindet er dann irgendwann aus dem Bildschirmbereich -- wozu soll das gut sein? :shock:
Willst du vielleicht eher, dass sich der Hintergrund mit dem div-Container mit zentriert statt den div-Container zu fixieren?

 

[Efchen]

Es hört sich an, als würde der Container beim Verschieben seine Position in Relation zum Hintergrund verschieben. Er will wahrscheinlich, dass der Hintergrund sich mit dem Container verschiebt. Aber wenn der Hintergrund dem (richtigen) Container zugeordnet ist, dann sollte das doch auch so sein.

Deswegen hätte ich für meinen Teil gerne den Link, um das Phänomen sehen zu können und um zu sehen, was im Code steht, denn der Auszug oben sagt alleine ja rein gar nichts aus.

 

[prm]

Der Code für sich allein ist für mich bis auf die beiden Leerzeichenfehler in Ordnung. Damit kann eigentlich auch nichts schief gehen.
Der Hintergrund ist dem Div zugeordnet und müsste sich mit diesem bei unterschiedlicher Fenstergröße auch "verschieben".

Der Gesamtzusammenhang wäre aber dennoch wichtig. Deshalb am besten einen Link zur Seite posten.

 

[ky_fr34k]

dann positioniere des div absolut, so dass es immer genau für das hintergrundbild zentriert ist

#<divname>
{
  position: absolute;
  left: <Bildbreite/2 - divbreite/2>px;
}

Gruß KY

 

[Efchen]

Du hast ein Hintergrundbild, das sehr groß ist. Wenn das Browserfenster kleiner wird, als das Hintergrundbild, klebt dieses am linken Rand des Fensters. Das Hintergrundbild ist aber eben nicht mit dem Content verbunden und der Content wird immer im Fenster zentriert, was dann dazu führt, dass der Content in den Bereich des Hintergrundbildes rutscht, wo er nicht hin soll.

Gib den Link raus, jemand anders kann DIr sicher mehr helfen. Ich hab hier keinen Firebug, und der Code ist mir zu unübersichtlich ohne Firebug.
Außerdem versteht man das Problem erst, wenn man es am Bildschirm sieht!

Das wichtigste ist, dass das Hintergrundbild und der Content zu einem Element gehören, damit sie zusammen zentriert werden. So kann das nicht gehen.

Gruß,
-Efchen