nicht angemeldet
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>