• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Hintergrundbild im Div soll nicht mitscrollen

S

Stiesel

New member
Hallo,
ich hoffe das mir hier einer helfen kann.
Ich habe meine Homepage in verschiedene div-Container gepackt.
Einer für die Überschrift (id=Zwinger), einer für die Navigation (id=navi), und neben diesen einen für den Text (id=text).
Alle drei sind nochmal extra in einem Container (id=haupt).
Bei allen dreien habe ich Hintergrundbilder. Die Container mit Überschrift und Navigation sind kein Problem, da in diesen Div's nicht gescrollt wird.
Aber wie bekomme ich es hin, dass der IE im Text-Container das Hintergrundbild auch nicht mitscrollt. Beim Firefox bleibt es stehen, aber beim IE scrollt es.
Wenn ich in der css-Datei background-attachment: fixed; eingebe, orientiert sich das Bild ja in der Position am Viewpoint, und nicht mehr am DIV.
Hat jemand von Euch eine Lösung?
Wäre sehr dankbar.
Hier mal der Code meiner Seite
Code: 
   <div id="haupt" style="margin: auto;" >

    <div id="zwinger">
    </div>

    <div id="navi" >
    </div>

    <div id="text">
     <p class="text">
     </p>
    </div>

   </div>

und hier das css für den text-container
Code: 
div#text
{
background-image:url(HGText.png);
background-position:top left;
background-repeat:no-repeat;
width:660px;
height:500px;
overflow:auto;
margin: 0;
}

ich hoffe einer kann mir helfen. Danke
 
miniA4kuser schrieb:
Welcher IE?
Zum Vergrößern anklicken....

IE für InternetExplorer

wie gesagt, beim Firefox ist alles so wie ich es will, aber beim InternetExplorer scrollt das Hintergrundbild dann mit dem Text mit.

Habe nun erstmal das Hintergrundbild auf meinen umschließenden Container gesetzt...es ist da halt nur etwas größer, und so die Ladezeit etwas länger...aber es sieht zumindest so aus, wie ich es haben möchte...
 
miniA4kuser schrieb:
Scherzkeks...

InternetExplorer (IE) Version 5.5 oder InternetExplorer (IE) Version 6 oder InternetExplorer (IE) Version 7 oder InternetExplorer (IE) Version 8 oder InternetExplorer (IE) Version 9 oder InternetExplorer (IE) Version 10 war Ziel meiner Frage.
Zum Vergrößern anklicken....

Sorry, habe ich falsch verstanden...Ich habe Version 9.
 
Dann bist du wahrscheinlich im Quirksmode, da ich das Problem nur da reproduzieren kann -> gib' deiner Seite eine gescheite DocType - hilft auf bei anderen Problemen.

PS: im IE7 geht's auch nicht mit einer gescheiten DocType.
 
kkapsner schrieb:
Dann bist du wahrscheinlich im Quirksmode, da ich das Problem nur da reproduzieren kann -> gib' deiner Seite eine gescheite DocType - hilft auf bei anderen Problemen.

PS: im IE7 geht's auch nicht mit einer gescheiten DocType.
Zum Vergrößern anklicken....

Ja stimmt, DocType habe ich keinen stehen, da mir jemand mal geraten hat, ich solle diesen rausnehmen, um Tabellen auf 100% Höhe zu bekommen.
Da werd ich wohl grundlegend nochmal was ändern müssen.

Danke für die Hilfe :)
 
kkapsner schrieb:
Dieser "jemand" scheint nicht viel Ahnung zu haben...
Zum Vergrößern anklicken....

aber so hatte dann zumeindest mein Layout so funktioniert, wie ich es haben wollte.

Ich weiß, dass es blödsinn ist, einen Div in eine Tabelle reinzusetzen, aber wenn ich das Div durch Positionsangaben mittig ins Browserfenster gesetzt hatte, hat irgendwie mein Text-Layout nicht mehr gestimmt.
Wie oben zu sehen, habe ich im Text-Div noch die Klassiefizierung von p, das schaut folgendermaßen aus:
Code: 
p.text
{
font-family:Times New Roman;
font-size:18px;
color:#808080;
font-weight:bold;
font-style:italic;
text-align:left;
margin: 20 145 5 20;
}
damit erreiche ich, dass der Text nicht in den Rahmen des Hintergrundbildes läuft, aber die Scrolleiste des Divs am Ende des Divs steht.

Als ich aber das DIV durch die Positionsangaben mittig gesetzt hatte, scheint der Browser irgendwie die margin-Zahlen überlesen zu haben, denn der Text ging über die gesamte Breite des Div's.

Deswegen hat mir jemand den Rat gegeben, wenn auch Blödsinn, das ich das umschließende DIV mittig in eine Tabelle lege...und plötzlich hat es funktioniert. Um die Tabelle aber auf 100% der Bildschirmgröße zu bekommen, musste ich das DocType entfernen...


kann sein, dass er nicht viel Ahnung hat, aber scheinbar mehr als ich...
 
... bei der margin-Angabe fehlen die Einheiten... auch das funktioniert nur im Quirksmode...

Aber um ehrlich zu sein: ich verstehe dein Layoutproblem noch nicht so wirklich...
 
kkapsner schrieb:
Aber um ehrlich zu sein: ich verstehe dein Layoutproblem noch nicht so wirklich...
Zum Vergrößern anklicken....

Macht nichts, du hast mir trotzdem so sehr geholfen, dass es nun endlich funktioniert, mit ich glaube sogar gutem HTML :)
Aber nochmal zur Erläuterung. Ich habe ein umschließenden Container mittig im Browserfenster. In diesem Container sind grei weitere, oben für die Überschrift, und darunter zwei einmal für die Navigation, und einmal für den Textinhalt. Das ganze umrahmt ein Hintergrundbild als Rahmen. Damit der Text nicht in Konflikt mit dem Hintergrundbild gerät, habe ich ihn mit etwas Abstand zum Div-Rahmen gesetzt.
Ich habe gerade viel gelernt...DANKE :cool:

Im css siehts nun so aus:
Code: 
div#haupt
{
background-image:url(HG.jpg);
background-position:top left;
background-repeat:no-repeat;
position: absolute;
left: 50%;
top: 50%;
margin-top: -340px;
margin-left: -475px;
width:950px;
height:680px;
overflow:hidden;
padding:0;
}
div#zwinger
{
background-image:url(HGZwinger.png);
background-position: center;
background-repeat:no-repeat;
width:900px;
height:80px;
overflow:hidden;
margin:0px;
padding:0;
}
div#navi
{
width:250px;
height:505px;
overflow:hidden;
float:left;
margin:0px;
padding:0;
text-align: left;
}
div#text
{
width:670px;
height:500px;
overflow:auto;
margin: 0;
padding: 0;
text-align: center;
}
p.text
{
font-family:Times New Roman;
font-size:18px;
color:#808080;
font-weight:bold;
font-style:italic;
text-align:left;
margin: 20px 145px 5px 20px;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben