nicht angemeldet
weißer Hintergrund
Hallo,
ich bitte um eure Hilfe bei einem Problem mit einer Website. Unter Verwendung einer Vorlage aus Selfthtml (Fertige Layouts – Layout 10) habe ich alles etwas umgearbeitet, mit einer anderen Navigation usw. versehen, aber das Problem, um das es geht, gibt es im Original (Layout 10) natürlich nicht, meinen Fehler finde ich trotz langer Vergleiche/ Versuche nicht.
Am 9.4 hat das Forum mir schon einmal mit dem Tipp "overflow:auto" geholfen, da ging es darum, dass der weisse Hintergrund nicht tief genug nach unten ging (im Firefox), wenn unten ein Bild "rausguckte".
Jetzt ist es umgekehrt im Internet Explorer so, dass die weisse Fläche als Hintergrund nicht tief genug herunter reicht: Bitte mal gucken:
http://www.realschule-alpen.de/test (Ich weiss nicht, wie man den Link anklickbar macht)
Im HTML-Dokument gibt es einen <div>-Container namens main, dessen Hintergrund ist weiß.
Der <body> außenherum ist hellblau.
In der css-Datei steht:
body {
background-color:#e7f3f7;
color: black;
margin: 0;
padding: 1%;
min-width: 640px;
font-size: 100.01%;
font-family: verdana, arial, sans-serif ;
overflow:-moz-scrollbars-vertical;
}
#main {
background-color:white;
padding: 0 10 10px 10px;
line-height: 1.5em;
overflow:auto;
}
Ich bekomme im IE die weiße Hintergrundfarbe nicht tief genug nach unten. Solange es Text ist, kein Problem, sobald aber unten ein Bild ist, hört das Weiß zu früh auf. height oder min-height bringt nichts, denn dann sieht man das Problem zwar vielleicht nicht auf der Startseite, aber auf anderen, die ein bisschen tiefer gehen.
Viele Grüße, Für Hilfe wäre ich sehr dankbar!
Robert
-
Hallo Robert!
Alles von Dir gepostete war unnötig, das wäre der relevante Code gewesen:
.bild1 {
margin: 0 0.5em 0.2em 1em;
float:left;
}Du nimmst dem umschließenden Element die Höhe, da Du das Bild floaten lässt. Da Dein Text nicht floatet, läuft da auch der BG weiter.
Schönen Gruß
Afra
-
Hallo,
zunächst einmal vielen Dank für die Antworten.
Afra, du schreibst:Alles von Dir gepostete war unnötig, das wäre der relevante Code gewesen:
.bild1 {
margin: 0 0.5em 0.2em 1em;
float:left;
}Du nimmst dem umschließenden Element die Höhe, da Du das Bild floaten lässt. Da Dein Text nicht floatet, läuft da auch der BG weiter."
Aber das steht auch in meiner css-Datei, und das Bild hat diesen Code:
<img src='grafik/schule1.jpg' width="539" height="316" class='bild1'>
So dass mir dadurch noch nicht klar geworden ist, was ich machen muss. Ich sag schon mal vorab vielen Dank für eure Hilfe!
Robert-
Hallo Robert!
Ich schrieb auch:
Alles von Dir gepostete war unnötig, das wäre der relevante Code gewesen:
.bild1 {
margin: 0 0.5em 0.2em 1em;
float:left;
}Du nimmst dem umschließenden Element die Höhe, da Du das Bild floaten lässt. Da Dein Text nicht floatet, läuft da auch der BG weiter."
Aber das steht auch in meiner css-Datei, und das Bild hat diesen Code:
<img src='grafik/schule1.jpg' width="539" height="316" class='bild1'>
So dass mir dadurch noch nicht klar geworden ist, was ich machen muss.Genau aus Deiner CSS Datei hatte ich das auch und genau den Fehler beschrieben der daraus resultiert. Das dürfte doch jetzt nicht mehr schwer sein, den Fluss wieder herzustellen. Dein Bild braucht zum Beispiel an dieser Stelle überhapt nicht zu fließen.
Schönen Gruß
Afra
-
Hallo Afra,
danke für deine Antwort. Ich hab's aber immer noch nicht. Du schreibst:
Dein Bild braucht zum Beispiel an dieser Stelle überhapt nicht zu fließen.
Das ist natürlich richtig. Das float:left hat .bild1 deshalb, weil die Website durch ein von mir - wie unprofessionell auch immer, ich bin ja schon froh, so weit gekommen zu sein - erstelltes CMS entsteht, in dem die Schulleiterin der Schule, an der ich aushilfsweise unterrichte, die Inhalte selber auf die Website bringen kann. In anderen Fällen ist dann halt das Floaten erforderlich (wenn Text neben dem Bild ist), ok, mein Problem, das zu lösen.
Aber nochmal zu der Klasse .bild1:.bild1 {
margin: 0 0.5em 0.2em 1em;
float:left;
}
wenn ich die Zeile float:left lösche, und damit das Floaten aufhört, dann müsste doch, hätte ich deine Erklärung richtig verstanden, alles okay sein müssen?Tatsächlich ist der Effekt dann immer noch da. Nur wenn ich .bild komplett aus der css-Datei lösche, ist es gut.
So macht das Ganze für mich noch keinen Sinn, und ich brauche ja auch .bild1, wie gesagt, für andere Zwecke.
Korrigiert der Firefox das denn stillschweigend? Das Problem ist, wie gesagt, nur beim IE?
Viele Grüße
Robert-
Hallo,
nun muss ich noch mal um Unterstützung bitten. Für die Startseite ist das Problem jetzt behoben:http://www.realschule-alpen.de/test/
indem ich im PHP-Teil der Geschichte dafür gesorgt habe, dass keine floatende css-Anweisung gültig ist, wenn nur ein Bild da ist, es also nichts zu floaten gibt, wie afra zu Recht schrieb.
Aber wenn man den Navi-Punkt nimmt: Hausaufgabenbetreuung, wo nur Text da ist - außer dass das Logo rechts wiederum Float:right bekommen muss, damit es da ist, wo es sein soll - dann geht das Weiße nicht runter. Ihr könnt mich ja für bekloppt erklären, aber ich will es auch verstehen!
Und wie ist es bei Menüpunkt: Kunstgalerie. Da sind drei Bilder nebeneinander, da muss doch gefloatet werden, eben damit sie nebeneinander sind. Und auch hier kriege ich den weißen Hintergrund nicht tiefer.
Noch mal Dank im Voraus, wenn mir noch mal jemand auf die Sprünge helfen kann.
Viele Grüße
Robert-
Hallo Robert
Ich versuche Dir mal zu erklären was das Problem ist:
Wenn Du, wie Du es gelöst hast, in einem Div Elemente floaten lässt, dann hat das umschliessende Element keine Höhe mehr. Du musst als nach den floatenden Elementen einen clear: both/left/right unterbringen, damit die Browser dem umschließenden Element wieder eine Höhe geben. Unschön, aber machbar ist das mit einem <div style="clear:both;" />
Um den Effekt zu testen solltes Du einfach einmal in ein Testdokument aufbauen, das nur aus dem relevanten Code besteht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {background-color: white;}
#container {border: 1px solid red;width: auto;}
#eins {float: left;width: 100px;height: 30px;border: 1px solid green;}
#zwei {float: left;width: 100px;height: 30px;border: 1px solid blue;}
#drei {float: left;width: 100px;height: 30px;border: 1px solid gray;}
</style>
</head>
<body>
<div id="container">
<div id="eins"></div>
<div id="zwei"></div>
<div id="drei"></div>
<div style="clear: left;" />
</div>
</body>
</html>Wenn Du jetzt den "clearenden" Div entfernst, oder wieder rein nimmst, siehst Du was ich meine ;o)
Schönen Gruß
-
Hallo afra,
vielen herzlichen Dank. Jetzt habe ich es kapiert und umgesetzt. Ich habe zuvor versucht (nach deinen ersten Erklärungen), darunter ein div mit float:none zu setzen, im Glauben, das würde es aufheben. clear, das ist es stattdessen! Nochmals Danke
Viele Grüße
Robert
-
-
-
-
-
-
-
Hallo
http://www.realschule-alpen.de/test (Ich weiss nicht, wie man den Link anklickbar macht)
nur kurz zur Info: verweise einbinden
Zu deinem eigentlichen Problem hat ja schon jemand anderes geantwortet und vielleicht kriegst du ja noch mehr Antworten...
Erstmal eine schöne Woche und liebe Grüße
mbr