nicht angemeldet
Hintergrund verschwindet ab bestimmter Fenstergröße
0 
Gunnar Bittersmann
0
0
Hintergrund verschwindet ab bestimmter Fenstergröße
Ich habe ein CSS Layout gestaltet, das mit Ebenen arbeitet. Ich habe Hintergrundgrafiken, die fixiert sein sollen, d.h. nicht mit scrollen, wenn die Seite gescrollt wird. Mir ist aufgefallen, dass diese Grafiken ab einer bestimmten Fenstergröße nicht mehr sichtbar sind, sobald ich den Wert 'background-attachment: fixed;' setze. Scheinbar überlagert die vorderere Ebene, obwohl sie keine HG farbe hat, die untere Ebene. Das sieht man sehr schön, wenn man langsam das Fenster vergrößert. Man sieht, wie immer mehr verschwindet, bis Nichts mehr sichtbar ist. Ich finde den Fehler nicht und vielleicht sehen eure Augen den Fehler.
HTML Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RM Design - The Finest in Art & Design</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="joomla.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div class="swirlsoben">
<div class="swirlslio"></div><div class="swirlsreo"></div>
</div>
<div class="webseite">
<div class="eckeoli"></div><div class="mitteoben"></div><div class="eckeore"></div>
<div class="eckeoliin"></div><div class="mittenavi">Start | Grafikdesign | Webdesign | Fotografie | Kontakt | Über uns</div><div class="eckeorein"></div>
<div class="randweissheaderli"></div><div class="header"></div><div class="randweissheaderre"></div>
<div class="headerabstand"></div>
</div>
<div class="swirlsunten"></div>
</body>
</html>
style.css:
/* CSS Doc */
body, html {
background-color: #646567;
min-height: 750px;
height: 100%;
margin: 0px;
padding: 0px;
font-family: Tahoma, Verdana, sans-serif;
font-size: small;
}
.webseite {
width: 880px;
height: auto;
margin: auto;
position: absolute;
top: 25px; left: 50%;
margin-left: -440px;
z-index: 2;
}
.eckeoli {
width: 20px;
height: 9px;
background-image: url(eckeoli.png);
float: left;
}
.mitteoben {
width: 840px;
height: 9px;
background-color: white;
float: left;
}
.eckeore {
width: 20px;
height: 9px;
background-image: url(eckeore.png);
float: left;
}
.eckeoliin {
width: 20px;
height: 20px;
background-image: url(eckeoliinnen.png);
float: left;
}
.mittenavi {
width: 840px;
height: 20px;
background-image: url(header_verlauf.png);
float: left;
color: white;
}
.randweissheaderli {
width: 9px;
height: 115px;
background-color: white;
float: left;
}
.randweissheaderre {
width: 11px;
height: 115px;
background-color: white;
float: left;
}
.header {
width: 860px;
height: 115px;
background-image: url(headerhg.png);
float: left;
}
.headerabstand {
width: 880px;
height: 12px;
background-color: white;
float: left;
}
.eckeorein {
width: 20px;
height: 20px;
background-image: url(eckeoreinnen.png);
float: left;
}
.swirlsoben {
margin: auto;
width: 990px;
height: 236px;
background-color: #646567;
z-index: 1;
position: absolute;
top: 0px; left: 50%;
margin-left: -495px;
}
.swirlslio {
width: 106px;
height: 100%;
background: url(swirllio.png) no-repeat fixed;
float: left;
padding: 0px;
}
.swirlsreo {
width: 106px;
height: 100%;
background-image: url(swirlreo.png);
float: right;
background-repeat: no-repeat;
}
.webseite-test {
width: 892px;
height: 700px;
margin: auto;
background-image: url(seite_ohne_hg.png);
background-repeat:no-repeat;
}
.swirlsunten {
width: 990px;
height: 100%;
background-image: url(swirls_unten.png);
z-index: 1;
background-repeat:no-repeat;
background-position:center bottom;
position: absolute;
bottom: 0px; left: 50%;
margin-left: -495px;
}
-
@@thunder85:
nuqneH
[…] vielleicht sehen eure Augen den Fehler.
Na, mal sehen.
<?xml version="1.0" encoding="iso-8859-1"?>
Du schickst alte IE 6 in den Quirksmodus. [Jendryschik]
Du verwendest eine minderwertige Zeichencodierung.<title>RM Design - The Finest in Art & Design</title>
Invalides XHTML. [HTML401 §B.2.2, XML10 §2.4]
Ansonsten: Online-Beispiel? [ZITAT1632]
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
Ist noch im lokalen Testbetrieb, habe daher im Head Standardwerte verwendet. Interessanterweise wird mir dabei valid xhtml 1.0 angezeigt, aber auch egal.
Meine Frage ist, ob im CSS Code ein Fehler drin ist, den ich übersehen habe, der das beschriebene Verhalten der Hintergrundbilder verursacht. Derzeit ist nur swirlsoli mit dem Tag fixed versehen und zeigt das verhalten.
Ich sehe aber keinen Fehler und ab einer bestimmten Anzeigebreite (Größe Browserfenster) funktioniert auch alles. Überschreite ich diese Größe, so wird das Hintergrund immer mehr verdeckt, bis es nicht mehr zu sehen ist.
Das ist mir noch nie passiert und da weiß ich echt nicht weiter.
Grundsätzlich gibt es zwei Container für obere und untere HG Grafik mit z-index 1. Diese sollen fixiert sein. Darüber liegt ein Container, der die gesamte Webseite beinhaltet mit z-index 2. In diesem Container wiederum sind die Elemente der Webseite enthalte, zB Header, Footer, usw.
Hier eine Liveversion. Passiert im IE7/8, sowie in FF3. Auf den beide Browsern teste ich meine Seiten immer.
http://www.rmdesign.de/new/index.html
-
@@thunder85:
nuqneH
Ich sehe aber keinen Fehler und ab einer bestimmten Anzeigebreite (Größe Browserfenster) funktioniert auch alles.
Ich sehe einen Fehler: Ab einer bestimmten Anzeigebreite schiebt sich das Menü nach links Aus dem Anzeigebereich und man hat keinerlei Möglichkeit, dorthin zu scrollen.
Auf die Art ist deine Seite unbrauchbar. Überlege dir eine andere technische Umsetzung deines Layouts. Vermutlich löst das auch dein Problem mit dem Hintergrundbild.
http://www.rmdesign.de/new/index.html
Grmpf. Wieder eine Copy-and-paste-Orgie. :-( Verweise einbinden:
http://www.rmdesign.de/new/index.html
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
Keine guckt sich die Seite so klein an. Den Fehler mit dem Menü werde ich nicht beheben.
Gibt es eine Alternative Implementierung für fixierte Hintergrundbilder? Habe den Flag bei mehreren Dingen gerade probiert und alle zeigen dasselbe Verhalten.
ohne fixed stimmt die Position und passt sich an, aber scrollt mit. Ohne fixed stimmt die Position nicht mehr, lässt sich irgendwie auch nicht vererben, dafür scrollt es nicht mit.
-
@@thunder85:
nuqneH
Keine guckt sich die Seite so klein an.
„Keine“ hießt alle Nutzer mit mobilen Endgeräten? Und die werden immmer mehr.
Den Fehler mit dem Menü werde ich nicht beheben.
Wenn deine Seite für viele unbenutzbar ist, brauchst du dich auch nicht um Kosmetik kümmern.
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch) -
Hi,
Keine guckt sich die Seite so klein an. Den Fehler mit dem Menü werde ich nicht beheben.
Warum nicht?
Das sieht doch so aus, als ob darunter nachher noch ein Content-Bereich gleicher Breite platziert werden soll. Da besteht keine Notwnedigkeit, diese dümmliche Zentrierungsmethode zu verwenden.
Containerelement mit Breitenangabe, per margin:auto zentriert, fertig. Erzeugt bei zu kleinen Bildschirmen Scrollbalken, Inhalt trotzdem erreichbar, alle glücklich, und niemand muss den Seitenersteller für unfähig halten.Ohne fixed stimmt die Position nicht mehr, lässt sich irgendwie auch nicht vererben, dafür scrollt es nicht mit.
Abgesehen davon, dass du hier "mit" meinst - doch, die Positionierung "stimmt" - du hast ihre Definition aber noch nicht verstanden.
Gibt es eine Alternative Implementierung für fixierte Hintergrundbilder?
Ja, ggf. mit fix positionierten Elementen.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-
-
-
-
Hi,
Ich habe Hintergrundgrafiken, die fixiert sein sollen, d.h. nicht mit scrollen, wenn die Seite gescrollt wird.
Die Elemente, denen du die Hintergrundbilder gegeben hast, scrollen aber mit weg.
Mir ist aufgefallen, dass diese Grafiken ab einer bestimmten Fenstergröße nicht mehr sichtbar sind, sobald ich den Wert 'background-attachment: fixed;' setze. Scheinbar überlagert die vorderere Ebene, obwohl sie keine HG farbe hat, die untere Ebene.
Nein - die Ebene, der du das Hintergrundbild gegeben hast, wird schlicht und einfach an einer Position angezeigt, wo vom Hintergrundbild nichts mehr zu sehen ist.
Hast du verstanden, woran sich fixierte Hintergrundbilder ausrichten ...?MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.