✔ div-backgroundcolor verschwindet beim zu kleinen fenster

Status
Nicht offen für weitere Antworten.
A

AHelfer

Mitglied
Hi ich hab gerade etwas im Forum gesucht, leider nichts gefunden.
Ich hoffe es gibt das Thema noch nicht und sonst sorry ^-^;

Also ich hab folgendes Problem:

Ich habe mit div's ein Layout erstellt, bei welchem ich ein Header habe welcher grau. Jetzt wenn ich jedoch das Browserfenster verkleinere und danach horizontal Scrolle ist die Hintergrundfarbe verschwunden. Und da meine Links im Header weiss sind würde man diese dann teilweise nicht mehr sehen.

Ich muss gestehen, dass ich das ganze mit der Positionierung noch ned so im Griff habe was der Unterschied zwischen absolute und relativ ist usw..^-^;

Code: 
body {
font-family:Tahoma,Arial,Verdana,Helvetica,sans-serif;
font-style:normal;
font-size:12px;
font-weight:normal;
background-color: #ffffff;
color:#000000;
margin:0px;}

.bodytext {
color:#000000;
font-family:Tahoma, Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
font-size:12pt;
font-weight:normal;
text-align: left;
margin: 15px;
}
h1 {
color:#000000;
font-family:Tahoma, Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
font-size:24pt;
font-weight:normal;
text-align: left;
margin-top:0px;
margin-bottom:0px;
}

#header0 {
	position:relative;
	border-top-width:1px;
	border-top-color:#000000;
	border-top-style:solid; 
	border-bottom-width:1px;
	border-bottom-color:#000000;
	border-bottom-style:solid; 
	margin-top:20px;
	height:100px; 
	width:100%;
	z-index:1; 
	background-color:#B2B2B2;
 }

#header2a {
	position:absolute; 
	top:80px; 
	height:20px; 
	width:350px; 
	z-index:1; 
	 }
#header2b {
	position:absolute;
	left:630px; 
	top:80px; 
	height:20px; 
	width:150px; 
	z-index:1; 
	}
		 
#frame {
	position:absolute; 
	top:132px;
	left:650px;
	width:250px; 
	height:auto; 
	z-index:2; 
	}
#body1 {
	position:absolute;
	top:132px;
	left:100px; 
	height:390px; 
	width:500px; 
	z-index:1; 
	background-color:#ffffff;
	}
	   
#inhalt {
	position:absolute;
	border-width:1px;
	border-color:#000000;
	border-style:solid; 
	top:45px;
	left:0px; 
	height:auto; 
	width:500px; 
	z-index:1; 
	background-color:#ffffff;
	} 
	  
#footer {
	position:absolute;
	border-top-width:1px;
	border-top-color:#000000;
	border-top-style:solid; 
	top:532px;
	left:0px; 
	height:100px; 
	width:100%; 
	z-index:1; 
	background-color:#ffffff;
	}


Die HTML Datei sieht dann in etwa so aus:
HTML: 
<body>
<div id="header0">
<div id="header2a">
header-Menu 1</div>
<div id="header2b">
header-Menu 2</div>
</div>
<div id="frame">
Links </div>
<div id="body1">
<h1>Titel</h1>

		<div id="inhalt">
			<p class="bodytext">TEXT</p>
			<p class="bodytext">text</p>
			<p class="bodytext">text</p>
			<p class="bodytext">text</p>
			<p class="bodytext">text</p>
			<p class="bodytext">text</p>
			<p class="bodytext">text</p>
			<p class="bodytext">text</p>
			<p class="bodytext">text<br>
			text</div>

</div>
<div id="footer">&nbsp;</div>
</body>


Also ist es möglich nun den Header so einzustellen das er grau bleibt wenn man scrollt?

EDIT: ich habe auch nun schon versucht mit min-width:800px; das zu machen.. jedoch funktioniert das wohl im IE 6 noch ned.. im FF würde das wohl klappen aber es muss ja auch fpr IE gelöst werden.


EDIT2: also ne Möglichkeit wäre es natürlich ein leerzeichen in das Problem-div zu setzen und auf margin-left 900px; zu setzen oder so.. aber das wäre ja nicht die "saubere" Lösung
 
Zuletzt bearbeitet:
Hi,

für das DIV #frame fehlt beim schliessenden </div> der Slash:

Code: 
<div id="frame">
Links </div>

Wenn ich ihn einsetze, werden a) die DIVs gemäß ihrer Positionsangaben im Anzeigefenster ausgerichtet und b) treten beim Verkleinern des Fensters bzw. horizontalen Scrollen keine Probleme mit der Hintergrundfarbe für das DIV #header0 auf.
 
Hi danke für deine Antwort

Sorry der Slash fehlt nur hier im Forum hab den wohl ausversehen gelöscht als ich den unnötigen Text auf dem Frame Bereich gelöscht habe. (werd ich oben gleich noch einfügen)

Kurz gesagt bei mir ist der / drin aber der Fehler erscheint trotzdem.

Heisst das also es liegt an meinem PC / Browser / was auch immer?

Hab mal ein printscreen:
Hab das Fenster einfach verkleinert und dann gescrollt
 

