nicht angemeldet
Hintergrundbild in Box verrutscht hinter andere
Hallo Leute,
ich weiss nicht mehr weiter.
Wat mach ich falsch -- ist sicher nur ne kleinigkeit, aber ich komm nicht drauf. Und hab jetzt im Forum nix ähnliches gefunden. Und validiert ist alles, da komm ich auch nicht weiter...
Folgendes Mini-Layout:
Links eine schmale Box für Logo und Menü (div-Container), rechts für den Rest der Seite für den Inhalt (div-Container mit Hintergrundbild), darin noch ein dritter div-Container mit Text.
Das ganze in XHTML1.0 mit externer CSS-Datei.
Im Internet-Explorer zeigt er an, wie ich's haben will (nicht "wie's richtig ist", ich weiß.. ;) ), in den Mozillas nicht: Da rutschen Hintergrundbild und Textbox immer hinter das Menü, also die Container zwei und drei hinter eins. Warum??
Float-Befehl? Reihenfolge? Margin und Padding haben doch alle, da dürften die doch gar nciht rutschen? Am Width-Wert scheints auch nciht zu liegen, alles rumprobiert...
Werft doch mal einen Blick drauf, Ihr findet es sicher auf Anhieb! Danke schon mal.
Jossip
Quellcode:
CSS
----
#menu{
float:left; text-align:left; margin:5px; width:100px; background-color:#FFFF00; padding:5px; height:100%;
}
#hauptteil{
text-align:left; margin:10px; background-color:#008080; height:700px; padding:3px; background-image:url(bild.jpg); width:95%
}
#unterkasten{
text-align:left; margin:30px; padding:5px; background-color:#FF00FF; width:100%;
}
.border{border-width:8px; border-style:solid; padding:16px}
XHTML
------
<?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>
<title>box</title>
<link rel="stylesheet" type="text/css" href="stil.css"></link>
</head>
<body>
<div id="menu">
<img src="logo.gif" alt="Logo" height="100" />
<p><a href="Punkt1.htm.html">Punkt1</a></p>
<p><a href="Punkt2.htm.html">Punkt2</a></p>
<p><a href="Punkt3.htm.html">Punkt3</a></p>
</div>
<div id="hauptteil">
<h1>Ueberschrift</h1>
<div id="unterkasten">
<p class="border">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext
</p>
</p>
</div>
</div>
</body>
</html>
-
Hallo Jossip,
willst Du das nicht mal verlinken, damit mensch es ansehen kann? Dann kommt viell. auch eine Antwort.
Gruß, Frankx
-
Hallo Frankx,
klar, hier sind die Dateien:
http://www.internet-rechtsrat.de/testseiten/frage-box.htm
http://www.internet-rechtsrat.de/testseiten/stil.cssGruß,
Jossip-
Hallo Jossip,
links kannste auch setzten.
Der Firefox interpretiert das float vermutlich richtig, und bezieht sich dabei auf den Text. Der floatet ja, nicht das div. Der IE macht es ja eigentlich falsch, denn float bedeutet ja umfließen.
Hinkriegen tust du das wohl besser mit position:absolute und dem rechten div dann margin-left:100px; Dann klappt das auch mit der min-height. Beim unterkasten dann die Breite raus, die bezieht sich nämlich wohl auf die Breite des Elternelementes und die ist 100%, wenn nicht anders definiert.
Gruß, Frankx
-
-