Absolute Positionierung: Ein Element erweitert das Fenster, ein anderes Element beeinflusst es nicht. Beide verwenden den gleichen Code: C

Ich habe zwei divs hinzugefügt, um Hintergrundbilder für dekorative Zwecke zu halten - wie von dem Künstler, der mit mir auf einer Website arbeitet, angefordert.Absolute Positionierung: Ein Element erweitert das Fenster, ein anderes Element beeinflusst es nicht. Beide verwenden den gleichen Code: C

Am Anfang funktionierte es sehr gut. Die Bilder sollten auf jeder Seite des Wrapper-DIV angezeigt werden, der den Inhalt der Website enthält - ohne die Seitenbreite zu beeinflussen.

Dann bekam die Organisation, die die Website besitzt, einen anderen Sponsor, dessen Logo ich zu einer Spalte auf der rechten Seite hinzufügen musste. Ich habe eine neue ID für den 5. "Button" erstellt und ein div dafür erstellt. Beim Hochladen bemerkte ich, dass plötzlich eine Bildlaufleiste ohne ersichtlichen Grund unten auf der Seite erschien.

Zuerst vermutete ich, dass der Knopf das Problem war, aber schließlich fand ich heraus, dass das äußerste rechte dekorative Teil die Seitenbreite trotz absoluter Positionierung verbog. Beide Divs verwenden den gleichen Code, nur gespiegelt für links und rechts. Ich habe keine Ahnung, was das Problem verursacht ..

(Sie können das Problem in Aktion sehen, während sie bei www.torucon.no/no/ dauert)

Bitte helfen Sie mir! Hier ist die CSS für beide der divs:

#wolf 
{ 
position:absolute; 
min-height:500px; 
min-width:498px; 
left:-293px; 
top:150px; 
background-image:url('http://www.torucon.no/css/wolf.png'); 
z-index:-1; 
} 

#lion 
{ 
position:absolute; 
min-height:500px; 
min-width:498px; 
right:-293px; 
top:150px; 
background-image:url('http://www.torucon.no/css/lion.png'); 
z-index:-1; 
}

Hier ist ein HTML-Snippet den HTML-Code der divs zeigt:

<div class="wrapper"> <!-- Contains the entire website for structure --> 
<div id="wolf"> 
</div> 
<div id="lion"> 
</div>

((Falls Sie es nicht bekommen: Der Wrapper div soll zentriert sein, und das ist es. Aber wenn ich die Größe meines Fensters ändere, finde ich, dass eine Bildlaufleiste erscheint, lange bevor der Inhalt des Wrappers sogar nahe an den Grenzen des Browserfensters liegt. Das wäre auf Computern mit niedriger Auflösung oder kleinen Bildschirmen störend !))

Quelle

2012-04-21 Aurora Schmidt

Darf ich vorschlagen: body {/ * sonstiges */overflow-x: hidden; } '? Ich bin mir noch nicht sicher, * warum * das passiert, aber es scheint zumindest die Symptome zu behandeln. Sie müssen möglicherweise 'overflow-y: auto;' angeben, um Probleme in einigen Browsern zu vermeiden. –

@DavidThomas Ja, ich dachte ich könnte das auch machen. Aber es sollte nicht wirklich passieren, oder? Absolut positionierte Elemente werden vom Seitenfluss ignoriert und sollten daher die Breite des Körperelements nicht beeinflussen - soweit ich das verstehe. Also, es ist nicht meine Schuld, aber eher ein Problem mit der Fähigkeit des Browsers, den Code zu rendern? Auch - mit overflow-x: hidden;, führt dies nicht auch dazu, dass die Wrapper-div außerhalb der Browser-Wände verschwinden, sobald Sie die Größe des Bildschirms ändern? –

Ich neige dazu zu vermuten, dass die Entwickler, abhängig vom verwendeten Browser, die W3-Standards für das Rendern eingehalten haben (keine Software ist perfekt, es könnte also Fehler geben, aber trotzdem ...). Und ja; Es hat seine Probleme als Ansatz. =/ –

Ich denke, was Sie wollen, ist, den Löwen haben und Wolf progressiv erscheint, wenn der Benutzer den Browser Ansichtsfenster erweitert, aber ansonsten teilweise an den Seiten der Hülle versteckt weg. Richtig?

Ich denke, Sie sind nur sichere Option, dies zu erreichen, ohne die Bildlaufleisten auszulösen, die Sie nicht mögen, sind die Bilder in einem zu kombinieren und sie als Hintergrundbild auf dem Körperelement der Seite anzuhängen.

Ich glaube, Sie haben Recht mit Overflow-versteckt auf dem Körper - Sie würden die Fähigkeit zu scrollen, um übergelaufenen Inhalt zu sehen, wenn das Ansichtsfenster Größe unterhalb der Breite des Wrappers geändert wird.

Quelle

2012-04-21 20:02:40 Faust

Sie wissen, das war eine wirklich gute Lösung. Und das habe ich schon mal gemacht! Ich habe mich einfach daran gewöhnt, viel Code eingeben zu müssen, um diese seltsamen Fehler zu beheben, dass ich komplett aufgehört habe, an diese einfachen, logischen Lösungen zu denken. Danke! <3 –

Ich habe überprüft, dass Sie den Linkgepostet haben 10, aber ich sah unten Scroll-Leiste, Wie auch immer, warum Sie Hintergrund nicht einstellen können?

<body> 
<div class="overlay"> 
    <div class="wrapper"> 
    </div> 
</div> 
</body> 


<style> 
    body{width:100%; background:---;} 
.overlay{width:100%; background:---;} 
<style>

Quelle

2012-04-21 18:43:51 ShibinRagh

Absolute Positionierung: Ein Element erweitert das Fenster, ein anderes Element beeinflusst es nicht. Beide verwenden den gleichen Code: C

Antwort

Verwandte Themen