nicht angemeldet
Hintergrund scrollt nicht mit
Guten Tag verehrte Gemeinde,
Ich bin am verzweifeln.
Der Background von #kopf und #kopf2 wird nach dem Minimieren des Browser-Fensters nicht mehr korrekt angezeigt.
Genauer beschrieben:
Man minimiert das Browserfenster (IE oder FF) auf eine Größe bei der ein Horizontaler Scrollbalken erscheint, nun scrollt mann mit dem Balken nach links um den rechten Browserinhalt zu lesen und siehe da: Background von #kopf und #kopf2 werden nicht angezeigt.
Ich hab auch schon Lösungsansätze (overflow: auto, etc.) hier aus dem Forum probiert, aber ohne Erfolg. Irgendwas ist an meinem CSS falsch.
Wer kann mir bei der Lösung dieses Problems behilflich sein?
Anmerkung: DIV #text soll fix bleiben.
Danke.
Hier mein Html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
background: aliceblue;
margin: 0;
padding: 0;
}
#kopf {
background: silver;
color: #FFF;
height: 130px;
width: 100%;
position: fixed;
}
#kopf2 {
background: lightblue;
height: 2em;
width: 100%;
position: fixed;
}
#text {
border: 1px dashed #18377A;
margin: 50px 0px 0px 280px;
position: absolute;
width: 535px;
}
-->
</style>
</head>
<body>
<div id="kopf"></div>
<div id="kopf2"></div>
<div id="text">
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
</html>
-
Hallo justus23,
Hast dudas online, damit man sich mal ein bild von machen kann?
Gruss
gary
PS.:Du hast CSS im Html Code, was man natürlich machen kann. Schon mal überlegt eine css-Datei anzulegen? Dort kann man alles central einstellen, was das Layout betrifft. Besonders wenn noch mehrere Seiten dazu kommen. Nur als tip :-)
-
Hallo justus23,
Hast dudas online, damit man sich mal ein bild von machen kann?
Gruss
gary
PS.:Du hast CSS im Html Code, was man natürlich machen kann. Schon mal überlegt eine css-Datei anzulegen? Dort kann man alles central einstellen, was das Layout betrifft. Besonders wenn noch mehrere Seiten dazu kommen. Nur als tip :-)
»»
Hallo Gary,
nein online hab ich es noch nicht.
mach ich natürlich erst wenn es fehlerfrei ist!Die CSS ist ursprünglich natürlich ausgelagert, hab ich ja nur wegen der Übersichlichkeit verkürzt und hier zum HTML angefügt. Übrigens müssen jeweils in meinem Beispielcode bei #kopf und #kopf2 jeweils position: fixed; verschwinden. War noch ein Überbleibsel von einem Test. Also hier nochmal die "richtige" HTML-Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
background: aliceblue;
margin: 0;
padding: 0;
}
#kopf {
background: silver;
color: #FFF;
height: 130px;
width: 100%;
}
#kopf2 {
background: lightblue;
height: 2em;
width: 100%;
}
#text {
border: 1px dashed #18377A;
margin: 50px 0px 0px 280px;
position: absolute;
width: 535px;
}
-->
</style>
</head>
<body><div id="kopf"></div>
<div id="kopf2"></div><div id="text">
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div>
</body>
</html>
-
-
Hi,
Der Background von #kopf und #kopf2 wird nach dem Minimieren des Browser-Fensters nicht mehr korrekt angezeigt.
Genauer beschrieben:
Man minimiert das Browserfenster (IE oder FF) auf eine Größe bei der ein Horizontaler Scrollbalken erscheint, nun scrollt mann mit dem Balken nach links um den rechten Browserinhalt zu lesen und siehe da: Background von #kopf und #kopf2 werden nicht angezeigt.Die 100% Breite, die du angegeben hast, beziehen sich letztendlich auf den Viewport.
MfG ChrisB
-
Die 100% Breite, die du angegeben hast, beziehen sich letztendlich auf den Viewport.
MfG ChrisB
Danke, hab ich schon entfernt.
Löst aber das Problem noch nicht.
-