Anhänge

  • prob-test1.jpg
    prob-test1.jpg
    69,8 KB · Aufrufe: 20
So, ich hab mal was Spezielles für dich gestrickt. ;)

Vielleicht hilft dir dieses Modell weiter, in dem ich die absoluten Positionsangaben für die DIVs aufgelöst (außer im Header) und stattdessen die DIVs #body1 und #frame mit der float-Eigenschaft in einem übergeordneten DIV #content nebeneinander ausgerichtet habe.

Für den Header und Footer habe ich die min-width-Eigenschaft angewendet und für den IE den "min-width"-Workaround von Stu Nicholls eingesetzt.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html,body {
margin: 0;
padding:0;
}

body {
font-family:Tahoma,Arial,Verdana,Helvetica,sans-serif;
font-style:normal;
font-size:12px;
font-weight:normal;
background-color: #ffffff;
color:#000000;
}

.bodytext {
color:#000000;
font-family:Tahoma, Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
font-size:12pt;
font-weight:normal;
text-align: left;
margin: 15px;
}

h1 {
color:#000000;
font-family:Tahoma, Verdana,Arial,Helvetica,sans-serif;
font-style:normal;
font-size:24pt;
font-weight:normal;
text-align: left;
margin-top:0px;
margin-bottom:0px;
}

#header0 {
        position:relative;
        border-top-width:1px;
        border-top-color:#000000;
        border-top-style:solid;
        border-bottom-width:1px;
        border-bottom-color:#000000;
        border-bottom-style:solid;
        margin-top:20px;
        height:100px;
        width:100%;
        z-index:1;
        background-color:#B2B2B2;
        min-width: 900px;
 }

/* min-width-Workaround für IE by Stu Nicholls */
* html .minwidth {border-left:900px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-900px; position:relative; float:left; z-index:2;}


#header2a {
        position:absolute;
        top:80px;
        height:20px;
        width:350px;
        z-index:1;
         }

#header2b {
        position:absolute;
        left:630px;
        top:80px;
        height:20px;
        width:150px;
        z-index:1;
        }

#content {
        width: 900px;
}

#frame {
        float: right;
        margin-top:32px;
        width:250px;
        }

#body1 {

        float: left;
        margin-top: 32px;
        margin-left: 100px !important; /* Für moderne Browser */
        margin-left: 50px; /* Für IE */
        min-height: 390px;
        height: auto !important;
        height: 390px;
        width: 500px;
        background-color: #ffffff;
        }

#inhalt {
        border-width:1px;
        border-color:#000000;
        border-style:solid;
        margin-top:45px;
        left:0px;
        width:498px;
        background-color:#ffffff;
        }

div.clear {
        clear: both;
        }

#footer {
        border-top-width:1px;
        border-top-color:#000000;
        border-top-style:solid;
        margin-top:10px;
        height:100px;
        width:100%;
        min-width: 900px;
        background-color:#ffffff;
        }
-->
</style>

</head>
<body>

<div id="header0">
     <div class="minwidth">
     <div class="container">
          <div id="header2a">header2a</div>
          <div id="header2b">header2b</div>
     </div>
     </div>
</div>

<div id="content">
     <div id="body1">
     <h1>body1</h1>
                <div id="inhalt">
                        <p class="bodytext">TEXT</p>
                        <p class="bodytext">text</p>
                        <p class="bodytext">text</p>
                        <p class="bodytext">text</p>
                        <p class="bodytext">text</p>
                        <p class="bodytext">text</p>
                        <p class="bodytext">text</p>
                        <p class="bodytext">text</p>
                        <p class="bodytext">text<br>
                        text
                </div>
     </div>
     <div id="frame">Links </div>
     <div class="clear"></div>
</div>
<div id="footer">
     <div class="minwidth">
     <div class="container">
          footer
     </div>
     </div>
</div>

</body>
</html>
 
Nochmal Danke michaelsinterface
Ich verstehe zwar nicht alle Details in dem css und warum gewisse sachen wo drin sind aber es klappt (z.b. das .clear oder das content). Hab es jetzt bei mir wieder aufgetrennt in CSS-Datei und HTML-Datei.

Naja Hauptsache es funktioniert. Werde mich, wenn ich mal mehr Zeit habe mit den Dingen beschäftigen die ich noch nicht 100% verstehe.

Also nochmals vielen Dank :)

EDIT: Mir ist noch aufgefallen das man das "display: inline;" bei #body1 einfügen muss da sonst ja der IE6 den abstand verdoppelt. (hatte das problem jetzt gerade aber hab die lösung im netz gefunden)
 
Zuletzt bearbeitet:
Hi!
AHelfer hat gesagt.:
EDIT: Mir ist noch aufgefallen das man das "display: inline;" bei #body1 einfügen muss da sonst ja der IE6 den abstand verdoppelt. (hatte das problem jetzt gerade aber hab die lösung im netz gefunden)
Zum Vergrößern anklicken....
Den "Double-Margin-Bug" hatte ich in meinem Stylesheet schon berücksichtigt:

Code: 
#body1 {
        ...
        margin-left: 100px !important; /* Für moderne Browser */
        margin-left: 50px; /* Für IE */
        ...
        }
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück